Karatise Case Study
My Role
UX Design (Researches, User flows and Sitemap)
UI Design (App Interface)
Prototyping & Testing (Flow and interactions)
Tools
Sketch
Principle
Illustrator
Photoshop
Problem and Context
Karatise is a sub-brand of Karat Jewelry that has experience over 80 years in a jewelry business in Thailand. It is a retailer providing an excellent range of products made of fine gems and jewelry.
I was hired to redesign Karatise Website, which had been there for more than 20 years. My client explained his issues with the look and user usability of the current website. It looked virtually outdated especially when comparing to its competitors. The information architecture didn’t work well and often led people to confusion when they’re using the site. While keeping some of brand elements, he wanted to make it more modern and stylist, which would suit with the new brand image. Another goal was improving user usability to help them navigate through the site and complete their task easier, which should end up leading them to the purchase step.
Project Goals
Redesign the website to better suit with the new brand image
Improve the site usability
Increase offline store sales
Research
The project started with a brief explanation about the brand aspects and existing issues of the site. The first thing was to find a research method that would allow me to fully understand users’ problems and needs to come up with a design solution Then, I conducted the competitive analysis to find out about features and functions that must be included for a jewellery retailer website.
User Interviews
The target users are Thai people aged between 25-45. With the help of my clients, I interviewed 5 participants who were previous company customers and 5 participants who could be potential buyers.
Insights
Old Website Interface
User perceptions towards the old website design
After I had a clear picture of users' perception, needs and behaviour, I came up with ideas about the app's layout, its main features and how different users would compete the task. Next, I came up with a sitemap, user flow and wireframe.
User Flow
Sitemap
SOLUTIONS
Displays only necessary information on each page to avoid information redundancy
Organises contents systematically to create strong visual hierarchy
Improves the search feature with product filter and makes it more visible
Makes the virtual look perfectly fits with the brand image
Includes sufficient amount of high-quality product photos and a spinning 360 degree product view feature
Replaces the old navigation panel that’s small and hard to use with a big drop down pane
Add saved list to prevent users from having too many tabs open or accidentally closing any
User Interface
Simple, Clean and Glamorous
The site only displays necessary information on each page. The contents were organised in a much more systematical way to helps a user to navigate through the site and complete each action easier. Moreover, typography and colour choices were made based on the brand image.
Filter & Search
When it comes to luxury goods like jewelries, people usually do some online researches before going to an offline store. Therefore, the step of searching for the right product is considered extremely crucial. The more time and afford users spend on their searching, the more they would give up on the action. Filter feature was added to the site to make the search become easier and faster.
Product View
People do online researches before purchasing products to get information about their attributions and other details. The site now includes large and high quality product photos in a sufficient amount .Moreover, a spinning 360 degree product view feature allows users to digitally preview the product as if they were holding it and inspecting it.
Navigation
The old navigation panel was replaced with a drop down pane to make it easier for users to complete their tasks. The essential functions such as contact, search, account and saved list were put on the top which is the most visible area.
Saved List
Instead of having too many tabs on and a hard time preventing themselves from accidentally close any of them, they can use this feature to save any items that they are interested. Users can simply click on the heart on the product image then it will be kept in the saved list.
Colors
The main purple colours come from the company logo and the client prefer to use that as the main colour in the site.
Typography
Cormorant Garamond and Avenir are chosen to be used in the application. While using Cormorant Garamond to create luxury, Avenir was used to give simple and modern look.