Some UI practice and my design rationales

010 Weather

Principle driver panel practice.

Slide to view weather from different location and check out the details like temperature, precipitation, and wind speed. 

Our system gives you suggestion of the day, too. Shall we picnic?

009 Pop out / Overlay

Made with Sketch and Principle. Basic animation practice.

It's a water break reminder that interrupt your work on laptop and ask you to drink water, just like what your mom would do - 

: Child! Stop staring at the laptop, you need A WATER BREAK!

: Fine mom...


008 Music Player

Two different concepts of music player design:

  • On the left, I tried to integrate multiple gestures into the interface to replace the use of icons. Users can easily drag, slide, and swipe to change time, volume, and songs. 
  • On the right, it's a more traditional design practice, I just love Capital Cities so much.

007 User Profile

A Codecademy learner profile. Good job jeff, look at all the badges that you got from the courses. Some redesign rationales:

  • I added a little gradience to the flat design so that the user image part could stand out a little bit
  • Having a quote in the profile to motivate or inspire user

006 404 page

The error page of the website of Texas Department of Public Safety.

  • Using the metaphor of stop sign and dead end for 404
  • 404 experience is not always joyful, user would like to get out of the error as soon as possible. Given a solution, for example a search bar, when confronting a 404 page would help the situation

005 Landing page

A landing page of Daily UI Challenge, with a make-up quote, and a call to action sign up field. B&W makes the sign up button more catchy.

004 E-Commerce

Redesign IKEA website. Adding Christmas scenario and rearranging the layout of the online shop catalog:

  • Identified what elements are the most important in online shopping experience - image, price, and ratings
  • Practiced redesigning IKEA logo with the concept of price tag, given that IKEA products are decent priced
  • Anyone wanna guess what does the Santa Hats mean?

003 Calculator

It's a roommate calculator that can help splitting the check so that nobody will ever owe Ross money. Just simply select the items that Joey needs to pay, friends forever.

  • You scan the receipt, our app read the text with OCR tech
  • Select the items and Joey's head
  • Done!

002 Checkout

Pinkoi has been my favorite place to buy birthday gift for my friends. Two important elements in checkout page:

  • Summary of the purchased items, including the shipping cost
  • Credit card information fields and verification


001 Sign Up

My first UI Challenge attempt, using Adobe Illustrator.

A series of Pocket redesign.
Tabs design provided different ways to login/sign up.


Let me know which one you enjoy and which one you do not like!