Due to the non disclosure agreements, it is not possible to share some of my ongoing projects on a publically available platform. You can always reach me out and we can discuss them over a cup of coffee. â
User Experience Design
The following projects demonstrate product design problem solving with the help of user research and UX methods along with conceptualization and interactive prototyping (mockuping).
Appway Studio Redesign
Reimagining Appway Studio with the new paradigm shift of Packages
Business Data Comparison
Appway's Business Component for keeping track of Data Changes
Appway Workspace Recorder
Google Chrome Extension for end-to-end testing
Appway Workspace Collaboration
Chat, Notification & Discussion List
Appway Community Platform
Developer Documentation & Support Platform
Udrive
Master's Project (Personas, User Flows, Information Architecture & User Testing)
UX Writing & Developer Documentation
Working as a UX person, I also did some UX writing and contributed to the developer documentation. Following are some of the topics that I authored. I thank the technical writers under whose guidance I learned a lot. đ Do check the full article/post/documentation by following the provided links.
Bridging the Icon Awareness Gap
Icons can add value for users when they help provide simple visual shortcuts within the user interface. However, apart from a small set of ...
A recipe explaining how to design an emailer using Appway Screens and its components when a customer doesn't want to use any external email marketing and automation services.
I enjoy doodling, illustrating, and pushing pixels. Big fan of crisp icons! đ In some of the following projects, you'll also see some animation skills that I have.
Appway Design System
A series of visuals representing for Appway's design system
Icon Library
Icon library for Appway's icon extension
App Infographics
A series of product infographic illustrations
Planty App
A hackathon (HackZurich) project
About
Born and brought up in India, I did my Bachelor in Applied Arts and started my career in advertising and web design. In 2011, I came to Milan to do the Master of Science in Web & Multimedia Design and worked there for a couple of years before moving to Switzerland in 2014.
Over the last 10 years, the focus of my work revolved around different forms of digital design starting from the graphic, web, up to visual, and user interface as well as experience design. I grew my interest in how the design is being interpreted and used by the target audience. Without a clear understanding of the end-users, their expectations, and pain points most of the designs fall apart even though they are visually appealing.
I believe in keeping the user needs at the core by involving end-users throughout the design process and think around it to build a viable solution rather than following functional or visual aspects blindly.
Presently, being a User Experience Designer at Lufthansa Systems, I interact with diversified users, starting from back-office administrators to airline pilots, and create designs that guide them well in their workflow.
In my free time, you always find me with my sketchbook/iPad drawing something, somewhere. Big fan of Marvel movies, Star Trek & Wars, Back to the future and many more! Apart from drawing and watching movies, I enjoy exploring new places, from hiking in the mountains to strolling in the cities.
Feel free to reach out for collaborations or just a friendly hello đ on pankajjuvekar@gmail.com. You can also connect me via following channels where I might response quicker.
App Infographics
Illustration & Visual Design
A series of product infographic illustrations
My Role
Ideation
Illustration
Visual Design
Tools Used
Adobe Illustrator
Atlassian Confluence & JIRA
Timeline & Team
February 2017
1 UX
1 Product Manager
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Native Appâ is an enterprise application for mobile devices that encompasses business applications built on Appway.
Project Details
The requirement was to demonstrate different features of Appway's Native App. Features such as how the app transmits data in a guaranteed secure connection, how it doesn't cache anything locally on the device, and how accessing from unregistered devices is forbidden. Me and the product manager brainstormed the ideas together and I sketched them out before vectorising them on the design tool.
Variations & Final Outcome
Planty App
Illustration & Visual Design
A hackathon (HackZurich) project
My Role
Ideation
Illustration
Visual Design
UI & UX
Front-end web developmentt
Tools Used
Adobe Illustrator
Brackets
Timeline & Team
4 - 5 October 2015 (48 hours)
1 UX
1 Developer
Project Details
I and my friend Andrea Pellegata hatched Planty App idea in a hackathon here in Zurich, Switzerland (HackZurich) in October 2015. The idea of the app revolves around gifting someone plants and take a step towards the social cause of growing trees on the planet. Every plant you gift someone in real life, adds a tree into your virtual forest on the app.
Here is the video of the App from the Hackathon that will walk you through the app.
After the hackathon, I reworked on these onboarding screen visuals.
Icon Library
Illustration & Visual Design
Icon library for Appway's icon extension
My Role
Ideation
Illustration
Icon Design
Documentation & Maintenance
Developer Coordination
Tools Used
Adobe Illustrator
Brackets
Atlassian Confluence & JIRA
Timeline & Team
May 2014 - Sept 2019
1 UX
1 Developer
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Studioâ is the platform on which these business applications/solutions are built. 'Appway Workspace' is the end-user facing interface that works/behaves as a business application.
Project Details
When I joined Appway, in May 2014 I was given task and ownership of workspace icons library. I redesigned some of the existing icons and added over 250 icons to this library. These icons are available for use via an Appway extension called 'DefaultIconsExtension'. They are ready-to-use and cover most use cases from Fintech industry considering Appway customer base.
I sketched almost every icon on a piece of paper before pushing pixels on the design tool. I created a common grid to have consistency and accuracy and designed these icons in various sizes as per web standards. They adapt well with the range of business applications Appway customers build. I maintained this library and the extension until the time I was working at Appway (Sept 2019).
Appway Studio Redesign
User Experience Design
Reimagining Appway Studio with the new paradigm shift of Packages
My Role
User Research
Interaction Design
Usability Testing
Visual Design (Design System)
Prototyping
Developer Coordination
Tools Used
Adobe Illustrator
Adobe XD
Microsoft Office
Treejack Tree Testing
Atlassian Confluence & JIRA
Video Conferencing Apps
Timeline & Team
Feb 2016 - June 2017
2 UX
1 Product Owner
1 Project Manager
5 Developers
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Studioâ is the platform on which these business applications/solutions are built. Appway Studio is a web based as well as a standalone software platform.
Understanding the problem
Before Appway version 7.0 in Appway Studio, users could organise their business application by creating lists that contain a specific set of Business Objects that belong together. However, over the time when the application becomes complex, you end up having a lot (ranging from a couple of hundred up to ten thousand) of those Business Objects. It was hard to manage them and make them interact with each other. Also, eventually sharing them with your team members (developers, designers, & other stakeholders) would become tedious. There wasnât a way to expose only a specific part of the application without showing it all.
How can Appway users handle any number of Business Objects and manage them efficiently?
Proposed solution
We decided to redesign Appway Studio and come up with a new feature that lets Appway users organise their application in bundles of Business Objects belonging together - Packages. With Packages, we enable managing the business application in a modular sense where users can slice and dice based on business logic and requirements. For example, they can create a Package that defines the brand identity and apply it to different applications in their ecosystem.
Users can export, import and version Packages. The versioning mechanism enables developers to track the progress of their application. They can set up permissions that allow specific users to work on a Package. Appway Studio Redesign with Packages set up a new foundation in the evolution of the platform further.
The Process
User Research & Design Thinking
Target Users
Appway Studioâs primary users are software developers specialised in Appway application development and are responsible for a major part of a business application. There are other secondary users such as System Architects, Designers, and various roles that define the Business Logic of the application.
Research - Offline & Online Methods
At the time in Appway Studio version 6, there were 11 tabs, which youâll notice in the above video (video in the Problem section). Packages introduced a new hierarchy level in Appway Studio which was not there before. So, we started with reassessing the entire navigational structure of the Studio platform. There was a need to redefine the information architecture of the Studio platform.
To empathise with our users further more we did a Card Sorting exercise together with above mentioned target users both in person and online. For online version, we created an in-house application using the concept of Sorting Hat (from Harry Potter). We displayed the name of a subsection and asked participants where it belongs. With an interactive interface, participants can grab the subsection name from the Sorting Hat and add it to the relevant sections displayed on the screen.
The results of both these exercises were less satisfactory. So, we decided to use another less known method called Tree Testing. For this, we used a web based tool Treejack from Optimal Workshop. This tool lets you create tree structures with multiple hierarchy levels. So, we created a hypothetical tree structure containing the higher-level sections. These sections would semantically indicate what they consist. We wanted to reach more number of users, so we conducted this test online and sent out the link.
But this time we prepared a number of tasks based on the user workflow and asked participants to choose the sections based on the nature of the tasks. For example, to check the machine (CPU) load which section would they look for in Appway Studio. There is a way in Treejack that test organiser can define the correct answer (as shown in the image Platform Maintenance) and based on that the results are generated.
We gave them 20 tasks similar to the above one and the results were insightful and reassuring to the hypothesis.
Research Outcome
We could identify
- what section did the users click for the first time in the given structure
- what paths did they choose to go the desired section i.e. did they click elsewhere before reaching to the desired section or accessed it directly
- what was the success rate of the reaching to the desired section amongst all participants
- and finally how much time it took for reaching to the desired section in the structure.
We could see which sections were easy to correlate with the tasks and which were not.
We also collected the data of all the 55-60 participants in terms of - what is their role in Appway, how many years are they working with Appway Studio, which country, region, and city are they from, start & end time of their session, which browser do they use on which operating system.
This helped us understand how our users associate with this new structure and does it fulfil their needs and expectations. Based on results of these different exercises, we redefined the overall navigational structure from 11 tabs (from Appway Studio 6) to much simpler and easy to understand 5 tabs as follows:
Solution Design
Tools for designing and building your Solution
Solution Maintenance
Tools for maintaining and monitoring your Solution
Data & Integration
Tools that manage interaction with other systems, like databases and web services
System Maintenance
Tools to help maintain your Appway Platform
System Configuration
Tools for configuring your Appway Platform
Design System
Based on the new navigational structure, we started designing and prototyping various concepts that were born out of redesign. We wanted to keep the UI fundaments of Appway Studio as they were - the frame around it with a custom colour that a customer can apply, left side tab navigation, Library with all Business Objects and many more. However, we took the opportunity to set up some of the new standards that get followed in future developments. To do so, we started creating a design system that contains -
Colors
For the accurate implementation, we made sure to use the HEX or RGB values from this colour manual rather than sampling them by using tools like âeye dropperâ or âcolour pickerâ. We also tested these colours for WCAG accessibility standards and verified colour contrast on various screens/monitors based on the usage of our target users.
Typography
We tested a few fonts/typefaces before finalising Roboto as the typeface that would match our requirements and as the font that would be easily compatible with our userbase. Being a web-safe and free for commercial use typeface it offers the desired range of font-weights and styles for us. In the Design System, we also added examples of where and how to use the typeface.
Actions (Buttons & Links)
We have actions of types Primary, Secondary and Links. Each one of them has a distinctive visual style which makes them easily recognisable and understood.
We created an icon library containing icons for various use cases from the UI. They were used in various sizes although always in 1:1 ratio. We gave character to the icons with Packages and made them visually appealing for screens with empty state.
We added four types of feedback messages - Informative, Positive, Cautionary and Negative. We also added examples of these messages in the design system. We crafted them carefully so that they could educate users as and when required and rather not confuse them. We kept them consistent, clear, simple, intuitive and human-readable.
For faster development/implementation, we created Widgets along with the specifications. This modular way of designing increased the speed of assembling the UI and maintained consistency throughout Appway Studio.
We introduced a new UI pattern called 'Wizard UI' that allows structuring operations in a step by step manner. The steps were defined by the product managers and designers together based on the requirements. This UI pattern consists of three parts, the overview screen, the wizard steps, and the success screen. We created several prototypes based on this pattern to validate our design ideas which you will find in the 'Prototyping' section at the end.
As a part of the Design System, we also added writing conventions to have a consistent vocabulary with DOs and DONT'S.
Prototyping
While the Design System was progressing, we started prototyping in parallel so we can validate the design system rules ourselves and make it bulletproof. Prototyping helped us understand how newer concepts would fit in the user workflow and what would be pros and cons of if we develop something in a particular manner. We prototyped the following ideas and also validated them with our users by conducting user testing at an early stage.
Solution Design (Packages)
Conceptually we wanted to encompass the Library tab in each Package so all Business Objects of that Package can stay together. All such Packages come together and form the first new âSolution Designâ tab. It is where the design of an application/solution would reside. There were several versions we did for the Solution Design and tested them with the target users.
Here is one of the first versions where the Package details would open horizontally between the rows which we changed to right side bar based on the user feedback.
We made sure to keep some of the UI aethestics from previous versions of the Studio, but aimed for the user interface to be as flat as possible. We chose to give priority to accessibility, and displaying the content of the Studio according to its importance.
Exporting & Importing Packages
Exporting and importing of Packages was born out of the need to share them across different systems or reuse them in other Solutions. Files containing Packages have the ending AWDEPLOYMENT (.awdeployment). We used the 'Wizard UI' pattern to structure both of these functionalities.
We prototyped and tested various other Packages functionalities as listed below based on the hypothesis and user feedback.
Package Properties
We wanted to provide an interface comprising various properties related to the Package itself and the Business Objects it contains. To modify Package Icon, Description, Vendor, we created the UI of General Properties inside the Package. There were several other dedicated UI to define various Package properties. The Entry Points UI for triggering a Package via a Business Object (Process, Screen, or Script function) using a callable URL. The Package Dependencies UI to define which other Packages this Package depends on. The Visible Business Objects UI for letting other Packages (with a dependency on your Package) use these Business Objects. And the Replaceable Business Objects UI to define Business Objects that can be replaced with local Business Objects of the other Package.
Package Maintenance - Versioning
Developers can track the progress by creating versions of a Package when it reaches a stable state. They can add version notes which other team members can refer to for future developments.
Package Maintenance - Moving Business Objects between Packages
We added a 'Wizard UI' pattern inside the Package that would allow moving Business Objects from one Package to another. The interface suggests how to adjust Package properties (Visibility, Dependencies) to maintain a working solution. There were dedicated interfaces to define and modify the visibility of Business Objects and Dependencies between Packages.
Package Maintenance - Deleting a Package
Inside the Package, we also provided a 'Wizard UI' to delete a Package. We indicated the Package dependencies in that interface to fully make the user aware of the implications.
Package Configuration
The idea of Package Configuration was to provide a set of settings that decide how a Package should behave for a specific application/solution. Changing the Package Configuration would not change the Package itself but let users alter certain aspects, such as who can modify or have read-only access to the Package.
User Validation & Feedbacks
We created an interactive test prototype using Adobe XD for early user validation and feedbacks.
Same as the initial user research with Treejack, we gathered some valuable information about our target users by asking them the following questions at the beginning of every user testing.
We asked them to complete tasks similar to the one below ('Create a Package') using the interactive Xd prototype, simpler although entirely new to the user base:
The results of the user testing were reassuring and indicated the areas of improvements for the final implementation.
Studio Redesign was released first for Appway 7 and continued its evolution since then for versions 7.2, 8, 9 and 10. It has significantly changed how the Appway users use Appway Studio and develop applications. The applications since then has been certainly much more structured, modularised and easy to maintain. Now, applications/solutions built on Appway Studio can successfully and sustainably handle any number of Business Objects being the organised bundles of Packages.
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. It has a large community of developers that requires documentation, guidance & product support. 'Appway Community' serves the purpose of being that support platform.
Project Details
We needed a new dedicated platform where Appway developers can discover great content created by Appway experts and connect with like-minded professionals. A place where knowledge on Appway products gets shared via documentation, recipes, blog, forums, support tickets and much more! Also, a place to unveil new Appway product releases and downloads.
We started of with defining the information architecture of this new plaform and how would some of the main pages would look. We conducted a few workshops where we defined the overall scope for the first release - beta version in October 2017. Based on the outcomes of those workshops we prepared some wireframes before starting the prototyping.
We started with the homepage since it would the first impression of the platform and needed to have the most accurate entry points.
There were several landing pages such as introduction to Appway Acedemy, Support (Ticketing System), Knowledge Base i.e. developer documentations and so on. Also, dynamic content pages such as community forum, support ticketing platform where users can start collaborating and ask for recommendations.
After the beta release, we worked further on the usage/installation process of downloadable material from the Product Downloads area.
We added custom error pages (with Appway touch) that provides guidance and redirect users to the homepage.
We also made sure that the platform is responsive and works correctly on mobile devices.
Appway Design System
Illustration & Visual Design
A series of visuals representing for Appway's design system
My Role
Ideation
Research & Benchmarking
Illustration
Visual Design
Animation
Tools Used
Adobe Illustrator
Adobe After Effects
Atlassian Confluence & JIRA
Timeline & Team
Dec 2016 - Jan 2017
3 UX
1 Product Owner
1 Developer
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Studioâ is the platform on which these business applications/solutions are built. 'Appway Workspace' is the end-user facing interface that works/behaves as a business application.
Project Details
We wanted a visual representation of Appway's Design System for business & non-technical stakeholders. I worked on this series of visuals representing and explaining Appway's design system in a tangible manner. I started with sketching out some ideas and referencing what's out there to create a mood board.
Mood board & Sketches
The Main Visual
Screen Components
Appway's out of the box components for designing screens
Screen Templates
Templates made out of Screen Compoments
Solution Components
Higher level components made out of Screen Components & Templates
Style Definition
Visual styling of the all above mentioned components
Explainer Video
Also worked on an explainer video that demonstrates 'how to work with the Design System'
Master's Project (Personas, User Flows, Information Architecture & User Testing)
My Role
User Research
Wireframing & Visual Design
Information Archintecture
Prototyping
Usability Testing
Interactive Presentation
Tools Used
Adobe Photoshop
Adobe Flash
Adobe Illustrator
Balsamiq
Timeline & Team
May 2012 - July 2012
Team of three Students
Project Details
During my Masters in 2012, we were given a task to develop responsiove web design with Mobile First approach for a sports car driving academy in Milan called Udrive. The project invloved competitors study & research, persona definition, designing information architecture, user testing as well as hi-low fidelity designs. We started with the persona defintion to understand our target users.
Persona Definition
Research on Mobile First users in EU
Information Architecture
User Testing Tasks & Results
User flows
Final Wireframes & Designs
Appway Workspace Collaboration
User Experience Design
Chat, Notification & Discussion List
My Role
Interaction Design
Visual Design
Prototyping
Developer Coordination
Tools Used
Sketch
Adobe Illustrator
Atlassian Confluence & JIRA
Timeline & Team
Oct 2014 - Dec 2014
1 UX
1 Project Manager
2 Developers
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Studioâ is the platform on which these business applications/solutions are built. 'Appway Workspace' is the end-user facing interface that works/behaves as a business application.
Understanding the requirement
To collaborate in the context of business application, Appway wanted to offer a range of collaboration capabilities. These capabilities would be context-sensitive and used in the various business processes. We had to produce a functional design within merely a couple of months.
How can business stakeholders collaborate in the context of Appway built business application?
Proposed Solution
We decided to build Appway's very own collaboration components that are fit for the process-driven application. For instant and active collaboration, having chat functionality was ideal. It would include one to one and group chat. For topic-oriented conversation, we thought of having a discussion forum. The stakeholders can create discussion threads for a topic, and the conversation can be stitched to the business application and can be accessed anytime. Finally, we would provide notifying functionality for both chat and discussion, so the involved stakeholders/users don't miss out on anything.
The Process
Lean UX
Considering the time constraint, we decided to follow a lean UX technique so we deliver faster and build an MVP that can be tested.
To do so, we started studying some of the popular chat messenger functionalities that were out there. Google hangout, Facebook chat, Skype, Yahoo, to name a few! The forums and discussion threads on StackOverflow, Fogbugz!
We started on focusing on what all main and sub functionalities that each of our components would offer. For example, where would users navigate when they click on a notification message in the notification popup? Would there be just a notification popup containing all notifications or the latest notification message as an alert that appears instantly and disappears in a few seconds? Questions like these needed collective answers both for designing/prototyping and implementation.
Together as a team we conducted workshops to brainstorm ideas and analysed various use cases.
We prototyped those various use cases for each component keeping the user needs at the centre. We listed down all the functionalities that we can provide in the given timeframe.
Chat
The colours used in the interface were part of Appway's design system at that time. We kept the standard notations for online and offline users as they were amongst the popular chat functionalities.
We covered cases like server connection failure. It had both functional and user-experience aspect, and we wanted to be sure that there is a clear indication of that in the interface.
When the chat is minimized or is in the popup, the users would see a counter of comments on the popup icon.
Discussion List
Since we were working on Chat and Discussion simultaneously, we decided to keep some of the components consistent and common amongst them (e.g. sender and receivers details, timestamp of the comment). We only iterated the user interface based on the requirements of Discussion. We sliced & diced into smaller components (New Post field, Comments Thread, user mentions, links, Global Search etc.) and then assembled them to create Discussion component as a whole.
Notification Popup & Alerts
Notifying users would complete the whole user experience. We decided to have a dedicated notification bell in the top of the header, where it is accessible anytime, that would trigger the Notification Popup. From the Notification popup, users would click on the notification and open up the Discussion List topic (e.g. 'Go to FATCA Questions', FATCA Question is the topic) or trigger the Chat. Once a notification gets clicked, it would be 'marked as read'. To manage all Notifications, we added functionalities like 'Mark All As Read' and 'Delete All' so, users have clean-up choices. We also designed empty state for the popup to have visually appealing experience. Following are some of the various prototyping phases.
Since there could be many notifications, we made sure that our design works for a muti-digit counter. We wanted to prepare the component where the collaboration would be so frequent and agile.
We decided to have a notification alert popup that would appear on the corner of the screen instantly. It would enable our users to act swiftly rather than getting prompted via notification popup and then click on a notification.
Subscription Widget
To have topic-oriented Discussion List, we came up with an idea of having a Subscription Widget that would appear under the user profile settings. It would allow users subscribing to a range of topics that are relevant for their workflow. Once they subscribe to a topic, they would receive notifications automatically even when their name is not mentioned in the discussion. They would be able to decide via which channels they want to get notified, SMS or Email, and how frequently (immediately, once a day, once a week). The admin user would be able to add new topics to the Subscription Widget. These topics then would become visible to all stakeholders.
User Feedback & Validation
Due to the time constraint, we only could do user testing and feedback gathering from internal users/stakeholders. We created a prototype using Appway Studio capabilities and let users get their hands on the implementation of the components. We found some of the crucial technical bugs that we had to fix before the first release. Some of the business stakeholders suggested capabilities like sending images and documents via both chat and discussion. Some users (with a technical background) suggested having a rich text editor for the new post/comment field to stylish text. All in all, the components were well-received in the MVP phase.
Appway Workspace Recorder
User Experience Design
Google Chrome Extension for end-to-end testing
My Role
Interaction Design
Visual Design
Prototyping
Developer Coordination
Tools Used
Adobe Illustrator
Adobe XD
Atlassian Confluence & JIRA
Timeline & Team
May 2019 - August 2019
1 UX
1 Project Manager
2 Developers
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Studioâ is the platform on which these business applications/solutions are built. Appway Studio is a web based as well as a standalone software platform. 'Appway Workspace' is the end-user facing interface that works/behaves as a business application.
Understanding the requirement
To test user-scenarios throughout Appway Applications (i.e. Appway Workspace), we needed an automated testing mechanism that can let Appway Application developers record sequential user interactions and then replay them to understand if the screens in the workflow work as expected.
How can Appway Application developers perform end-to-end testing to validate user-scenarios in their application?
Proposed Solution
The developers from the internal R&D team came up with the idea to create a Google Chrome extension, considering Google Chrome as one of the main browsers used by Appway Application developers. The extension would allow recording user interactions with Appway Applications and automatically replay them when the tests are run. I worked together with them on the UI and the UX of the extension. I also helped them define the process of how to use the extension and document everything for the developer platform.
The User Interface & Documentation
The extension analyses if the screen is Appway Workspace or not and indicates that in the user interface before starting the recording of the test. Once the recording is started, the standard recording notation (dot with 'rec' text) appears on the left corner of the button area. The recording can be paused/resumed at any point in time. It generates a script file that can be downloaded once the recording is complete. The interface displays the script file size when the recording is in progress and completed. It can let Application developers determine the size of the test and plan accordingly.
As mentioned briefly before this extension to record user interactions on Appway screens - such as entering data, clicking on buttons, or marking of checkboxes. The downloaed script file can be used to automatically replay the interactions later on using a testing tool.
As a part of developer documentation, we also illustrated the following process to let Appway Application developers understand at a glace how to use this extension.
The extension is part of Appway's End-to-End Testing offering which enables the testing of Appway Solutions in an easy, efficient, and effective way.
Business Data Comparison
User Experience Design
Appway's Business Component for keeping track of Data Changes
My Role
User Research
Interaction Design
Usability Testing
Visual Design
Prototyping
Developer Coordination
Tools Used
Sketch
Adobe Illustrator
Adobe After Effects
Microsoft Office
Atlassian Confluence & JIRA
Video Conferencing Apps
Timeline & Team
Mar 2018 - Sept 2019
2 UX
1 Product Owner
2 Project Manager
4 Developers
Background
Appway enables organisations to develop and operate scalable and reliable business applications. Financial and banking institutions use Appway to automate and manage their business processes. âAppway Studioâ is the platform on which these business applications/solutions are built. Business Data Comparison is an Appway prebuilt component that is reusable, configurable and scalable. The interface of the component is predesigned as well as autogenerated by binding the data & logic together.
Understanding the problem
In a complex business application (e.g. financial or banking), keeping track of data changes and updates (e.g. KYC review) becomes difficult over some time. It's hard to ensure the accuracy of the entered data. It requires verification from the involved stakeholders via (out of context) external collaboration channels such as mail, email, phone, or sometimes even exchanging paperwork in person, i.e. manual work. Sometimes, the same data needs to be changed/updated in several places, and there isn't an overview available.
How to keep track of data changes and updates in a business application built with Appway?
Proposed solution
Appway decided to build a Business Component that can be customized based on the business processes of any business application built on Appway. This component would allow keeping track of customer data changes and provide clear overviews of current value vs the historical value depicting the changed data. It would highlight newly added, deleted or updated values and let users know who modified what and when. The component would allow collaborating all involved stakeholders in the context of these changes via user mentions and commenting. They can also flag a change as 'important', so it gets precedence over other changes.
Finally, the component would allow reviewing own changes to the editor and then send them for a review to another collaborator (reviewer) in the business process.
The Process
Hypothesis
Brainstorming
We started with analysing the common pattern amongst the business applications built with Appway. These are mostly banking or rather financial applications where different roles perform different assigned responsibilities.So, we reached out to internal Application developers & System Architects (who design these apps) to understand what are different phases in such process-driven applications. Where do the data gets entered, where it's being reviewed and how different stakeholders in the process collaborate. We wanted thouroughly to understand the current scenario to create a strong hypothesis. Based on that hypothesis, we started sketching out design ideas.
Referencing & Benchmarkting
To support our design ideas and the hypothesis, we also did referencing & benchmarking. We took a closer look at how do some of the popular applications track data changes, how do these applications behave, and how does the user interaction look. It helped us understand the common expectations that our user might have.
During this analysis, we realised that we could follow some of the standard notations the way they are, such as deleted data is usually indicated with strikethrough and possibly with red colour. The focus at this point was to understand what happens if you make changes to existing data.
Our hypothesis concluded the following points:
Overview of Data Changes
We provide an overview of all Data Changes at different granularity, changes on the level of a single person and changes on the level of higher entity than a person such as a business relationship or organization. Such a business relationship can have multiple bank accounts with some account holders and beneficial owners, and other business stakeholders such as Administrator, Authorized Signatory, Attorney etc. The Business Data Comparison would highlight changes on each level and provide an overview of all that's been added, removed or updated.
Added Data
When the data is added, the visual notation would be green.
Removed Data
When the data is removed, the visual notation would be red with strikethrough on the data property value.
Updated Data
When the data is updated, the visual notation would be blue with text 'Has changes'.
Data editor's details
Clicking on the Data Changes would show the date and time of the change as well as the editor of the data.
Commenting and Flagging in the Context of Changed Data
The stakeholders of a business relationship would be able to comment in the context of changed data. Also, they would be able to flag changed data as important, so it gets immediate attention. Needless to say, the stakeholders would not need to use any external collaboration channels.
Summary of all changes
There would be a screen where the editor can see a summary of all changes done by him/her before submitting it to the other stakeholder (reviewer).
Prototyping - Phase 1
Based on the hypothesis, we started designing and prototyping. We did several design iterations (low-fidelity and high-fidelity using Sketch). Since we had a design system already in place, we leveraged the design patterns/modules/components from it. We aimed at creating a design concept that we can share with internal stakeholders, target users (customers) and get early feedback before going ahead.
Added Data
Removed Data
Updated Data
Overview of Data Changes with editor's details
Commenting and Flagging in the context of Changed Data
Summary of all changes
As the prototypes progressed, we wanted to validate our hypothesis and the early designs with our customers and potential target users.
User Research & hypothesis validation
The internal business consultants directed us towards customers that would have the use cases for Business Data Comparison. We decided to interview some of those customers, where the desired target users and their roles exist. We interviewed about five customers from different part of the world (EMEA, APAC, AMER) with a list of 15-20 (approx.) participants. Some of those interviews were one to one, and some done in the group.
The goal of these interviews was to validate the early design concepts of Business Data Comparison, gather information on user roles, and their workflows.
In the first part of the interview, we gathered information based on the following questionnaire:
Target Users
The first part helped us concretely define three core user roles amongst the others. These roles vary depending on the organizational structure and business workflows. Despite that, we were able to narrow down their responsibilities.
Relationship Manager
Editor of the data, Data Gathering & Data Entry personnel, Front Office Personnel, Client Onboarding Personnel
Back Officer
Editor of the data, Formalities Check Personnel, Limited Approval Rights, Back Office Personnel
Compliance Officer
Reviewer of the data, Approver of the data
In the second part, we provided them with an online link with the prototype and asked to complete the following tasks. We observed and recorded their response to analysing what do they understand and what don't. Also, we heard their spontaneous inputs and suggestions while doing those tasks.
Following were some of the comments/suggestions from those sessions which was reassuring the hypothesis:
We evolved the design of the component further based on above commments/suggestions.
Prototyping - Phase 2 & User Flows
In the existing design, we added the following ideas on top of the ones from the initial hypothesis:
Filtering the data changes by Savepoints
The concept of Savepoints was born to display the changes for the same screen by different stakeholders. Savepoints would be the records of changes in time. Filtering by Savepoints would let users see the changes occurred in data between the selected point in time and the present. If Savepoint names are configured accordingly, you would look for the changes performed by a specific role, the user involved in the business process or other combinations. By default, all Savepoints would be available for filtering and sorting by time. The Savepoint 'Start' would show all changes i.e. changes from the beginning.
Navigation based on Breadcrumbs
Breadcrumbs would allow users to navigate nested data. It would depend on how the data is structured and how is the hierarchy. The component would adapt and display the nested structure as Breadcrumbs. When there are changes, a blue dot would appear at the level of breadcrumbs.
History of all changes
For each data property (field), we also wanted to provide the ability to inspect the entire history of changes. Users would view the history of all changes for each field by clicking on a dedicated button and thereby triggering the History popup. The History popup would contain the editor's information and the date and time of change in a timeline. The latest change would be highlighted and would be always at the top of the timeline.
Changes in paragraphs
This was one of requirements specifically mentioned during the user interviews. We created two proposals which would be possible to configure depending on user's choice - two separate areas and one merged area containing the changes.
User Flows
After the user interviews, we thoroughly studied the workflows of the previously mentioned target users. It helped us analyse and define the user flows and position Business Data Comparison in those user flows. We prototyped each of the overflows which immensely helped us during the final end-user validation and implementation.
User flow of Relationship Manager
User flow of Back Officer
Compliance Officer
With this user flows and iterated designs (prototypes), we needed the end-user validation. We reached out to the same users that we interviewed initially and shared the progress before the first release.
User Validation & Feedbacks
We had the beta version of the component ready for the user testing. So, we created a test prototype using the beta version and Appway Workspace components. It consisted of a dummy business relationship with a dummy business scenario mimicking above user flows.
This time we had a clear understanding of the target users so, we created the tasks accordingly and gave them to respective participants in those roles.
Following were the step by step tasks for the Relationship Manager role:
Similarly, the step by step tasks for the Compliance Officer role:
One of the main findings of this user testing was that users could identify and differentiate between what's been changed and what's not. The notations were easy to understand for the users, and they found it useful to have the collaboration capability in the context of the changes. Users were convinced that having Business Data Comparison in their business processes can automate most of the work, and eventually they can get rid of manual work which was tedious, time-consuming, and error-prone. They also provided us with their wish list, which helped us plan how we want to evolve this component after its first release.
