<aside> ⭐

Case Study:

My experience as the sole UI/UX designer revamping a beloved book-sharing platform (3 million users!) in order to provide readers a seamless, visually-appealing experience.

Note: This case study is essentially divided into 2 parts: the initial concept design I made for them, and the work I’ve done revamping their live platform!

</aside>

<aside>

Role: Lead UI/UX designer

</aside>

<aside>

Scope: 4 months, August 2024-December 2024 (ongoing)

</aside>

<aside>

Tools: Figma, Jira, Procreate

</aside>


Background

As a lifelong reader, I came across The StoryGraph from a friend’s recommendation and fell in love with the platform for many reasons:

  1. built by a one-woman team (super inspirational for me!)
  2. incredibly responsive to user feedback
  3. made tracking reading a FUN experience

add me @yejiji !

add me @yejiji !

image.png

😟 However…

As a regular user, I directly noticed many pain points that greatly affected the platform’s user experience.

Seeing that design improvements were a MAJOR goal in their roadmap, I decided to try my hand at fixing them.


[01] A proof-of-concept design (as a fan).

<aside> ❗

All of this section’s work—while concepts at first—ended up becoming the foundation of my understanding of the platform + its users. While not everything (RIP serif!) has made it to my current work, it’s been the crucial groundwork of my design journey with TSG!

</aside>

Research

First, I needed to understand what other users were feeling. Luckily, TSG has a HUGE online community—I scoured their subreddit, online forums, Youtube/TikTok videos, notes from the founder Nadia’s newsletter, and their roadmaps.

Given I already knew many people on the platform, I was also able to conduct 5 user interviews for further insight.

image.png

image.png

image.png

image.png

Diving Deeper and Annotating.

I still knew I had to dive deeper. Thus, I went through every page of the platform to better understand the app’s flow and make my thought process and design decisions as clear as possible for the team.

This annotation process highlighted the areas of confusion users had mentioned and made me realize just how many features were hidden away, waiting to be discovered.

This annotation process highlighted the areas of confusion users had mentioned and made me realize just how many features were hidden away, waiting to be discovered.

Mapping Flow