Engage with your Sales, Inventory
and Customer Analytics
Dashboard
Application Design
For Android and iOS
UX Designer
UI Designer
Interaction Designer
UI/UX Design
Mobile UX
High-fidelity Prototype
Feature & Marketing Video
.svg.png){kind=icon}
Our research found that there are room for improvement on some of the features.
Users have to apply store or date based filter on each screen
Users have to find the top selling products, departments, categories, subcategories separately
Users have to spend time going to each product screen to view product details and sales
On the found problems the following solutions were created with user and business centric approach
Club similar data in dropdown cards
Create Global Filter and FAB filter for day and month
Have a product screen with tabs to switch between top selling products, departments, categories, subcategories
Create a global card to view product and sales details on selected product
From the team research we understood that adding some feature can make the app more useful
Daily sales and Hourly Sales details
Top grossing Products
Quantity or stock on hand
SCAMPER technique is an Idea Manipulation Tool to guide us in generating diverse ideas. Rather than thinking original ideas, I used this tool to gather ideas from divergent fields, manipulate and fuse them into our requirements.
Colors can speak in ways that are every bit as powerful as language. They can reflect the personality of the brand. They can attract users, and they can better communicate the message.
Keeping these in mind, I wanted to employ a UX color palette for a better user experience. By the right color selections shown in the below image I was able to support better information readability. It also increased the strength of elements such as calls-to-action. It enhanced customer navigation capabilities. It fulfilled subconscious aesthetic user needs. It also stimulated intuitive interactions.
nGauge provides merchants with their Hourly sales, Daily Sales and Payment type used by their customers in store by Bubble or Scattered chart, Area chart and Donut chart respectively. I managed to improvise the graphs visually as mentioned in the below image and was able to provide a better user experience.
.svg)
Data was spread across the ngauge app, I wanted to club similar data into groups for easy understanding and better user experience. So I used card sorting technique to see how different people would interpret these data and how often they would like to see some of these data together or as a group.
I wrote down all the data points that needed to be clubbed as Cards and with the help of 15 volunteers from within organization and customers, I was able to gather 15 different type of combinations of these data cards. We did a hybrid card sorting so I was able to identify how different people grouped these data and what all group names they liked to call it. Below representation shows 3 such variations out of the 15 participants.
.svg)
I created a matrix with the cards list and group names assigned by the participants of card sorting. I wrote down the number of times a person added a list item to a certain group. This gave an idea about the most used group name and how often list items are added to it. The below representation shown the number of times a card list item is assigned to a group.
The card sorting matrix makes a clear idea of how customers would like to see the similar data together. With the card sorting technique, I was able to group data efficiently and was able to design card based UI for the same as shown below.
SALES SCREEN
CUSTOMER SCREEN
TOP SELLER
Feedback is one of the most commonly wanted feature for a merchant about their store. I wanted to adapt the common feedback user experience that is to have a positive and negative feedback section, so that merchants can easily switch between them.
The filters in ngauge allow customers to view their stores KPI's with respect to day and month. This have to be applied in each screen to sort data and was consuming more space in doing so. I wanted to use the screen real estate more effectively. So I made the filters into a FAB (floating action button) so that it can be hid when applied and can be applied consistently.
As a brand Iconography plays an important role. I wanted to have the icons meaningful, consistent and accessible. With the updated icon pack I was able to convey meaning of a subject much easily and thereby improve the user experience.
A great logo is a great brand! With a ton of options available in the App Store and Play Store, the pictorial representation of the app is important to catch the user's attention and keep the app easily recognizable.
So I wanted to create a unique and simple logo that directly conveying the analytical capabilities of the app. I came up with different ideas and with some feedback I created this combo of search and analytics logo as shown below. The updated logo was able to bring in a fresh feel and excitement to the users.
The role of typography is significant enough to change user perception with subtle diversities between typefaces. I modified the typography with suitable fonts and sizes to increasing and retaining user attention, it helped in connecting with the user and enhancing app efficiency.
Merchants likes to see their top selling products very often. So I used the top seller details to display the best seller product in the main screen. This made the life easier for merchants, they no longer need to scan for the product details to find the best selling product. Ratings provided by all the customers was used to create the customer engagement index. This was able to provide an overall rating of the store based on past customer ratings and the merchants could know how well the customers like their store.
Effective and tested user flow is crucial for good user experience. With the details obtained from SCAMPER design process, I was able to modify the user flow and obtain a much effective structure as displayed in the below diagram. The updated user flow provide better understanding of the data to the users and a clean experience.
Low-fidelity prototype is useful for quick and easy tangible representation of a concept, a use flow, or an information structure created for getting quick feedback and improving the product. I was able to build the below prototype with relative ease and was able to represent the ideation concepts into a well structured design.
.svg)
A high-fidelity prototype provides the level of information necessary for accurate engineering cost estimates, early in the process when these estimates are most useful. It enabled to brainstorm how the UI should interact with customers. I was able to conduct QA and real user test to ensure the user experience is as expected. It enabled and encouraged collaboration between product manager, UX designer, and engineer that is necessary to discover a valuable, useful and feasible product.
%20(1).svg)
Microinteractions provide feedback to the user, often through conveying system status or helping users prevent errors. Additionally, it can be used as a vehicle for branding. I wanted to make the experience engaging and exciting with animations and microinteractions. Below sections represents few of these and describes its working.
It's always pleasing to see the number counting up as a user. With this dashboard counter interaction I was able to bring a little pizazz to the numbers. Counter animation makes people remind of the achievement as a store and how well the store is doing as increasing numbers from the start. The interaction also evokes excitement to the users about viewing the dashboard.
The clockwise wheel animation is commonly used for donut charts. I wanted to bring the usual aspects of the same in the application. The rotating wheel makes the donut fill up with values in clockwise direction. It makes the chart more engaging and gets the user attention towards the chart and partition of values.
Customer rating is important to a store. The filling up animation of radar lets the merchants feel how good is the customer engagement index and how well people likes to visit their store. The green pulsing heart gives a lovable feeling to the store when the index value is more than half and lets the merchants know by a broken heart that the scores are low. These animations makes the app more accessible and the experience more engaging.
.png)
.jpg)
If you like what you see and want to work together, get in touch!
msmanusankar98@gmail.com.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}
.png)
%20(1)%20(1)%20(1)%20(1).png)