DECEMBER 2017
CLIENT: adidas
ROLE: Lead UX Designer - Mobile Apps Team
DELIVERABLES: UX overview for the app's M̶V̶P̶ M♡P launch in UK & US. UX/UI team lead. IxD for the app (Flowcharts, wireframes, etc). UI & Development reviews. User testing.
DOWNLOAD iPHONE APP
DOWNLOAD ANDROID APP
DELIVERABLES: UX overview for the app's M̶V̶P̶ M♡P launch in UK & US. UX/UI team lead. IxD for the app (Flowcharts, wireframes, etc). UI & Development reviews. User testing.
DOWNLOAD iPHONE APP
DOWNLOAD ANDROID APP
in short
adidas required a main presence in the app store. So a concept for the flagship app was proposed by the internal Mobile Apps Team. The app would be a service for the true adidas fans, to put all adidas at their finger tips. Personalised content and product recommendations. Access to limited edition events and products. Seamless one touch ordering, with Apple and Android Pay integration. Full order tracking and up to the minute notifications. And direct access to the support team via live chat. The MVP or M♡P was launched in the UK in November and rolled out to the US in December 2017.
A commerce-enabled
brand experience
The adidas app was designed with 2 audiences in mind: the end user as the main focus (adidas fans), but also the different Business Units within adidas. For the user, our objective was personalisation. For the BUs, to create a highly targeted, intimate channel for communication with their true fans. Our commercial goal was clear: Repeat purchases. Thus not necessarily maximum conversion (for the later, adidas already had a well-performing channel: adidas.com).
The M♡P launched with 3 main sections: Feed, Product Catalogue & Profile. As well as a few key functionalities such as: Live chat and native checkout.
design direction
__________________________________________________________________________________________________
__________________________________________________________________________________________________
module
featured stories
Module elements adjust to content.
Module is a sort of teaser to grab user's attention.
Relevant actions to dig in deeper are only presented at the end of the story preview.
Although a user can access a story at any time, by tapping on any instance of the preview.
_________
module
ugc
This module can display an infinite number of images grabbed from social channels.
A user can browse through it as a grid, or tap on an image
to enlarge it and see more details.
_________
module
recommended products
This module has a few variations that can hold a specific number of product recommendation (from 1 up to 8)
The recommended products are based on user's interests, and ordered by preferred colors and size availability.
_________
browsing through
a runner's feed
This is an example of how the Feed would look like for a user
who's interested in Training, Yoga and Running.
_________
displaying only what's needed to gain interest
product detail screen
A clean PDP is shown at first, with the few elements needed to spark interest: a large product image, color availability and price. The rest of information can be accessed easily by scrolling, once a user's attention has been caught.
____
KEEPING A REFERENCE TO WHERE THE USER IS
product detail screen
Once the product image and name are out of view, these appear again on the title bar.
Animations are only used to create smoother transitions between views, or to call attention to changes on the screen, like the selection of a different color.
____
____
Preferred size and colors will be stored and used to display a better selection of products.
Products will be displayed in the preferred colors first, whenever these are available in the preferred sizes.
Preferred sizes are preselected, saving time during purchase.
____
animation
accessing the shopping bag
____
First time (credit card) checkout is modular and has one main action on each step.
Each action will bring up a specific modal flow to provide the required information.
Relevant data such as addresses and payment details will be stored after the first purchase.
Repeated purchases can be done with just one tap on PLACE ORDER..
____
animation between the 2 states
shopping bag & checkout
CELEBRATING YOUR PURCHASED
ORDER PLACED
user tests
I run qualitative, un-moderated, remote usability studies in order to observe the experience of users interacting with the app, browsing and buying products.
For the tests, users were requested to:
1. Buy 3 different items and pay them all at once using a credit card.
2. Explore different areas of the PDP: view more product images, find reviews, add products to bag, etc.
3. Find a couple of products they like within shoes, clothing and kids categories. And a specific item (search).
4. Checkout using fake credentials, a fake address and specific credit card details.
Users were given broad and non directive instructions, in order to observe how they complete tasks in their own terms.
BACKGROUND
Our goal was to design a simple, intuitive, and self-explanatory experience, while complying with the 2017 brand guidelines (visually stunning, highly tailored, authentic and proactive).
In response to this we made it our design goals to:
1. Make product browsing simple and elegant, providing a clear indication of where users are at all times.
2. Present products within a clean interface, displaying only what’s key to gain interest, and allowing users to dig in deeper and find more content, once their attention has been caught.
3. Streamline the checkout process, using focused interactions to bring users through the process step by step (one task at a time), while reducing the time / effort spent in general form-filling processes.
4. Polish the interface and pay special attention to micro-interactions, to convey a premium experience.
TEST GOALS
1. Our main goal is to test if we have achieved all we aimed for:
- Can people quickly get to the products they are looking for, and understand what section they are in at all times?
- Can people easily find more information (imagery, product details, ratings, etc) once they find a product they like?
- Can people go through the checkout process intuitively, while quickly understanding what’s the next step and which data is
required from them to continue?
- Do people perceive the crafted interactions of the app and the UI as a premium experience?
2. Observe the different ways users interact with the application to complete the required tasks, and gather data to help us improve.
TEST RESULTS
1. Our main goal was achieved.
All users could find the products they were looking for, quickly accessed more information, and had a clear idea of which section of the app they were in, at all times.
Users found the checkout process quick and simple, and in a few instances were delighted by the details & micro-interactions.
Most users judged the design of the app as simple, up to date, and very well thought of.
The animation language proved useful to reduce on-screen UI elements, clearing visual clutter. Users instinctively found their way in and out of fields, alerts, full screen modes, etc. using gestures, with no extra UI elements required.
2. We got good insights to improve the application, and found some bugs which were immediately addressed.
Focused interactions (displaying always one task at a time, while providing only the necessary guidance to complete it) proved to make the completion of tasks simpler, and was very well received by users. A good example is the on-focus form filling processes, which proved to be self-explanatory and non-threatening. Users perception was that they went through these flows faster than using regular forms.
A well branded UI can greatly influence the perception of the brand / app, without compromising the recognition of established patterns. The visual treatment and transitions made the users feel like they were interacting with a modern and premium brand.
user test clip
PDP image carrousel
"I love the fact that changing the color
doesn't restart the carrousel view"
______
user test clip
UPDATING SIZE WITHIN SHOPPING BAG
"Super easy to change it"
"Really like that functionality"
______
user test clip
REMOVING ITEMS FROM SHOPPING BAG
"I like this"
______
user test clip
PLACED ORDER CONFIRMATION
"This is really cute"
______
user test clip
CHECKOUT USING A CREDIT CARD
"Nice and easy" "Very very clear" "Super straight forwards"
"Probably one of the smoothest in-app checkout process
I have ever seen or used"
______
user test clip
TEST AFTER-THOUGHTS
"Seems so up to date" "So easy to use"
"Even easier to checkout, or set up your account
which are things that aren't easy to do"
______
user test clip
TEST AFTER-THOUGHTS
"I like the hompage is far better than others... It gives you something different than just throwing you things they want you to buy...It engages you a little more"
"very easy, very well laid out, very fluid"
"everything was were you expected it to be"
"I've used and tested other shopping apps...
and this is by far the easiest to use,
the best laid out, the most well thought-out"
______
