Project overview
Flagship visual layout for retail location
Designed and implemented a customer-focused experience for Patagonia that promotes product sales and strong brand values, whilst streamlining store logistics and employee workflows.
Timelines
6 Months (including planning, ideation, design, testing and delivery)
Role
UX Designer – responsible for the overall design and prototype for testing/delivery.
Team
8 people including design, research, product manager, developer, and testing.
About Interactive Investor
Interactive Investor is a subscription-based online investment service in the United Kingdom, founded in 1995.
It provides financial information, as well as investment tools. It is the UK’s biggest flat-fee investment platform, with £59 billion of assets under administration and over 400,000 customers as of 2022.
Problem Area
The mobile app has shown great growth in usage but a user needs to already be a customer to take advantage of the features.
The business wants to promote organic growth within its customer base. However the only want to join is via the website even though the mobile app has shown considerable growth in usage.
Conducting research
Before I started this project, I looked to competitors of the brand to understand how they navigated a user through an application opening journey.
During this time as well, I created a flow to fully understand the information that was required to be entered for the user and how to do this in a way which did not overwhelm the user.
Competition analysis
There are several financial apps I looked at for the project including Wise, Chase, Monzo and Revolut. Each of these had some interesting UI (User Interface) elements that I think could work great as part of the feature.
As part of this research, I also looked at the interactions and behaviours that were included. For me, this is the touches of magic that are added to digital applications to make them stand out from the crowd. This goes above the standard patterns which follow best practices for design and accessibility, but seeing how to create an immersive branded experience.
User flow
This flow was created so I could fully understand how a user would progress through the application process.
As the user needs to enter in a lot of information in order to fully complete this process, I wanted to understand different ways that a user could do this without getting overwhelmed. Adopting this approach was quick and easy and did not slow the project down.
It was also helpful to take stakeholders through this flow so that they could understand the journey without focusing on any visuals. I talked through each stage and could make notes of any missed or important elements.
Defining the design area
How might we allow a user to open an account through the app in an efficient manner?
How might we ensure that the user doesn't become lost during the account opening journey?
How might we streamline any legal agreements that the user needs to make when opening an account?
Success metrics
Conversion percentage compared to desktop
How many customers are opening accounts on the app compared to the desktop web journey?
Drop-off (bounce) rate
How many people successfully go through the journey compared to dropping off part way through?
Constraints
Security referral
For added security, there is a referral system to check the identity of the user that could be triggered. These needs to be considered when designing the journey.
Time
Due to the high organic growth targets of the business, the need for a lean solution was clear.
Ideation and testing
Now that I had a better understanding of the problem and what the business needed, I could start to think about possible solutions to the problem. This would involve creating a number of different options through sketches and talking with peers to come to the solution that could be tested.
Wireframes
To start to visualise what the final result will look like, I mocked up some of the screens in a wireframe format. Doing this allows for the focus to be on the journey rather than the visuals. Here there is more of a mid-fidelity wireframe so to give users context when it was tested.
Results from testing
- Users preferred a linear stepped approach rather than a menu where they could choose which elements to fill in first.
- Users liked the breaking down of the Legal Documents section. They felt that this area had importance and needed time to be consumed. Also, this stopped them from feeling overwhelmed here.
- Users found the question about employment to be rather invasive and wondered why we were asking this.
UI elements
To enhance user experience in navigating the app, I incorporated country flags as visual aids when users need to input their country of birth or select the country associated with their mobile number. The use of round flag icons pays homage to the Interactive Investor logo and its current TV advert featuring robots.
To provide users with clear guidance on their progress within the app, I developed and integrated a progress stepper. While exploring various design options, including more abstract ones, user feedback favored a straightforward approach with numerical indicators. Alongside these numbers, I included checkmarks to denote completed steps and provided additional information below to indicate the current step in the process.
Installation & delivery
To make the delivery as smooth as possible, I worked closely with a number of teams in the store and head office. This ensured there was minimal effect on customers and also that it matched with head office agreements.
Project reflections
After the project had finished there was time to look at the project in a retrospective manner to fins out what went well, what didn't work and what could be improved. Here are some of the key things that need to be considered for next time.
Keeping the developers engaged from the kick off was integral to the success of the project
Understanding the in-depth technical nature of this project was a major part that needed to be considered especially after reviewing the timeline of it.
To help with this, I collaborated heavily with the development team during the blue sky phase to keep them engaged in the project but to also understand the feasibility.
This proved to be a great move from a stakeholder management perspective and also helped to make the development more ‘lean’ whilst ensuring we developed a great user experience.
Better planning of the project was needed so that it aligned with higher business goals
As there is a strong push towards organic growth in the business, this project contributed heavily to that goal.
However, the effort needed to deliver was quite high and so took longer than anticipated due to the complexity of some elements.
For this reason, it would have been better to plan in this project earlier so that there was additional contingency time where needed.