Re-designing app for a financial service client
for a better and intuitive app experience for both iOS and Android platform
PROJECT OVERVIEW
Team of three
Company
Duration
1 senior UX/UI designer
2 UX/UI designers
blueegg - UX Design agency
Oct 2019 - Apr 2020
Problems
Since it's an NDA-signed project, only a high-level overview was included.
A client recently released the mobile version of its desktop-focused investment platforms.
The early version of the mobile app has been receiving negative reviews around its usability and functionalities.
The client felt a need to quickly address this issue and protect its reputation as a highly regarded financial service provider.
The client asked blueegg to improve its mobile app experience by conducting the key user group research and incorporating the feedback.
Solutions
After user research, blueegg identified that there are key user flows and frequently used functions.
Based on these findings, we helped the client to revisit the information hierarchy according to the key user flows and understand the most desirable functionalities for the users.
blueegg then designed a new mobile app for the client, reflecting the major findings during the research. The app design system also became the foundation for the client’s new mobile and tablet apps blueegg built from scratch.
My role
While I was led by the senior UX/UI designer, I was responsible for the following in the end-to-end UX/UI process:
Discovery
Research & Synthesis
Findings presentation
Wireframing& validation
UI design & development
-
Project plan
-
Existing data review
-
15 Stakeholder interviews
-
Findings workshop with the stakeholder
-
Dev team on-boarding
-
Regular project updates meetings
-
20 user interviews
-
User interview synthesis
-
Four archetypes
-
Key user flows
-
Findings workshop with the stakeholders
-
Recommendations
-
Next step
-
Priority-based UX wire-frames
-
Client design reviews & approvals
-
Dev team feedback
-
Prototype
-
Usability tests
-
Findings workshop with the stakeholders
-
Wire-frame iteration
-
Final wire-frame approvals
-
User interface design
-
Client design review & approvals
-
Dev team Q&A sessions
-
Design handover to the product and dev team
Artefacts that I created
-
Project plan Gantt chart
-
Current app sitemap spreadsheet
-
Part of competitor/comparison analysis Keynote
-
Feature tracker spreadsheet
-
Stakeholder interview planner
-
Proto-persona spreadsheet with distinctive characteristic factors
-
Findings workshop Keynote
-
User interview planner
-
Interview debrief Word documents
-
Interview transcripts
-
Insight tags on Dovetail
-
Four archetypes with goals, pain points, feeling, needs, thoughts, and actions
-
Findings presentation Keynote
-
Proposed app information architecture (Now vs. Future)
-
UX wireframes
-
Prototypes
-
Usability testing planner
-
Test findings presentation Keynote
-
Feedback tracker
-
User interface design
-
UI design progress tracker
-
Dev team questions tracker
-
Dev team sample work tracker
Tools used
-
Wrike
-
Microsoft Excel
-
Microsoft Word
-
Google Analytics
-
Slack
-
Dropbox
-
Keynote
-
Microsoft Word
-
Lookback
-
Otter.ai
-
Adobe XD
-
Pen & paper
-
Post-it-notes
-
Dovetail
-
Keynote
-
Adobe XD
-
Microsoft Word
-
Airtable
-
Zoom
-
Adobe XD
-
Airtable
-
Zoom
THE DETAILS
Since this project was under NDA, any artefacts were not able to be shared, but only a generalised design system
Discovery
blueegg reviewed the client's existing research and analytics for context, which included Google Analytics data, internal workshop results, surveys, App store & Google play review, and so forth. Then also reviewed the current app, focusing on the sitemap, design guide, functionalities, and key flows.
Based on competitor analysis and the review of the app, we created a feature tracker which captured problem areas across the app along with four levels of priorities - Must, Should, Could and Won't, which gave the client an overview of key project objectives. We also utilised this for keeping track of essential features to be built while designing.
We also conducted 15 stakeholder interviews across the different departments to better understand the business context and to allow stakeholders to contribute their expertise to be beneficial when creating a user research plan.
After all the pre-user researches, we presented the insights from the existing data, competitor analysis, feature tracker and the stakeholder interviews. We also defined proto-archetypes as a result which then the client used as a reference for recruiting the right user segments for the research.
Research & Synthesis
We then worked closely with the Customer Service team for participants recruitment and then interviewed 20 users based on the proto-archetypes. This allowed us to gain a good understanding of;
-
users' fears
-
users' pain points
-
how differently users utilise the app depending on their level of expertise
-
how their relationship with the company affects the use of the app
-
how different device usages affect the app usability
-
How the frequency of use of the app affects usability, etc.
Findings presentation
Based on the user research results, we were able to redefine four different archetypes and identify the key flows for each of them.
After we presented the key findings from the research, we started to structure the wire-frames that included crucial functionalities and flows for users whilst the client team were recruiting five users from the revised archetype for a usability testing.
In the wire-framing process, we focused most on feature prioritisation and sticking to it since we could easily implement less important features because of the client's requests which were not necessarily in the current scope or users feedback.
Wireframing& validation
Based on the approved wireframes, we prototyped the key flows using Adobe XD while the client recruited five users across the archetypes for a usability testing of the new design.
We found valuable insights from the interviews which we could have overlooked unless we had the usability testing before launch and shared it with the broader stakeholders. Also, we took the feedback on board and iterated the wireframes which deliver users' needs more precisely then got final approvals from the client.
UI design & development
Moving on to the UI phase, we built an app design system from scratch which included typography, colour palette, accessibility testing results, button and text link styles, and components.
From the very beginning of the design process, we worked closely with both Android and iOS dev team discussing any technical restrictions. Also, during the UI design phase, we had weekly meetings using Zoom calls, Airtable, and Adobe XD where we showcased new designs, asking approvals as well as any concerns from the dev team which were extremely helpful throughout the design process because it illuminated potential obstacles early on.
Update
The app has successfully launched and is now available on both iOS and Android. User's excited about the new look of the app and the app is getting positive reviews on the navigation and features added on the updated app. Currently, 4 stars out of 5 are based on 68 ratings (21st July 2021).