Design Graduate

Kinvara Skincare website Redesign
2022
During our final year of our degree, we completed a UX Design module. This module was split into three categories, UXA1, UXA2 and UXA3. Our overall brief was to design a modern user friendly website for Kinvara Skincare. This module involved groups of 3. In our group, I took the role of project manager, I created the site flows, conducted the user tests and created the user journey maps, I then finished UX-A1 with developing the personas.
​
Full PDF of UXA-1 through to UXA-3 can be found Here
Software Used
Adobe Illustrator
Figma
Mural
.png)
UX - A1
For UX-A1, in our groups, we were asked to accumulate a document of Personas, Scenarios, Storyboards, Competitor benchmark, Site flow, Experience maps, Vision doc and Basic wireframe of our proposed redesign of Kinvara Skincares website.
We then presented our ideas to the Kinvara Design Team and our lecturer and fellow class mates.
Vision Document
To create a vision document, we looked at the branding assets supplied by Kinvara and the website, we looked through all the products and reviews, each of the pages but focusing on the “Our Difference” section as this provided majority of the thoughts, meanings and information relating to Kinvara. By doing this we were able to learn the intentions, aims and values of the company.
We also had to look through the perspective of the user while going through the website to see how they would feel, what they would think and what values they would hold when browsing. The Kinvara Skincare company is an Irish company that create natural skincare products for all skin types and provides a blog with advice in many lifestyle areas

.png)
Site Flow
We examined the existing website to see how usable it was. We planned to go through a simple exploring process and examine the hierarchy of the website, starting from the home page to the drop-down menu and then the product pages / other destination pages.
The navigation from the homepage to a product is quite straightforward as you can find products in 2-3 clicks. Kinvara organise their products by product type, and skin type but when on a product page there is a filtering bar on the left side.
Customer Journey Map
When evaluating Kinvara Skincare’s website, I asked for 3 potential users to carry out 4 different tasks on the website whilst talking aloud in order to record points of friction and ease of use.
.png)
Personas


To create a Persona, you must take into account the profile of the customers that already use the site in order to create new potential ones, this was done through investigating the customer satisfaction survey provided by Kinvara Skincare and taking into account the percentage of users in each age category, their skin type, what they look for in a website etc. Then through research completed on reviews, the potential users, needs frustrations and occupation. We also included a-typical users in order to accomodate all possible aspects of our user needs.

Storyboards
Storyboards helped us to further explore user flows and experiences and reveal other problems that we had not seen yet. One of our storyboards we looked at was Ophelia who was looking to buy organic skin care products for her sister. Before going to buy products on Kinvara, she first had to make sure they were organic. She gets confused when looking for the ‘about us’ section not finding it in either the support menu or at the bottom of the page.
This storyboard along with the user journeys led us to another change in the design by changing the ‘our difference’ section to ‘about us’ in hopes that it would not be as confusing and result in frustrating and turning away fewer customers. Another storyboard that we looked at was Regina whose user path was pretty straightforward as she found the product she was looking for on the homepage. Although this user path is basic in its journey, it helped us in deciding to leave the best seller's section on the homepage as we had contemplated removing it for a social media section.
UX - A2
In UX-A2, Working in our groups, we produced the Design Specification document. Design specifications are created at the end of the Design phase. At this time user expectations for the product are established, the global design goals are clear, and the design is ready for production. This document featured the designs of the product. The Design Specification is about presenting the designs of the product to stakeholders. It follows on from and builds from the requirements specification.
In UX-A2, in our groups, I carried out information architecture, conducting design workshops with small focus groups such as the card sorting session and A/B Testing. We shared the basic wireframes, so that as a group we could evaluate all possible designs, similarly to the medium fidelity prototypes. Lastly, I created the high fidelity prototypes and developed our presentation of our work.

Information Architecture
In order to establish information hierarchy, labelling on the website and an efficient navigation system, we conducted an open card sorting session in order to evaluate each potential users view on where they would expect each item to be placed and how they would be grouped.
A/B Testing
We conducted A/B testing by comparing Kinvara Skincare’s website to competitors. The first A/B testing we completed was Clinique’s menu bar against Kinvara’s on a mobiles interface.



Wireframes
We created basic wireframes in order to begin our design and evaluate certain aspects we would like to change. We could then test these designs as paper prototypes with users to get quick feedback on what to change before moving onto our prototyping.
User Flow
For the User flows, we looked at users buying a cleanser, searching for something based on their skin type and then users adding and viewing an item in wish list.
When a user is buying a cleanser, we started at the very start of the process which is finding Kinvara skincare cleanser from a search engine. The first two possible routes to a cleanser include the home page, and a direct product page from the search engines results.
Continuing from the home page the user can either search for a cleanser or they can go through the navigation bar and view all products or specify cleansers. Once they receive results they can view a product, add to card and enter their details to get a confirmation of purchase. From the search engine and search function of the website, the journey might be shorter.
.png)
Prototypes
From user testing, we could note any points of friction and alter them in our medium fidelity prototypes. After creating our medium fidelity prototypes, we could then continue with more in depth user testing
Conclusion
The design specification demonstrated a user-centric approach towards design, it also demonstrates research and data gathering capabilities.
The following were our deliverables:
Wireframes (including initial sketches), User flows, Information Architecture (using A/B testing, Card Sorting), Lean UX, Usability report, Interactive prototype, Site map, Team contract


.png)