Anne Abu

KEM Website Upgrade - Google Design Course

This an upgraded website for KEM a cosmetic brand that is concerned with skincare and makeup for women of colour. For the purpose of the assignment I focused on specifically the skincare aspect of the website.
The typical user aged 20 - 30 possibly struggling with skin conditions like acne or dehydration. Users may also be individuals looking for affordable skincare alternatives that still work effectively.
The purpose of KEM is to be a one stop shop for all cosmetic supplies from makeup to skincare (including body) that uses science to create proactive products with their customers in mind.

THE PRODUCT

MY GOAL

I decided to redesign and upgrade the website that it is user friendly and not difficult to navigate.
My goal was to reorganise content so that it was easier to navigate for the user and place functioning buttons strategically throughout the page to encourage sales.
For the website to be concise and visually appealing.

MY ROLE

My role was lead UX designer and my responsibilities included: creating paper and digital wireframes, mock-up and prototypes, user testing and research.

THE PROBLEM

The website lacked a sense of order and structure especially in relation to the organisation of the products.
I also noticed the buttons could easily be missed as they were not prominent and were placed randomly on the pages.
There was also a lot inconsistencies with positioning of buttons, images and text.
Parts of the website was also incomplete using placeholder text instead of the correct copy and many buttons not functioning.
Steps of the user journey was also missing steps such as not having a basket pop up - it would take users straight to view basket.

Anne Abu

Sitemap:

After deciding that I would take on a combination of the Hierarchical Model and Database Model for the website I began the sitemap.

I made sure to include categories and subcategories so that the information on the homepage would be concise.

Paper Wireframe:

Once my sitemap was complete sketched 5 wireframes for the homepage. The image on the right was the final one I settled on which is composed of the best features of the 5 draft sketches.

When creating this wireframe I took into consideration the user journey and where I would like them to start. I also thought about browsing, navigation and checkout flow in mind.

Digital Wireframe:

While creating the digital wireframe I considered the entire checkflow process. I thought about how the homepage could be utilised to encourage browsing and immediate purchases. I ensured every button included would take the users to a page where they could either browse products or look at a specific product that would encourage a purchase.

I also made sure the checkout process was straightforward and easy to navigate.

Digital Wireframe:

Once I was happy with the wireframes I connected the pages together to create a low fidelity prototype. Please use the prototype below to get a feel of the navigation and interaction processes that users could possibly experience.

Mockup:

Whiles creating the mock ups I did many iterations until I got the perfect final design that I desired. This meant the mock up strayed slightly away from the original wireframe. For the mock up I included more information about about the brand on their ingredients, accolades and reviews.

I also wanted to create more shortcuts so I included a drop down menu that had categories and subcategories which would allow for advance filtering making it easier for users to find specific products.

I made similar adjustments and refinements to all the pages for the mock up so that the checkout flow process would be easy to understand and navigate.

High Fidelity Prototype:

Once I was happy with the mockups I connected the pages together to create a high fidelity prototype. Please use the prototype below to get a feel of the navigation and interaction processes that users could possibly experience on the live product.