Intro
The Nutmeg App allows customers to build and manage their diversified portfolios, using technology to keep charges low and transparently show where they are invested.
Challenge
Due to a major rebranding happening at the company we were asked to refresh the app screens, to make them user-friendly with an elegant brand identity to match.
Solution
We would redesign the app screens to provide meaningful information with a clean interface. This would help establish trust and confidence and increase consistency with the brand.
1. User Flow
Before starting any research, we built a user flow for the current onboarding process. The goal was to highlight redundancies in the current workflow and target opportunities for improvements. First step was to review every aspect of the product and try to list all the components, create a gap analysis, audit the exiting elements and then group them by their usage and measure the frequency of their appearance. This allowed for a plan to be built to prioritise the workflow.
User flow
2. User Research
The next step was to do user research to gain a better understanding of how the current users felt about the app. A series of user interviews were conducted with 20 partcipants. Affinity mapping was used to find common themes in the data that was collected. As a result of this activity, we were able to discover several major trends that needed to be addressed.
Group brainstorming sessions were held to dig deeper into the user research
Some of the major pain points that were identified included:
The onboarding process took far too long to do.
There was too much reading required on some of the screens and alot of scrolling.
Some struggled to find the information they were looking for.
Too many financial jargons and terms were used, which added to the confusion.
Many were not very keen on the design.
3. Competitor Analysis
To gain inspiration and to identify best practices for the app redesign, we conducted a competitor analysis. We began by looking at the apps of several of Nutmeg's competitors including MoneyFarm, Wealthify, Wealthfront and Hargreaves Lansdown.
One common feature identified across these apps was the placement of the menu and charts. This was an important design pattern to consider in order to make it easier and more efficient for users to get involved with our app.
It was also clear that most of the competitors had bland colour palettes and uninviting experiences. We made a conscious effort to keep things simple, both for the process and interaction. Minimalism in design is not always about flat colour palettes and non-skeuomorphic buttons, it's also about how the information is structured and the cognitive load required to use the given features.
Competitor app screens
4. Design System
From here we wanted to establish rules and principles for the design system. We established our core atomic expressions: grid, colour, typography and icons.
The grid
Colour palette
Typography
5. Wireframing
Before starting work on the high-fidelity wireframes some basic sketches of several of the screens were done. The research data collected previously were used to inform the design process.
Wireframe sketch
Using the base visual language to mock up the wireframes we started to create high-fidelity screens. We wanted to get the designs right by employing an iterative process of creating embraceable change and adopting a process of co-creation with the customers.
High-fidelity wireframes were created in Sketch
6. Final Design
All of the appropriate learnings about how the users interact with Nutmeg were successfully fed into both the iOS and android app.
Final app screens
7. Conclusion
This project was definitely a challenge but a very rewarding one. Three weeks was not enough time to redesign all the screens, however, we believe that we tackled the project successfully. The prototype met the needs of the user by being simple, trustworthy, informative, and intuitive.
The following improvements were made:
Decluttered search and item display screens, with more white space and item distinction.
More categorization options were made available for better search results.
Hierarchy in text and other screen assets were reworked for better eye focus.
Enabled multiple item selections for more efficient search.
Reduced steps in searching for products or services.
