UX/UI Design & Research Project
| Website Revamp for Ashley & Co.
The final project for my UX/UI part-time course at Temasek Polytechnic. I learned HTML and CSS and get to code the responsive website according to my design! I have lots of fun working on this project!
![AC_WU_SU_PP.jpeg](https://static.wixstatic.com/media/08f2a1_8d9bed3db3344d089a631089399430f9~mv2.jpeg/v1/crop/x_82,y_0,w_2196,h_2296/fill/w_384,h_400,al_c,q_80,usm_1.20_1.00_0.01,enc_auto/AC_WU_SU_PP.jpeg)
Research
Define
Ideation
Design
-
Project Background
-
Problem Definition
-
Product & Market Research
-
Survey Analysis
-
User Persona
-
User Journey
-
Idea Developments
-
Information Architecture
-
Site Map
-
Revised User Journey
-
Wireframe
-
High Fidelity Prototype - Web and Mobile
Project Background
Research
Ashley & Co is a twelve year old brand based in Auckland, New Zealand and now extends its reach to Singapore, Australia, Japan, Taiwan and Scandinavia. They pride themselves as a modern scent company where they offer a selection of 8 discerningly formulated scents running through 9 different categories including, hand & body care products, candles, diffusers and other personal care products, with sustainability as a key pillar in their brand ethos.
They first explored Singapore market back in 2015, with the business strategy that focuses on partnering with hospitality industries including cafes, restaurants, boutique hotels and homeware stores for example Plain Vanilla Bakery and Crate and Barrel, just to name a few. They have then worked with a distributor Le Lac in Singapore and built an online store to grow their online presence.
New Zealand
Country of Origin
DTC Brand - Body Care
Industry
Scents. Sustainability
Brand's Core
5 years
in Singapore Market
![Untitled-1.jpeg](https://static.wixstatic.com/media/08f2a1_e38f1f874d7046b18030bf9ac9ff2548~mv2.jpeg/v1/crop/x_0,y_149,w_1280,h_702/fill/w_729,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Untitled-1.jpeg)
The Key Problems
Research
![Homepage1.png](https://static.wixstatic.com/media/08f2a1_0eb8d0e4d7ad497dbc03b66518febd7e~mv2.png/v1/fill/w_114,h_272,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Homepage1.png)
![Menu.png](https://static.wixstatic.com/media/08f2a1_7902452ed568495a97d42541e432cfb4~mv2.png/v1/crop/x_765,y_150,w_1352,h_1450/fill/w_150,h_161,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Menu.png)
Homepage & About Page
-
A very lengthy Homepage
-
Doesn’t convey the brand message and story to justify the products prices
-
Menu navigation is almost unusable due to poor naming
![Screenshot 2021-05-03 at 22.43.26.png](https://static.wixstatic.com/media/08f2a1_68e78d9858b246e3a8a20ce4ae75ff5e~mv2.png/v1/fill/w_280,h_224,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screenshot%202021-05-03%20at%2022_43_26.png)
Product Page
-
No detailed product photos
-
Product information display can be further improved
-
Mixed of font types and sizes is confusing user
![About Us.png](https://static.wixstatic.com/media/08f2a1_bcce6ff625ec432bbde08d568eea3583~mv2.png/v1/fill/w_93,h_272,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/About%20Us.png)
![screencapture-ashleyandco-sg-pages-where](https://static.wixstatic.com/media/08f2a1_fddb7f62b13c4e599ae4ff1e1164eb20~mv2.png/v1/crop/x_221,y_0,w_2102,h_3768/fill/w_152,h_272,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/screencapture-ashleyandco-sg-pages-where.png)
About Page & Stockists
-
Clutter and unsorted content on About Page
-
Missing photos and map link on Stockists Page
-
Overall web pages look unfinished
![Homepage1.png](https://static.wixstatic.com/media/08f2a1_0eb8d0e4d7ad497dbc03b66518febd7e~mv2.png/v1/fill/w_114,h_270,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Homepage1.png)
Key Competitors
Research
The key competitors of Ashley & Co would be brands with sustainability focus while having a strong brand identity, usually not stock in pharmacy or beauty chain like Watson, Guardian or Sephora. Brands that have a strong online presence, online store is well designed for ease of use or having offline stores locally in Singapore.
Another angle is to look at brands that are originally from New Zealand or Australia and known for their eco-friendly approach in ingredients and packaging, preferably direct-to-consumer (DTC) brand that focuses on their digital presence.
![Screenshot 2021-04-27 at 00.31.42.png](https://static.wixstatic.com/media/08f2a1_c98523775dea4e1d865032f84f679756~mv2.png/v1/crop/x_104,y_0,w_693,h_903/fill/w_201,h_262,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screenshot%202021-04-27%20at%2000_31_42.png)
![Screen-Shot-2019-06-03-at-8.01.43-am.jpe](https://static.wixstatic.com/media/08f2a1_913069036f4d46bfbe079d377d3f99b4~mv2.jpeg/v1/crop/x_0,y_387,w_1294,h_876/fill/w_493,h_334,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Screen-Shot-2019-06-03-at-8_01_43-am.jpeg)
![au1802-3504_canberra_centre_1240x696px.j](https://static.wixstatic.com/media/08f2a1_193bb452115f4db0a8ed59d73acfa05c~mv2.jpeg/v1/crop/x_0,y_10,w_635,h_395/fill/w_627,h_390,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/au1802-3504_canberra_centre_1240x696px_j.jpeg)
Aesop
A global skin care brand originally founded in Australia. Well known for their branding and offline store design. They have strong presence on both offline and online platforms in Singapore.
Ms Brown
Similar business size as Ashley & Co and solely focus on digital platform, based in Australia. Using all-natural and certified organic ingredients, their products are cruelty free and vegan. Apart from body care products they are also known for their garment care products.
Sans Ceuticals
Based in New Zealand, a brand that is known for the natural ingredients in their multifunctional products. They provide personal prescription body care products. They also have quite a strong following on digital platforms.
Product Viability
Scent is Ashley & Co’s key product strength from the very beginning and how the brand stands out from the others, offering 8 discerningly formulated scents across 9 different product categories.
Survey Analysis -
Some numbers & findings
Research
The survey focuses on respondents’ preferences of online or offline purchase for a new body care brand, the key factors of making them doing so - to discover how I can revamp Ashley & Co’s website for a better online shopping experience and to garner customer trust for this new brand.
30% Ingredients
29% Functions
30% Scent/Fragrant
11 % Others
The most important factor for user in purchasing bodycare products.
50% offline
40% online
10% for both
Body care products shopping behaviour.
Over 70%
of respondents are ok to make their first purchase online from a new brand, but half of them prefer to try a sample before.
Over 80%
of respondents think customer reviews on the website encourages their first purchase
44%
of respondents are consciously purchasing environmental friendly products
41%
of them started to look into purchasing environmental friendly products
Customer Reviews
Ease of purchasing
Promotions/Price
Top 3 favourite online shopping functions.
User Persona
Research
![User-03.png](https://static.wixstatic.com/media/08f2a1_d1d04aed6ac24e3496d062468eaa1d84~mv2.png/v1/fill/w_200,h_200,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/User-03.png)
Michelle G.
Age 25 - 34
Sales Team Lead of Digital Marketing
SG$65k - SG$75k per annum
Master’s Degree
Single
Bio
Michelle leads the sale team in a digital marketing company. She is very outgoing and enjoys social networking. While she loves to shop in the store, she prefers to get her body care products online as they are quite heavy.
Goals & Needs
-
She loves to compare the products on different platforms and websites to get the best deal or free delivery
-
Open to try new brands if she saw targeted ads or when the brand was recommended by friends
-
She doesn't mind to buy a small bottle or sample set just to try out the products first from a new brand
-
For new brand, ingredient is quite important for her and natural ingredients appeal to her more
Challenges
-
If there’s no promotion, she sometimes has to purchase other things to be eligible for free delivery and end up spending more
-
For new brand it’s quite hard to get the scent or try the products
-
She likes the recommendations under product page but sometimes it doesn't show the products she fancies
"A good scent will totally brightens my day."
User Journey
Research
Touchpoint
Home Page
Menu
Product Page
Cart
Payment
Actions
Keeps scrolling on home page. User spent almost 20 seconds to find the product.
Menu function was completely neglected.
Click Add to Cart. Button is prominent and easy to find.
Click Check Out. Button is prominent.
Fill in personal details for shipping.
Pain Points
No filter or product category to help user to find the products. No ‘Back To Top’ function.
‘Stores’ is confusing so user didn’t click on it.
There’s no detailed ingredients or functions listed.
None
None
😕
😕
😕
😐
😐
Opportunities
Better categorisation. To improve UI to catch customers attention. Add ‘Back To Top’ icon if needed.
Put Menu in a more prominent position with better naming. Add in search function.
Better information sorting for product details. Add in support online and reviews.
Delivery terms or promotions can be on notification bar. Consider to add in lower value products in the same scent at the cart page.
Set the font type, size for header, body text and align all design elements so it’s visually pleasing and consistent with other pages.
Idea Developments
Ideation
Bring out brand's core value: 'A modern scent company' and 'Sustainability'
Important! Rework menu navigation, naming and product categorisation
Key: 'the ease of choosing the products once you find the scent you love'.
> Scent finder?
Product introduction. Full product ingredients, scent notes and description highlights.
Online to offline or vice versa. To create a more seamless online to offline function
Try a sample function?
Customer Reviews
Related product suggestion on cart or product page
Store finder on product page. The option to pick up products from offline store
![Ashley_&_Co.jpg](https://static.wixstatic.com/media/08f2a1_85f31ae4282549fd9d3ae28d96f57810~mv2.jpg/v1/crop/x_0,y_18,w_2000,h_1118/fill/w_980,h_548,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Ashley_%26_Co.jpg)
Information Architecture
Ideation
![Site Map-13.jpg](https://static.wixstatic.com/media/08f2a1_b71e4a414dfb4a1a8b49314c1225c7c1~mv2.jpg/v1/fill/w_976,h_485,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Site%20Map-13.jpg)
Wireframe
Design
Wireframing has absolutely helped me quickly ideate and build the basic structure based on the new information architecture and test out design ideas that would provide user a better experience.
Key issues I've tackled:
-
Menu navigation
-
User friendly naming and categorisation
-
Homepage design that brings the brand's core value and aesthetic
-
Organised and easy to navigate product and scent category page
-
'Get A Sample' and 'Find A Store' function to create online to offline experience
![Wireframe-09.jpg](https://static.wixstatic.com/media/08f2a1_a651a92e4dcd4d149419df75ece733cd~mv2.jpg/v1/fill/w_742,h_411,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Wireframe-09.jpg)
Product Page
High Fidelity Prototype!
Design
![Homepage_Desktop.png](https://static.wixstatic.com/media/08f2a1_3a9f8b29608c488191f621931941b009~mv2.png/v1/fill/w_643,h_2483,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Homepage_Desktop.png)
![Ashley & Co_Portfolio-29.png](https://static.wixstatic.com/media/08f2a1_25ae0770b0db4314a23d8f9f0cdd96f0~mv2.png/v1/fill/w_980,h_1216,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Ashley%20%26%20Co_Portfolio-29.png)
![Ashley & Co_Portfolio-28.png](https://static.wixstatic.com/media/08f2a1_17cbeddd7e6a4ce997e1786b08aa86da~mv2.png/v1/fill/w_964,h_1216,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Ashley%20%26%20Co_Portfolio-28.png)
![](https://static.wixstatic.com/media/08f2a1_5db4f40edf6c4a9eb5be90b8bd104128~mv2.png/v1/crop/x_64,y_86,w_1412,h_3233/fill/w_724,h_1658,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/08f2a1_5db4f40edf6c4a9eb5be90b8bd104128~mv2.png)
Thank you for watching!
This project is solely for education purpose only. I don't own any brand's information, logo and photos.