Responsible for: Project costing, defining proto-personas, competitor research, user stories, core user journey, wireframing, prototyping and mockups.
Forever Amano is an online retailer of premium sustainable knitwear based in the UK that was experiencing higher than average bounce rates and missed sales.
After speaking to Amano’s customers, we discovered that they found the homepage and product pages difficult to use and they offered little help in achieving their goal of finding something to buy.
Having defined the user problem that finding a product wasn’t easy, I could now align this with the needs of the business and provide a solution.
Reduce bounce rates to a more acceptable level of below 50% (from 65%), with the aim of increasing conversions by 3%.
USER PAIN POINT
Finding a suitable product isn’t easy and the homepage doesn’t assist me with my decision.
Redesign homepage and product pages to better reflect the needs of the user.
UNDERSTAND THE EXPERIENCE
A Storyboard helps to understand the key moments in the user experience from landing on the website to buying a product.
It also reveals emotions that users may be experiencing and issues that can be addressed later on.
(1) Our main character sees a Facebook ad on her phone and wants to find out more about the jumper from Amano.
(2 – 4 Bounce) Landing on the Amano product page she likes the jumper but wants to find out more about the company and its products and so navigates to the homepage.
Confused and unable to find what she needs she exits the website and goes to a competitor website where the user experience is better.
(2 – 4 Converted) The user visits Amano and loves what she sees. She finds the website easy to use, informative and serving of her needs. The positive experience sees her purchasing the product.
The storyboard gives an insight into the target audience: Women with an interest in distinctive knitwear.
However, this user group was too vague and I needed to identify different user groups from which I’d write user stories*.
Because my client didn’t have the budget for user research I used ‘proto-personas’ to define user groups.
8 Proto-personas based upon buyer behaviours:
- First time visitors.
- First time buyers.
- New subscribers.
- Hesitant buyers.
- Repeat purchaser.
- Lapsed customer.
- Impulsive buyer.
This was a long list and I didn’t have time to write user stories for each and everyone so I selected: ‘First time visitors’ and ‘Hesitant buyers‘.
Why? These users were more likely to ‘bounce’ than users who had purchased before.
*User stories help to understand user needs and how to respond to them with features that will be included in the final design.
Example user stories:
- As a first time visitor I want to view product lines so I can see the range of products available to me.
- As a first time visitor I want clothes recommendations so I can be assisted when buying online.
- As a hesitant buyer I want to be informed as to why I am paying a premium so that I can be reassured about the product’s high price.
Because user needs were not being addressed by the website, users were leaving as soon as they landed, which explained the high bounce rates.
What is making users ‘bounce’:
- Confusing shopping experience.
- Users unsure about how to use the website and have no time to learn how.
- Unable to find a product they like.
- Unsure about what products are available and in what clothes lines.
- Finding products expensive with no justification for high price.
- Do not trust website due to poor design.
- Unable to find customer reviews from happy customers.
- Lack of information on delivery charges.
- Lack of incentives for first-time customers.
- Lack of company information.
Now I knew why the website was under performing I could address the problem by providing a solution to the user needs.
Due to the budget constraints of the project I concentrated the website redesign on the homepage and product pages for desktop and mobile.
The purpose of the homepage is to drive traffic to conversion by showcasing products, building trust and creating lifetime customers.
Key tasks that users need to perform:
- Buy product.
- View product lines.
- View promotions.
- View delivery costs and return policies.
- Sign up to newsletter.
- Find out about company.
- Read user reviews.
- View product recommendations.
- View best sellers.
- Filter products.
- View product images.
- Share with friends.
Emotions that users need to feel when shopping:
- Eager to buy.
User journeys help us identify key actions within the website and what screens to focus on first.
Our core user journey actions:
- Enter website at homepage or product details page.
- From homepage proceed to product or product details page.
- Add to cart and proceed to checkout.
Following on from my sketched user journey I create wireframes to help communicate my ideas with stakeholders and developers and the structures of each page.
Wireframe prototype for core user journey (Desktop)
Wireframe prototype for core user journey (Mobile)
The homepage is the website shop front and is tailored to the needs of the user.
We inform, build trust and push users down the sales funnel whilst converting them into customers.
Callouts (1 – 9):
- Horizontal navigation. A standard placement for navigation conforms to a user’s mental models. Blue bar serves as information panel on company returns, delivery costs and promotions.
- Hero. Informs the user and provides suggestions on what to buy.
- Our best sellers. Provides helpful suggestions on what to buy for first time visitors.
- Sales banner. Sales promotions for hesitant buyers (Price sensitive)
- Shop by category. Helps users navigate to main product categories.
- Humble beginnings. Company information for first time visitors. Builds confidence and trust.
- Newsletter sign up. Necessary to reconnect with first time visitors that don’t buy. Send welcome email with 10% off first purchase to get them back.
- Product information. Promoting UVP of quality, sustainable clothing.
- Reviews. Provides social proof and engenders trust in the brand.
With over 50 knitwear products, filtering the page based on user preferences was crucial to assist the user in product selection.
Callouts (1 – 4):
- Category header. Used as a visual reference. Text description will be used to inform and for SEO.
- Sort by. Enables user to sort by price (Low to high / High to low), newest and ratings.
- Filter by. More powerful than sort filter helps narrow product search based on user preference.
- Products. High quality images, description and price. Mouse over displays 2nd image so user doesn’t have to clickthrough to see more.
The product page is the most important page on the website. It promotes the product and the company, builds trust through social proof and provides opportunities to upsell.
Callouts (1 – 6):
- Product information. Ensure that the product meets the needs of the customer, with high quality imagery to showcase the quality of the knitwear.
- Free UK delivery over £50. Provides perceived value for price sensitive and hesitant buyers.
- Tabs. Product information and care to inform the user.
- Delivery and returns – Ensures users know about delivery costs and company returns prior to checkout. (Hesitant buyers won’t get a surprise on price and abandon cart).
- Why not try? Helps buying decisions and at the same time promotes cross selling.
- Reviews. Provides social proof and fosters trust in the brand.
Once the website information architecture was completed I created prototypes to test user interaction with the website.
Starting with low fidelity wireframes I progress to high fidelity screens to establish a more realistic experience to encourage useful stakeholder feedback.
Bounce rates improved to a much more acceptable 43% in the first 6 months after the redesign. Conversions were also up by 1%.
By focusing on the user needs I was able to significantly improve the website bounce rate by 22% because users can now find what they are looking for, are no longer feeling frustrated by confusing page layouts and are assisted in their buying decisions.