top of page

Website redesign

Author website

UX Case study

Summer - 2020

Screen Shot 2021-02-27 at 5.28.58 PM.png
Introduction

Project description

Goal

My responsibilities

A group project to redesign Suzanne Collins' website to improve the overall user experience. Used the Double Diamond in this project through a four-week sprint.

Identifying key UX issues, outline potential solutions, improving the website's usability and overall user experience for end-users.

  • User Research & Analysis

  • Information Architecture

  • Wireframing & Prototyping

  • User Testing

  • Iteration

Duration

Three weeks UX

One week UI

​

THE TEAM

3X User researchers/Testers

1X UX designer

TOOLS USED

Figma

Sketch

MY ROLE

UX designer

Project lead

Clarifying the problems

Applying heuristic evaluation and competitor analysis where we measured the website's usability in independent walkthroughs and report issues. Our initial impression was that the website appeared outdated, lacked useful organization, and was missing key features. These main issues may drive away current and potential users. They would be addressed:

CTAs, consistency and content hierarchy.

Suggesting possible solutions

Regarding our user interviews, it became clear that the existing solutions lack the ability to get a proper list of the author's books. Information architecture organized better access information on the website. Planning to redesign the website will help fans and people find the most important information in terms of the author's works fast and easily, plus ensuring that the users find it enjoyable to visit.

Before / After

After user research and exposing the hypothetical solution, I worked on the IA of the website, then came up with ideations, designed sketches, wireframing and prototyping. The usability test provided us with a helping hand to reveal insights that could enhance our product usability in revision.

http://www.suzannecollinsbooks.com 

Screen Shot 2021-02-24 at 10.37.50 AM.pn
Before / After
Research & Analysis

01 RESEARCH, ANALYSIS & DEFINITION

Heuristic evaluation

Heuristic evaluation

Aesthetic

The site includes large amounts of text that users are not likely to be looking for.

​

Recognition

The site doesn’t provide enough context for much of the content and structure of the navigation.

​

Consistency

Menu links don’t look any different than the bold text on the site, so it’s not clear what’s actually clickable at first glance.

​

User control

It’s difficult for users to recognize where they are on the site, where they navigated from, and how to navigate back.

​

Screen Shot 2021-03-12 at 4.44.18 PM.png

The key insight from the user card sortings

Heuristic evaluation

Interviews and card sortings were done with nine users. Four out of nine were actively readers and curious about writers. Luckily, one of them was a writer whose opinion brought more extra value to our research to understand the problems and recognize hypothetical solutions from her insight.

screen-shot-2021-01-23-at-12-45-22-am-2.
screen-shot-2021-01-21-at-7-16-10-pm-2.p
screen-shot-2021-01-21-at-7-16-18-pm-2.p

Kattie was born

We wanted a true representation of the users. Interviews and surveys were helpful to gather the demographics and psychographics of the users. Although It would be easy to hypothesize about the users, given that most of Suzanne Collins' works fall in the teen and young fiction category. Inferential data analysis provided me with the necessary guidance for persona creation and narratives for scenarios.

Screen Shot 2021-02-13 at 2.25.27 PM.png

Understanding her pain points

We conducted interviews with three users to distinguish user's pain points while using the current website. I noticed some patterns in user's thoughts. Later I aggregated our findings in Kattie's journey map.

Screen Shot 2021-02-13 at 2.25.45 PM.png

Storyboarding

After learning about Kattie's pain points, I came up with the story to create empathy with Kattie to lead us to design a product that works for her efficiently. 

Screen Shot 2021-02-22 at 5.12.46 PM.png
Ideation

02 IDEATION

Ideation with rough sketches

Screen Shot 2021-02-22 at 3.32.38 PM.png

Heuristic evaluation

Tried to perform the brainstorming, to start by laying out the problem based on the main website of Suzanne Collins to solve and identify the objectives of a possible solution. Then, generated some alternative solutions.

Design

Sitemap

We noticed three main important content that users are looking for on an author's website regarding the interviews and card sortings.

screen-shot-2021-01-21-at-7-16-25-pm.png

User flow

I learned Kattie's needs after hearing her story. I created a user flow that we assumed would benefit us in supporting the whole user journey and covering all the relevant screens once sketching.

screen-shot-2021-01-21-at-7-17-07-pm-2.p

03 DESIGN

Potential solutions & wireframes by summarizing information and present it visually

screen-shot-2021-01-22-at-11-31-47-pm(2)

Following reconsidering user research outcomes, it was time to sketch different solutions and develop low-fi wireframes.

Turning scribbles to prototypes version 1.0

screen-shot-2021-01-22-at-11-32-00-pm-2.

To match the book's cover, we kept a dark pattern to redesign the website. However, we understood that it might develop following the usability test since we remembered that we are not the end-user.

04 EVALUATION

Evaluation

Does it really work?

Five participating individuals did usability tests. (two out of five were potentially readers, one was a writer who gave us a perspective of an author's view when we had no access to our potential client, Suzanne Collins, and finally, the one that was a painter who gave us such a good hint about our UI and the colours we had chosen.)

Usability test version 1.0

We leveraged usability tests to validate our potential solutions. Incorporating the users' feedbacks from the usability testing,  I redesigned a few elements to provide better experiences to Kattie, achieving the main tasks of the website. 

screen-shot-2021-01-21-at-7-17-18-pm-2.p

Revision - prototype version 2.0

Screen Shot 2021-02-27 at 12.42.15 PM.pn

Usability test

version 2.0

screen-shot-2021-01-24-at-6-40-12-pm-4.p

Revision - prototype version 3.0

screen-shot-2021-01-24-at-6-46-38-pm-2.p
screen-shot-2021-01-25-at-6-18-03-pm-2.p
Final version

Usability test

version 3.0

Screen Shot 2021-03-25 at 4.25.27 PM.png

Final version

Screen Shot 2021-02-27 at 5.26.50 PM.png
Screen Shot 2021-03-12 at 3.43.14 PM.png
Key takeaway
Next step

Lessons learned

We could identify several obstacles we had not apprehended in the earlier steps before the usability test throughout our design process. We learned that taking a second look at the ideas is important, as we did not notice any problems with those ideas when we first thought of them. I was able to apply user experience design thinking across the site to design a useful site for users. As a team member, I learned how constant communication with the team plays an important role.

Key takeaways

The design solutions solve several problems regarding the heuristic evaluation we initially found, so the website is significantly more usable!

Next step

I want to implement additional features in future iterations we could not include due to time constraints. Such as "about" or "events" according to user preferences and more focus on UI.

Discover more works

Bedrock AI

Bedrock AI

Financial Service

Foodie Café

Foodie Café

Fast food application

Diba

Diba

Sustainable Fashion

Suzanne Collins

Suzanne Collins

Author's Website Redesign (You are currently here)

bottom of page