About Cowrywise
Cowrywise is an online saving and investment company in Nigeria dedicated to help individuals make quick savings with seamless experience.
Project Objective
1. To make savings and investment easier for every Nigerian regardless of their economic status.
2. To increase user growth and product adoption.
UX Design Process
DISCOVERY
I signed up as a new user on the app to conduct an audit/heuristic evaluation to list out challenges that new users could possibly encounter during their signup and onboarding process.
I also did an online survey to see what the public and existing users are saying about the app. From the reviews, most users seemed satisfied but some had issues with withdrawal and response time from customer care.
User Interview
Usability Testing (1st phase) was done using the already existing Cowrywise App
My target audience was narrowed down to first-time and inactive users. I needed to confirm my hypotheses and note other user pain points in the signup flow.
Savings
New users are automatically redirected to regular, locked savings instead of showing them the different savings plans. or dashboard. The dashboard is not easily noticeable.
Investments
Some users don't understand technical terms. A user got demotivated, while some had use google search for terms like "mutual funds" before they could continue.
How might we?
I came up with with a few hypotheses which consists of problems in form of HMW's (How Might We's), proposed solutions and their metrics of success. The HMW's are:
1. How might we make the experience seamless and hitch-free for new users to be able to complete tasks successfully?
2. How might we make the app simple and understandable for first-time users?
Then I came up with one HMW that summarizes all other HMWs, and would help in driving my design decisions.
"How might we make Cowrywise more user-friendly in order to increase product adoption and customer retention?"
User Personas
From the demographics gathered, I created personas who would represent all my user types.
Empathy Mapping
I drafted TWO empathy maps from the information I got during interviews. They help me develop a list of possible features and adjustments that could be made to the already existing product.
New User Flow Diagram
DESIGN
Low Fidelity Wireframing
The hypothesis for the proposed solution was to add a brief info on specific features, and also to apply heuristic principles that would help users understand the system status in order to make the onboarding understandable and hitch-free.
I came up with 3 wireframe variations before deciding on a final one that met business and user requirements better.
1. I included password requirements, to prevent repeated user errors. I also included privacy policy and terms and conditions just above the primary button.
2. A 'return to dashboard' button at the bottom of the page, so when a new user gets redirected to this page immediately they're signed in, they are able to see that there's a dashboard incase they want to explore the features of the app first.
3. A 'FAQ's' section under the fund type options for users to learn about funds and investments, as well as understand the complex terms without leaving the app environment.
4. This screen was totally absent on the app - when a user decides to build their savings, they don't have the option to choose between building emergency funds or any other savings plan and are automatically redirected to locked savings, which leads to frustrations and disputes later. Thus, this screen gives them the flexibility to choose.
Usability Testing (2nd Phase) - Low Fidelity
After the wireframes were done, I came up with a new usability testing questionnaire to address what I had fixed in the prototypes, and also to see if there were new challenges to address.
I conducted the testing with another ten (10) sets of participants.
Key Insights/Affinity Mapping
Participants were quite pleased with the wireframe, asides the fact that there were limits to what they could explore, and it was still in low-fidelity. The following are issues that were encountered in the prototypes.
1. No explanation on the investment portfolio types, e.g. conservative, moderate and aggressive. And also descriptions on the naira and dollar mutual funds.
2. Some users didn’t really understand the differences between regular savings and emergency plans.
3. The slide-up when a first time user enters the dashboard is intrusive, as users would like to explore the features of the app first..
Introducing: High Fidelity Solution
(2 Variations)
I decided to create two variations of high-fidelity mockups for the proposed solution, one of which would follow the brand guidelines, and the other one would follow a personal style guide curated by me.
First Variation - Using Cowrywise Design Guideline
1. I included password requirements, to prevent repeated user errors and included privacy policy and terms and conditions just above the primary button. I also highlighted the password requirements with the primary color to show the user when they've met all the requirements.
2. I removed the intrusive screen and placed the elements as primary components on the homepage, this way the user either goes straight into what they downloaded the app for, or explore the apps features first.
3. I included locked and unlocked tags on regular savings and emergency plan cards respectively, so users would be able to differentiate between the locked and unlocked plan.
4. I made the FAQ's (Frequently Asked Questions) obvious on the screen, so users would be able to scan through, and learn more from them. This way, they're still in the app and within the screen leading to the task they want to achieve.
5. I placed a description on the investment type underneath the titles, so users would be able to read on them and have a good idea what they mean and what differentiates them.
Second Variation - Using Cowrywise Design Guideline
1. I placed the balance cards for savings and investment plans side by side, so it won't be easily missed.
2. Payment confirmation modal was changed to a full screen, and 3d illustrations were included in it to make it look friendlier and also properly inform the user. Rule of thumb was also applied here.
3. I also changed the modal for entering card pin for payment to a full screen for same reasons as the second screen.
4. On this screen, the user confirms to lock their funds until the maturity date, and have the option to change the maturity date.
DISCOVERY
Usability Testings Phase 3 : High-Fidelity Prototype
Though the UX of the 2nd variation seemed better, I decided to go with the first one, because it followed the set brand's guidelines. I then proceeded to testing the update with a new set of users.
KEY DISCOVERIES / AFFINITY MAPPING
1. The locked tags made the regular savings appear disabled and inaccessible.
2. Users liked how the slide-up was now incorporated inside the dashboard.
3. First-time users like to see onboarding sometimes to understand features of an app.
4. Feelings and tone communicated in products matter a lot.
5. The confirmation modals were a bit intimidating.
Perfecting The Onboarding Experience
Onboarding Screens
I created three onboarding screens with the headlines 'Save', 'Invest', and 'Plan'. I also added descriptions about these features on Cowrywise underneath the headlines, so users who were interested would read through and see the benefits.
I also included screenshots of some screens from the app in the onboarding experience, so new users could have a feel of what the UI would look like.
I replaced the locked tag on the regular savings with a modal that pops up when the user clicks on the card. The modal properly informs the user about the regular savings and how they can't withdraw until the set maturity date. I also highlight the paragraph where I tell the user to go back and proceed with the Emergency Plan if they want to be able to access their savings.
Here are some screens from the desktop flow. I had to scale them to look exactly like the mobile. I didn’t want them to appear like different products, so if this would be developed, the components for the desktop flow wouldn’t be much different from the mobile, and they would only differ in sizes.
.png)
.png)
.png)
.png)
-p-1080.png)
-p-1080.png)
.png)
.png)
%20(1).png)
.png)
