## Overview

As a user and as a designer, I feel like there is something wrong with regard to not giving feedback when saving a certain story to Library list on Medium web.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHT9N4Dis0XU3B4PkVKNGRWVd2mB2%2FEdF5fblqAecmbivjP7s0%2Ff766a887-51f2-4a8d-8288-f5ce2c00bccb.png?alt=media&token=a13aa212-6b25-44dd-b3d7-2f74d17dc958","id":"f766a887-51f2-4a8d-8288-f5ce2c00bccb","width":1920,"height":1080,"filename":"image.png","type":"image/png","caption":"The original Medium’s Save to Library Feature for Web","border":false}]}
```

---

So, I try to put into practice the hypotheses I've analyzed on my own.

I redesigned Medium's homepage  and created interactive components from scratch to make a realistic prototype in Figma.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHT9N4Dis0XU3B4PkVKNGRWVd2mB2%2FEdF5fblqAecmbivjP7s0%2Fdfc62c86-733b-4d75-bc20-151c6b7bc6e9.png?alt=media&token=61073a92-43f8-420c-8415-2b867b913137","id":"dfc62c86-733b-4d75-bc20-151c6b7bc6e9","width":1920,"height":1015,"filename":"image.png","type":"image/png","caption":"My design crafts in Figma","border":false}]}
```

---

## Analyzing Medium's Save to Library Design

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHT9N4Dis0XU3B4PkVKNGRWVd2mB2%2FEdF5fblqAecmbivjP7s0%2Fe32fe0b5-b19c-4312-8b99-72ef3c346426.png?alt=media&token=fd912f48-1d6a-468f-a325-09f5eab492f8","id":"e32fe0b5-b19c-4312-8b99-72ef3c346426","width":1920,"height":1080,"filename":"image.png","type":"image/png","caption":"The original Medium’s Save to Library Feature for Web","border":false}]}
```

In Medium's approach, when a user clicks the 'Add to Library' icon, a popover appears, allowing the user to select where they want to save the story. The story is then automatically saved in the Library. That's all.

I'm curious about Medium's Save to Library design and how they approach creating an efficient and user-friendly experience.

And I think they want to make the user flow for the 'Save to Library' feature just one or two steps for increased efficiency.

But there is no descriptive feedback or response to the user's input, making it especially confusing for first-time users to determine whether it saved or not.

---

## Making Design Better

Here is my approach to achieving a better design, with a focus on leveraging and enhancing Medium's existing UI pattern.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHT9N4Dis0XU3B4PkVKNGRWVd2mB2%2FEdF5fblqAecmbivjP7s0%2F471a4890-6653-458d-a7ea-3025cbfc5182.png?alt=media&token=f173de34-958c-418f-abed-f774ad806fcd","id":"471a4890-6653-458d-a7ea-3025cbfc5182","width":2048,"height":1338,"filename":"image.png","type":"image/png","caption":"Adding 'Save to' title and 'Done' call-to-action (CTA) in a popover element.","border":false}]}
```

Adding a 'Save to' title allows users to easily indicate where stories are saved, enhancing user perception as well.

I also added the confirm CTA for a specific reason.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHT9N4Dis0XU3B4PkVKNGRWVd2mB2%2FEdF5fblqAecmbivjP7s0%2F0c5ccb05-e018-4264-8f62-d13f792c811c.png?alt=media&token=028aace6-5bec-40c4-b2f9-345f80014599","id":"0c5ccb05-e018-4264-8f62-d13f792c811c","width":5088,"height":3324,"filename":"image.png","type":"image/png","caption":"When the user clicks the 'Done' CTA, a toast message will appear to provide response feedback.","border":false}]}
```

Displaying a toast message enables users to quickly determine whether their action was successful or not.

If there is no confirm CTA, users will receive a toast message every time they check or uncheck the save list, which can be annoying. That's why I added the confirm CTA.

---

## Conclusion

This is just a small redesign project based on the existing UI pattern. I redesigned it from scratch to align with Medium's homepage UI.

Throughout the process, I gained valuable insights into Medium's spacing units, typography scale, and auto-layout best practices. And I believe the result reflects a better design solution.

Here is the prototype link for testing: [Prototype](https://www.figma.com/proto/oVafsr397UhK2lCwxCf62C/Medium---Save-to-Library?page-id=0:1&type=design&node-id=26-2040&viewport=1027,-572,0.54&t=LZSX5x0yDbihNvus-1&scaling=min-zoom&starting-point-node-id=26:2040)

User task: Save the first story to the Library.

Improving Medium’s Save to Library Feature for Web

Visual & UI Designer

User Experience: The Beginner’s Guide

Enterprise Design Thinking Practitioner

I designed SarPhat mobile application (version 3.0.1) as a UX/UI designer, aiming for an intuitive and seamless user experience, as well as a clean and minimal design.

My responsibilities included secondary research, user flow, wireframing, prototyping, interaction design, and handing off the design.

SarPhat Mobile App (version 3.0.1)

I designed the SarPhat web app (version 1.0.3) for Nexcode, in collaboration with a cross-functional team of product owner, PM, and engineers, ensuring alignment with user and business needs.

My responsibilities included wireframing, prototyping, interaction design, responsive design, and facilitating design handoff.

SarPhat Web App (version 1.0.3)

AirBurma Web for Travel Agents

SarPhat is a premium quality knowledge platform where helping young people access high-quality content that supports their personal development goals by offering localized reading opportunities and gathering with highly qualified authors in Myanmar.

I redesigned SarPhat's brand identity as a solo designer, aiming for a modern, minimal, and authentic design.

My responsibilities included branding, brand guideline and visual direction.

SarPhat Visual Identity

Air Burma Public Web

Currency Exchange Icons

Vector Illustrations

My Icons

The Journey to DevOps Book Cover Design

Volunteer UI Designer

* Collaborated with a CEO to create a visual identity for DigitalBase, aiming to establish a trustworthy brand. 

* Designed over 5 commercial websites that are mobile and web responsive, ensuring they align with client and business needs.

* Managed a team of 2 UX/UI design interns for DigitalBase and provided mentorship as a senior designer. 

UX/UI Designer

* Designed the Nexcode brand identity, collaborated on hi-fidelity prototypes with the Founder, PM, and engineers, including logo design and website.

* Created the SarPhat brand guideline as a product of Nexcode, including the design of a logo, color palette, typography, and visual direction.

* Designed the SarPhat mobile app and web app (v3.0.1) for Nexcode, released it to the market, and met the needs of 1000+ users, collaborating with a cross-functional team.

* Designed the Panora mobile app for Nexcode, in collaboration with a cross-functional team of product owner, PM, and engineers, ensuring alignment with user and business needs.

* Managed a team of 2 UX/UI design interns for Nexcode and provided mentorship as a Senior Designer.

Novem Pai

Projects

Side Projects

Work Experience

Volunteering

Education

Certifications

Contact