Timeline:
1 month
My Role:
UX/UI Designer, UX Researcher
Solution:
Cohesive Experience
Drop down to improve discoverability of unique features.
Improved navigation
Uniform Platform Experience
We developed a style guide and layout grid to be applied throughout the entire application.
Research:
First User Problem: Improved Onboarding Experience
New Experience:
Previous Home Screen:
Finance:
Dropdown function vs. Folder function to organize homescreen
Ghost buttons vs. Regular colored buttons during onboarding
Swipe to pay/request vs. Tap to pay/request
Key Performance Indicators:
Lessons & Learnings:
The primary change we made was the introduction of a dropdown menu that provides users with a convenient way to navigate between essential components within Finance such as wallet management, account details, payments, and cryptocurrency-related functionalities. This dropdown menu revolutionizes the layout of the finance section and serves as a versatile template that can be applied across all other sections of the application for consistent and intuitive navigation.
Third Design Iteration: Settings
The next user flow we focused our attention was the Settings section, with a particular emphasis on the Privacy and Permission page as per our client's request. This page empowers users to have granular control over the information and data accessible to various institutions. To ensure a seamless and user-friendly settings experience, we began our design process by conducting a competitive analysis of financial and banking applications.
New Settings Flow:
We strived for transparency, ensuring that users have a clear understanding of the implications of their choices when granting or revoking permissions. Providing clear instructions and a simple yet intuitive interface will help users make informed decisions about sharing their data and managing access by various institutions.
Final Designs:
Testing and KPI’s:
Brand Identity
Improved layout and functionality of home screen
Seamless onboarding experience
We began our research with a competitive analysis. We analyzed direct and indirect competitors to see how other companies were solving similar problems, as well as gain a better understanding of our target audience’s goals, needs, and frustrations.
After the competitive analysis, we conducted an audit of the current experience and added comments on what we liked, disliked, what we would change, and what we would keep the same.
Key Insights:
Keep a sense of organization and uniform throughout the entire application will build trust with users.
Users are sensitive about their data.
Make sure users understand and buy into your mission.
Adoption of products like this will take time, and that’s okay.
Goals:
Once we had a full understanding of the current user problems and learned how adjacent competitors were solving similar issues, we outlined 3 goals to guide our design process. Outlining our goals prior to diving into our designs would help keep us on strategy and ensure that our creative solutions align with our intended objectives.
Refresh the onboarding experience that will allow users to create their profile and gain access to the full capabilities of the application.
Redesign the home screen and finance flow to increase discoverability of unique features.
Redesign the Settings and Privacy and Permissions flow that will allow users to quickly and efficiently adjust their data privacy settings.
During our audit of the current user experience, the first thing that caught our attention was the inconsistencies within the onboarding process. It appeared that the previous team that developed this flow did not use a consistent design system and style guide. This led to unfamiliar color schemes, text boxes, and buttons.
To improve the overall user experience, our focus was on streamlining the onboarding process and establishing a cohesive design system that can be implemented across the entire application. By simplifying the onboarding instructions and developing a comprehensive design system, we aim to enhance usability, consistency, and familiarity for users.
To gain access to the wide range of features available in this application, including wallet management, financial tools, and medical records, users are required to upload a valid government ID. Our goal is to maximize user participation by encouraging individuals to upload their IDs and unlock these essential features. To achieve this, we have incorporated the "ID Document Upload" as a crucial step within the onboarding process, while also providing an option for users to skip this step if they prefer to upload their ID at a later time.
Second User Problem: Improved Home Screen and Finance Functionality
After we redesigned and improved the onboarding experience, the next user flow we focused our attention on was the home screen and financial features. During our audit, we identified a series of issues and areas to improve on the home screen:
Inconsistent design scheme, spacing, and iconography
Poor information hierarchy
Difficult to discover features
New Home Screen:
Have you used a similar product or service before? If yes, how does this onboarding experience compare to your previous experiences?
What were your expectations when starting the onboarding process? Did the onboarding meet those expectations? Why or why not?
What are your thoughts on the privacy permission during the onboarding process? Are you comfortable with the required settings?
Do you understand the purpose and value of the product/service after completing the onboarding? Can you explain it in your own words?
How do you feel about the visual design of the onboarding screens? Is it visually appealing and consistent with the overall product/service design?
Can you recall the key information or steps provided during the onboarding process? Is there anything you feel was missing or could be improved?
At the end of this partnership with Shoptaki, I am confident that the work we did will benefit their company and help bring this product to market. Working on a product that crosses over into so many industries has been such a valuable learning experience for me. Industries like finance and healthcare are so heavily regulated which is something that designers must keep in mind when solving user problems.
Additionally, working with other team members with unique backgrounds and skillsets was helpful and eye-opening to me as a UX designer. Throughout the entire process, we made sure to collaborate and ask each other questions when we felt stuck or needed to see something through a different lens. We made sure to have multiple touch-points throughout the week to ensure we came prepared to every client call.
Overall, I am very thankful for this experience and look forward to keeping an eye on the future development of Shoptaki and Smart ID.
We implemented several significant enhancements to the home screen with the goal of improving its overall functionality. These additions include a bottom navigation bar, a search function, and an improved spacing and information hierarchy. These features work together to provide users with efficient navigation, quick access to important areas, and a visually balanced interface.
One of the notable improvements is the introduction of a bottom navigation bar. This persistent navigation element appears at the bottom of the screen, offering users easy and intuitive access to essential features within the application. The inclusion of prominent icons for Home, Notifications, and Settings allows users to swiftly jump to these key sections from any screen, ensuring efficient navigation and reducing the number of steps required to reach important functions.
The search feature empowers users to quickly find what they are looking for by simply entering relevant keywords or phrases. Whether users are searching for specific functionality like "credit cards" or "health records," the search function provides a convenient and efficient way to access desired information or perform specific tasks within the application.
By strategically increasing spacing between buttons and elements, we create a sense of visual clarity and organization. The introduction of ample white space helps to reduce visual clutter and allows each element to breathe, resulting in a more visually balanced and less overwhelming interface. This improved spacing contributes to a more relaxed and comfortable viewing experience for users, enabling them to quickly locate and interact with the desired features.
Our team turned its attention to enhancing the user flow within the Finance section of the application. We recognized the need for a more efficient method of switching between various features. Through a comprehensive audit, we identified a crucial improvement: creating a seamless way for users to navigate between different functionalities within the Finance user flow. Previously, users were required to tap all the way back to the home screen to switch between features such as wallet management, transactions, accounts, and cryptocurrency.
Although we were only working with Shoptaki and on this product for one month and needed to focus our attention on design, we also wanted to provide the client with a testing roadmap and lay out some Key Performance Indicators for when this product goes to market. A sophisticated product like this will require continuous rounds of testing to create the best experience for its users. Below are a few testing scenarios, KPI’s, and questions to ask users during usability tests:
AB Tests:
Completed accounts set up
Number of uploaded documents
Number of financial transactions completed
Time spent on app
Average number of features used by user
Usability Test Questions:
Problem:
Shoptaki is a business whose mission is to make the world a better, more efficient, and safer place for all by revolutionizing the way we handle data and harness the power of A.I.
Shoptaki is developing a product called the Smart ID. This product is a mobile application that keeps digital copies of government ID’s, financial information, healthcare records, education records, and so much more. Due to the fact that this product crosses over into so many different industries (government, healthcare, finance, etc.), they have struggled to develop an interface that allows the user to comfortably navigate through the multiple features of the application. The team and I were tasked to flesh out the brand identity and develop a system that allows the user to efficiently navigate through the Smart ID.