About Me.

Values.

Projects.

Let's Talk.

TED BAKER FASHION STORE APP

A modern e-commerce platform
for an iconic fashion brand.
#TYPOGRAPHY
#ECOMMERCE
#UX
#UIDESIGN
Scroll to discover more

Client:

TED BAKER

Platform:

Mobile: Android OS

Services:

UX Research
UI Design

Time:

May/June 2017

Project Overview

/About
The task for this project was to design a e-commerce app that will keep the same Ted Baker brand experience across web & mobile. Following the Ted Baker "No Ordinary Designer Label" brand tagline the app had to match the exclusive but modern character.

/Design Challenge

TED BAKER is one of the most successful yet conservative fashion brands. For all its global success, it never had a traditional advertising campaign, nor a mobile app for the up-coming millennials. According to a numerous research studies users are more likely to complete a purchase on a mobile app than on the mobile version of a website. One of the key challenges of this project was to test if a e-commerce app has a better conversion rate compared to a responsive website.

Research Learning Spiral

/Objectives

The first step of the research was to understand the TED BAKER visual language, what is the target market, who are the main competitors. The gathered insights had to be put together in the form of objectives, project hypothesis and the execution plan.
Understand the user behaviour about how and why would the users use a Ted Baker app
Examine the online shopper user flow and what makes the user drop the shopping process on a mobile website vs in an app
Survey users attitudes towards push notifications that encourage immediate action in the app.

/What are they going to use the app for?

The users will browse the online store or signup for a Ted Baker account to able to shop, save their sizing details for further purchases and keep up with any upcoming promotions.

/Why would they use the app instead of the mobile website?

Mobile websites are known for the loading time and bad connection interruptions. These two factors alone can deter users from completing a transaction or returning to the website. A native app will ensure a better mobile experience for the end user, leading to higher conversion rates.

/How are they going to use the app?

The user will download the app promoted on Ted Baker website and use it whenever they want to shop anything Ted Baker. The users will browse, buy or simply save items for later

Hypothesis

By providing a better user experience the Ted Baker app will ensure a higher lead conversion compared to the mobile version of the website

Competitive Analysis

The competitive analysis allowed this research to see a broader picture of what are the strong points and challenges the competition is facing.
LOUIS VUITTON APP
The app acts more like a digital  ambassador for the LOUIS VUITTON brand than as a shopping platform. The users can look for the latest collections and discover a dedicated product selection, benefit from exclusive offers, find the nearest stores.
Pros
- The app showcases the brand latest fashion collections.
- Users can signup order to collect in-store or buy online
- The app comes with a "Tutorial" explaining how to use the app
- The app promotes LOUIS VUITTON products using sets of stories in the form of photos and campaign videos
Cons
- Limited number of products listed for sale
- Not all the listed products can be bought within the app
- User has to call the store to check the availability
- The app performance is sluggish
- Lack of push notifications  to notify the user of any promotions

MASSIMO DUTTI APP

 A prime example of a mobile shopping experience executed with the user in mind. The app is divided in categories, by products, gender, current promotions and branding editorial. The app is displaying the entire catalogue of items available to purchase.
Pros
- Optimised user flow with categories relevant to the user's gender, current offers
- The user can use the highlighted search bar to look for items
- Users can scan items, find the nearest store, add to basket without login
- Contact customer service from within the app
Cons
- No "Wishlist" option for saving items for later 
- No social media integration
- Limited nr of payment methods
- Limited options in choosing regional currency, language, sizes
- User cannot unsubscribe from push notifications
RALPH LAUREN APP
Ralph Lauren app is the first take for the brand to establish itself in the mobile e-commerce. The app features the entire catalogue, divided by categories and latest promotions. The app tries to emulate the same web experience for the mobile platform.
Pros
- Extensive range of products, personalisation options + features available.
- Social media integration, users can share items they like
- Easy access to shipping and returns, customer assistance and company information
- Add to a " Wishlist" for later shopping
Cons
- The app is not fully optimised for mobile experience
- The app performs poorly with loads of negative reviews from users
- The app feels like a non-responsive mobile version of the main website
- The user flow is not intended for a mobile experience

Asking the right questions

To backup all the future decisions an online survey has been sent out asking respondents what are the attitudes towards online shopping on mobile websites versus mobile shopping apps. The survey tried to understand how  users search and buy products on a mobile device compared to a desktop experience.
How do you normally shop from your favourite brands on your smartphone?
What shoppings apps are you using on your mobile phone and how often are you using them?
Why would you choose to shop in a mobile browser or in an app instead of a normal desktop?
Can you think of any pain points from your past online or/mobile shopping experiences?
Can you give some examples when you've used your phone camera to scan QR codes to find more info?
What kind of communication messages are you subscribed to from your favourite brand?
Would you trust your app to scan your bank card or you would rather enter the details manually?
What search filters matter the most to you when you are looking for a clothing item?

Key Takeaways

To backup all the future decisions an online survey has been sent out asking respondents what are the attitudes towards online shopping on mobile websites versus mobile shopping apps.
The survey tried to understand how  users search and buy products on a mobile device compared to a desktop experience.
It's all about convenience
The respondents were in favour using an app based on the fact that they can checkout faster without any network related delays that mobile pages are well known for. Having the built-in OS native functions (GPS, push notifications, camera etc) also makes the whole shopping more bearable

A rich customer experience

Users expect engagement and customised shopping experience from their favourite brand in the form of push notifications about discounted/new items or location based marketing. The majority of the respondents are inclined to buy from an app as long as the notifications are relevant and non-intrusive.

It's not mobile website vs app

The survey respondents showed a particular interest towards a mobile app compared to the mobile website. However this does not mean that a brand has to choose between the two. The prime destination for users in finding products is still the browser search engine. Since the items listed in an app do not take part in the same search funnel it is crucial for a brand to leverage both channels.

From 1st time users to loyal customers

Downloading an app and using it is a commitment that users are willing to take if they trust the brand. This can represent an unique opportunity for the brand to showcase an user experience that even an desktop cannot offer. With mobile payment options (Apple Pay, Google Wallet) users will feel more inclined to finish a transaction.

Understanding the User

By creating personas the research could develop a sense of what the users are experiencing  in certain  scenarios.

User Flow

After doing a competitor analysis and researching how users respond to different tasks, the next step was to plan the user journeys through the app.

Low Fidelity Wireframes

With the insights gained from the surveys and with the user flow in mind wireframing was the next logical step before getting into the design phase.

Typography

FUTURA
MEDIUM
20px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
FUTURA
LIGHT
18px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890

/An iconic typeface for a quirky brand

FUTURA- the ubiquitous, classic and geometric sans-serif font chosen by the TED BAKER matches the crisp and clean character of the brand. The app has played safe by choosing the same font family for the brand consistency.

Colour Palette

/Setting the visual tone

The colour scheme chosen for the app had to match the overall brand aesthetic. The highlight colours were carefully selected to contrast with the pale nuances for a subtle yet modern appearance.
SERENADE
#FFF2EA
ROSE BUD
#F7AA97
ROMAN
#E05D66
BLACK
#000000
MINT TULIP
#C9EEF1

Final Designs

/Creating a cohesive digital look

After rambling into few different reiterations, the new digital design had to be refined enough to live up to the "No Ordinary Designer Label" brand signature.

/A refined shopping experience

With shoppers increasingly using their devices to search and browse, it was essential to leverage the best techniques in e-commerce user experience

/In-app payments made easier

With a variety of payment forms available and a secure bank card scanning in place, filling payment forms has never been easier.