Tokyo East

My Role: UX designer – leading the website design from conception to delivery.

Responsibilities: Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.

The Problem: Competitors’ websites often have cluttered designs, inefficient systems for browsing award categories or getting information, and confusing experiences overall.

The Goal: Design a website to be user-friendly by providing clear navigation and offering a fast process to apply for award nomination.

Understanding the user

The first step in the design process is to understand who I am designing for - what drives them and how can the product drive their needs.

Research Summary

I conducted user interviews which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users are busy and cannot allocate too much time to submit their work for award nomination. Users also reported that they found many award nomination websites to be overwhelming and confusing to navigate, which frustrated them. Lack of follow-up support was another pain point that the users expressed.

User Research: Pain Points

Lack of Motivation

Insufficient product information can be a block for users who need to be sure about their decision to appply for award nomination

Confusing Navigation

Users reported that some award nomination websites are difficult to navigate and the flow makes it tedious to apply for a nomination.

Time

Some designers are too busy to spend time on award nomination. They need the process to be seamless and quick.

Limited Support

Applicants that do not get updates and support following their application might feel frustrated

”My job gets so busy sometimes. I'm always short on time so I need everything I do at work to be quick and efficient.”

- Selena (User research subject)

”When I visit websites or use apps, I always pay attention to UI and can appreciate a good user experience”

- Thomas (User research subject)

Starting the design

After research it was time to get to the design. Sitemap / Paper wireframes / Digital wireframes / Low-fidelity prototype / Usability studies.

Sitemap

Difficult navigation was a primary pain point for users, so I used that knowledge to create a sitemap.

My goal here was to make strategic information architecture decisions that would improve the overall website navigation. The structure I chose was designed to make things simple and easy.

Digital Wireframes

Moving from paper wireframes to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Easy access to information on award and award categories.

Homepage is optimized for easy browsing, with use of colors and dividers to break up sections and highlight key information.

Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.

Digital Wireframes - Screen Size Variation (mobile)

Because Tokyo East users access the site on a variety of devices, I designed for additional screen sizes to make sure the site is fully responsive.

Low-Fidelity Prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of submitting a design for award nomination.

At this point, I received feedback on my designs about things like the placement of buttons and page organization. I then implemented several suggestions in places that addressed user pain points.

Usability Studies: Findings

• Some users wondered about the lack of a “create account” feature. It will be considered in future iterations.

• When on the homepage users reported feeling a bit overwhelmed by the quantity of information.

• The initial design did not include a confirmation page at the end of the main flow to indicate successful submission. Users found it confusing.

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Refining the design

Once I gathered insights from user research, I got back to my designs to iterate on earlier versions. Mockups / High-fidelity prototype /Accessibility.

Based on the insights from the usability study, I made changes to improve the homepage layout for optimal browsing. Using color, dividers and layout, I presented the information in a more structured and clearer manner.

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for browsing and ordering items. I also met user needs for more cues to easily move from one screen to another.

Mockups

Mobile Mockups

Thank You!

Hope you enjoyed reviewing my work! If you would like to see more or get in touch, fill in the form below and I will get back to you as soon as possible.