Kate Kim



UX Case Study

Programs

Adobe Photoshop
Adobe InDesign
InVision

Roles

UX / UI Design

Description

The purpose of this project was to analyze the current website, find ideal users, create prototypes, and conduct usability testing. As a result, it figured out how to improve Pennyjuice sales by meeting user needs and increasing user confidence in products and the brand.

UX / UI Design

PennyJuice

UX CASE STUDY - pennyjuice.com

01.

Analysis

THIRD-PARTY ANALYSIS

Third-party tools such as WebsiteGrader and Nibbler rated the website with 72 out of 100 and 7.7 out of 10. Notable weaknesses were page requests and page speed. The HTTP requests of the website were 165, which was five times the recommended requests 30. The page speed was recorded at 15.5 seconds, nearly three times the recommended 5 seconds. In addition, it required the use of descriptors or phrases to help with search engine optimization.

Third-party Analysis

CONCEPT MAP

Next, I created a concept map to understand the differences between approaches and design a new service for Pennyjuice.

UX CASE STUDY - Concept Map

02.

Empathy

Persona

It was important to understand the target audience correctly to improve the website. I developed a character and added a background similar to a user who is a consumer of the Pennyjuice. As a target user, she provided real experiences by adding motivation, needs and pain points.

Persona

TASK ANALYSIS

Task analysis was divided into four levels, from first-time users to membership users, and prioritized the tasks for each user type. The task analysis could better understand the problems faced by users. It also helped identify areas for process improvement and predict what users could do to reach their goals.

Task Analysis

Customer journey map

I created a customer journey map based on the ideal persona to understand the current and future states. Persona’s actions, touchpoints, thoughts, feelings, pain points and opportunities were detailed along each stage of the journey.

Journey Map

03.

Ideation

PAPER Wireframes

Based on the information gathered so far, I drew paper wireframes of the main screen needed to complete the main user task to be tested. I focused on the main task of the mobile website, from the product page to the order.

Paper Prototypes

MID-FIDELITY PROTOTYPES

In this stage, I created specific pages by adding a branded logo, colours, and images.

Mid-Fidelity Prototypes

04.

Validation

IN-VISION TESTING

I conducted InVision testing on the mid-fidelity prototypes on a mobile phone to see what needs to be improved.

In-Vision Testing
In-Vision Testing

05.

Final Design

HIGH FIDELITY PROTOTYPES

In this stage, I revised the prototypes by reflecting the feedbacks received from the InVision testing.

High-Fidelity Prototypes

Check out the High Fidelity Prototypes on InVision.
https://invis.io/E3XVXDUMGFW#/423429459_HOME

06.

Style Guide

After making the paper wireframes, I had to go through visual design. To maintain the colourful image of Pennyjuice, I chose a pastel theme colour instead of the existing strong colour.

Style Guide
Style Guide
PennyJuice - Branding
Fair dealing statement

This case study may contain copyrighted material the use of which has not been specifically authorized by the copyright owner. This case study has helped me to promote my capabilities and advance my education specifically in the area relating to user experience (UX) research and includes my personal opinions, satire, criticism and review. I believe this constitutes a ‘fair use/dealing’ of any such copyrighted material.