Otrium app re-design
I worked on the re-design of the Otrium app for iOS and Android. I made large-scale UX and UI changes, evaluated and improved user journeys, and established new design patterns. All of this helped turned the app into Otriums flagship product. The updates outlined below took the app to #1 in The Netherlands within e-commerce and helped to increase overall sales in the app from 10% to 40%.
Problem & challenge
The app was a replica of the mobile website and was missing some key native app functionalities. The app was not making use of native capabilities for iOS and Android.
The UX and UI for many sections such as sign up/sign in, search, and filtering were poor and confusing for users
Many standard app features were missing such as bottom bar navigation, along with important e-commerce features such as wishlist
There had been no testing with users and there was no historical data available to help us to understand Otriums users
Approach & method
Ran a prioritization workshop, plotting ideas, features and tasks onto a matrix to establish the user need vs feasibility
Using iOS and Android design patterns the app moved from a replica of the mobile website to using full native functionality. I established new design and usability patterns, for both iOS and Android
Improved UX and UI across the app, improving user journeys and making the app more usable
As I developed parts of the app, I grew and added to our developing design system
I created micro animations to add delight to the user experience. I created animations for adding items to the wishlist, shopping cart and from the wishlist to the shopping cart.
I set up Otriums in house user testing process, to rigorously test features (such as sign up/log in and wishlist)
I set up in-app analytics to provide greater data and insight into the performance of new features
Prioritization workshop
I kicked off the project with a workshop to prioritize all of the ideas, features and tasks the team and stakeholders felt we should tackle. I ran this workshop online with members of the team, including developers. We plotted features onto a matrix to establish what the user value vs effort required would be.
The Product Owner and I then used this session to help inform the roadmap for the year.
New UI and navigation elements added
I worked to improve the app UI and give it a much-needed visual makeover. I created new design patterns and built upon our existing design system, creating reusable elements to be used across both native platforms.
New brand cards, new bottom and top navigation bars, and new buttons were all added.
Log in and sign up flow
I redesigned the log in and sign up flow, to improve users onboarding experience. I mapped the existing flow and established all of the key pain points and potential opportunities. I simplified the flow, decreasing the number of steps for the user, as well as adding social platform log in and sign up options.
We measured app downloads vs new members as a success metric.
The number of active users on the app increased from 65k to 320k per month.
Wishlist
I designed this key feature previously missing in the app to allow users to save their favourite products and brands in one convenient place. Users were then able to easily revisit saved items and add them to their shopping cart when required.
Heart icons were added for all product and brand cards across the apps with a haptic and animation accompanying the action of adding an item to the wishlist.
The metric for success for this feature was to look at user engagement and at the number of items purchased by users using the wishlist vs those who did not, along with the average order values of both types of users.
Search and categories
I carried out a card sorting exercise to find out how some of our customers grouped key items, and used this to inform how products and items were categorised.
This section was also redesigned to be more visually led to help users identify products and categories more easily.
Brand separation
An important part of Otrium is the brands and we were faced with the challenge of making a clear distinction between regular brands and designer brands. This was done in several ways. Firstly by giving design brands a specific design treatment, for example in the A-Z list. Secondly by splitting out brands by type, and keeping designer brands separated from other brands at all touchpoints across the app.
To measure the impact of this new feature, we agreed on a success metric of measuring the number of users browsing and purchasing via this new brands section, against those going through search or category routes.
