Oct 2018
The Need
A 6-year-old, agency-built app was shuttered in the previous year. AllSaints needed to cater for its loyal customers with a modern and user-friendly shopping experience.
The project
Customer interviewsUsability testingMicro-interactionsRapid prototypingRelease of MVP
The team
Olly Boon (UX Designer)Hong Wan (iOS Developer)Ali Rankine (Lead Technical Architect)Jonathan Harris-French (Product Owner)
The goal
Reintroduce AllSaints' most loyal customer base to a new mobile app, providing a modern and effortless shopping experience.
Jack's place: AllSaints HQ
Research
We started by inviting some of our loyal customers to AllSaints HQ to take part in a series of interviews.
We used the insight gained from the interviews in conjunction with our analytics data to build a “loyal customer” persona on top of our more generic personas that we already worked from.
Iteration
Design methodology
Working fast, in a siloed team meant cross-team communication was vitally important
Communicating our design process to other teams was crucial in building the AllSaints mobile app. Transparent communication fostered collaboration, ensuring alignment with project objectives. It facilitated the integration of complex e-commerce features and maintained brand consistency. We would continue with regular updates and feedback sessions to ensure the final product would meet everyone’s expectations.
Introducing our WIP UI Kit to the digital design team.
Roughly mapping our checkout journey
Journey mapping
Mapping out our core user journeys
By identifying and defining the key user journeys, such as browsing products, adding items to the cart, and completing purchases, we gained valuable insights into user needs and pain points. This process allowed us to optimise the app’s navigation and interface.
Some of the more complex journeys like the checkout process needed to be visualised and compared to our web checkout to understand what are the necessary components for our MVP.
What does a loyal customer want?
Our loyal customers wanted to shop without pop-ups and countdowns interrupting and frustrating them. A simple experience that let them discover new products and browse how they like.
Rapid prototyping
Testing and rapidly prototyping our ideas with React Native
The agility of React Native allowed us to quickly translate our design concepts into functional prototypes. By iterating and conducting usability testing, we gained valuable user feedback that informed further refinements. We identified and addressed potential pain points allowing us to optimise the core app journey, preparing us to release the final product.
V1.0 of our fully functional prototype.
Designing the final product
With a successful V1.0 prototype, we had to finalise our UI approach and prioritise our MVP features.
Finalising
feature highlight
Our customers liked the ability to be able to see the products in detail when browsing. Providing an adaptable category view allowed the user to switch easily between an overview to a detailed view.
Executing the idea
Our final product had feature parity with the AllSaints website + more
We didn’t go into this project thinking “Hey, let’s just copy the website”. The type of customer that is likely to download the app expects a native experience that feels at home on their device.
Final thoughts
Overcoming time constraints and listening to the user
Looking back, this project was extremely successful and a joy to work on. Although we had a massive constraint, our constant communication with stakeholders meant there was trust in us to pull this off. Keeping the end product simple and really focussing on our target customer meant we had a great foundation to build on.
The app reintroduced a valuable revenue stream for the business and was well received with 4.8 stars on the App store.
