Overview
Web Design
Manga Reading
Mobile Design
Bose Shopping
Dribbble Login
P2P Payment
Weather App

UI, Interaction, and Visual Design

This is an ongoing showcase of my mobile and web design work.
View Web DesignView Mobile Design

Overview

Role: UI and Visual Designer     |     Duration: Ongoing
Tools:
Sketch (wireframes, hi-fi mockups, and other visual elements such as logos and icons) and Principle (prototypes)
Skills:
UX Research, Web/Mobile UI and Interaction Design, Visual Design, Prototyping

As a Product Designer with a growth mindset, I joined Dribbble to stretch my design muscles. For me, design is not merely about how it feels and looks. It is about how it functions for users. With that in mind, I always strive to create experiences that are well-thought-out, smooth, intuitive and have an appealing look-and-feel.

Web Design

Online Manga Reading

Reading Japanese manga has been one of my biggest hobbies. This is a passion project where I designed a web-based manga reading platform for manga lovers.

Process

In this process, I sketched out the key pages and UI components. Although the UX research portion is quite light, I still put in efforts to think through the architecture, flow and overall functionality of the website.

Additional Practice Focus

In the past, I often used white or light background colors to create a clean look-and-feel, in this project, I challenged myself to use a color palette that I was not very familiar with.

Mobile Design

Bose® - Shopping Cart

I was inspired by my recent shopping experience with Bose® Official Site. I analyzed why the shopping cart UI confused me and redesigned this particular segment of the experience.

Finding

On the current My Cart page of the website, the Bose® SoundProtection™ menu, which appears as a sound product is added, will be gone forever after the user removes it. As a result, if the user changes his/her mind and wants to add it back, there is be no other way but to add the sound product once again.

Redesign

In my redesign, I wanted to give users enough flexibility by making the menu collapsible. When the user adds a protection plan, it would turn into a purchase item. Upon cancellation, it will turn into a menu again.

Dribbble - Sign-in

For my debut shot on Dribbble, I decided to redesign the login screen and add animation to create a delightful moment.

Findings

  • Dribbble's current sign-in screen does not provide options like "Sign Up" or "Forget password?" for first-time users or existing Dribbble users who might not remember their password.
  • The Dribbble official colors could be used more to express the brand identity better and make it instantly recognizable to their users.

Redesign

In my redesign, I revamped the screen layout to accommodate options for "Sign Up" and "Forget password?" When working on the visual aspect, I used the Dribbble Pink (#ea4c8) with basketball texture to strengthen the visual brand identity.

High-fidelity mockups from left to right: Splash page, different statuses of the Transaction page
Style tiles: Logo, typography, and various UI components

P2P Payment App

My UX study group and I tasked ourselves to design UIs for mobile P2P payment experience. These are some of the screens I created for our design exercise.

Feature Highlight

Reflecting upon my experiences of using payment apps (e.g. Chase QuickPay® with Zelle, Venmo, Facebook Pay), I noticed that most of these apps do not support one-to-many transactions. Therefore, I came up with this idea to allow the user to pay or request money from multiple users or a group of people created by the user.

Additional Practice Focus

Inspired by 5 Practical Exercises to Learn UI Design, I created style tiles first, including realistic font choices and text elements, appropriate color palette, and logo.

High-fidelity mockup of the homepage
Icons from left to right: "Chance of Rain", "Cloudy," "Rain," and "Sunny"

Weather App

This is my rebound shot to the weather app UIs created by other designers in a Dribbble playoff.

Process

Designing a weather app UI was much more challenging than I thought because many pieces of weather-related information, as well as the basic functionalities, need to be taken into account. To determine what information users care about most, I interviewed daily users of iOS Weather app.

Key Finding

I identified a common scenario in the interviews. As users head out or go to bed, they tend to check the Weather apps. They are most interested in information regarding whether it is going to rain today/tomorrow and temperatures. Therefore, I made sure my design would give the target population the information they are seeking.

Additional Practice Focuses

  • Using photography image was new to me, so I wanted to give it a try.
  • I also challenged myself to make icons from scratch in Sketch.