Jeffrey Lee UI/UX Design Portfolio 2019

UI/UX Portfolio Jerey Lee

I am a creative problem solver I help brands deliver a better experience to their users

00

About Me 01

CitybusNWFB app 02

MediConCen v2.0 (Doctor App)

Contents

03

V.P.A. 04

Find Your Destination 05

Evan Horisk | Production + Creative 06

404 Error Page Design

00 | About Me

About Me Who I am

Jerey Lee UI/UX Designer in Hong Kong

jereyleedesign@hotmail.com

jldesign.co

I am a passionate UI/UX designer based in Hong Kong with a background of automotive/industrial design. I have always been fascinated by the process of creating and I chose to focus on UI/ UX design as my career because I can serve a broader range of users through my design. I help brands crafting webpages, apps design by understanding their users (their background, goals, the reason behind it) and deliver the well-designed, optimised experience to them.

What else I do I am a creative content creator when I am not working. I take photos of the street of Hong Kong, my beloved friends, hot cars and whenever I am travelling. I do concept car sketches & renderings as well as race car livery design for fun. I also love exploring both online & oine to look for interesting photogenic places, restaurants, tech gadgets and more.

01 | Citybus NWFB App

Citybus NWFB App UI/UX Redesign | Conceptual Project | iOS

jeffreyleedesign@hotmail.com

jldesign.co

01 | Citybus NWFB App

As a frequent user of the Citybus NWFB app, I saw a huge potential of improvement on this app so I decided to look online and see what others think about this app.

Overview

jereyleedesign@hotmail.com

It turns out the rating is very bad and I see the urgent need of redesigning the app and the experience. Especially the route search experience as it is what most users care about. Also, the users complained the user interface looks very old and is not user-friendly at all.

jldesign.co

01 | Citybus NWFB App

Research 1/4

Observation

The redesign was started by observing the passengers from a third person point of view

jereyleedesign@hotmail.com

jldesign.co

01 | Citybus NWFB App

Research 2/4

Review the existing experience

Next, I went through the Citybus NWFB app and reviewed the current design and experience. I also read the comments from users of both iOS and Android platforms

App Store (iOS)

Google Play Store (Android)

1.3/5

3.3/5

Summarised design related problems

“Outdated UI Design” “Not User Friendly” “Too many steps required to find the bus arrival time”

jeffreyleedesign@hotmail.com

jldesign.co

01 | Citybus NWFB App

Research 3/4

Competitive Analysis Having an understanding of the existing problems, I also looked at other apps that provide similar service to see the pros and cons of each design approaches

KMB • LWB

jereyleedesign@hotmail.com

jldesign.co

Movie

Citymapper

HKeMobility

01 | Citybus NWFB App

I surveyed 14 people aged between 16–45 and here are the main takeaways:

Research 4/4

User Survey After knowing what the current app is underperformed and what other competitors outperformed. I decided to find out more by surveying the users about how their experience is like when using the app

• • •

Users who rarely take Citybus never downloaded the app Most of them used the app to check the bus arrival time Users are complaining they are not able to check the length of the journey/estimated arrival time when they were looking for the information to get to their destination

•

They are tech-savvy and active on instant messenger and social media, they loved to be connected and updated

•

They would like to see better interface, better route search function, route information sharing and fewer ads in the next update

•

Half of the users need to transfer during their journey, which means we also need to take that into consideration when designing the point to point search

jeffreyleedesign@hotmail.com

jldesign.co

01 | Citybus NWFB App

Wireframing With the existing pain points collected from the users and comparison with other competitors. I started wireframing the design and I created the second round of design after collecting some useful feedback from the users

-

Simplification of On-Screen information Reduction of necessary buttons UI adjustment to further improve readability for middleaged people

jereyleedesign@hotmail.com

jldesign.co

First Draft

Second Draft

01 | Citybus NWFB App

Final Design

Search by Route No.

jeffreyleedesign@hotmail.com

jldesign.co

1. Tap the search bar to enter the route search page 2. Type the route number or use the filters to find the route 3. The app will use the location information to show the bus arrival time of the nearest stop 4. Tap “Stop Details” to see other buses arrival time of the same stop or nearby stops

01 | Citybus NWFB App

Final Design

Search by Location

jeffreyleedesign@hotmail.com

jldesign.co

1. Tap the location tab and tap the search bar to choose destination 2. Enter the destination 3. Select a route from the search result 4. See the journey summary and tap “Start” to start the navigation

01 | Citybus NWFB App Final Design

Search by Nearby Stops/Routes

jereyleedesign@hotmail.com

jldesign.co

1. Tap the map to set your current location 2. Check the bus arrival time or check other routes from the nearest stop 3. Check the bus arrival time and other related route information

01 | Citybus NWFB App

A better bus journey starts with a

Redesigned Route Search Experience

jereyleedesign@hotmail.com

jldesign.co

Prototype

02 | MediConCen v2.0 (Doctor App)

MediConCen v2.0 (Doctor App) UI Redesign | Client Work | iOS・Android・Web Official Website

iOS

Android

jeffreyleedesign@hotmail.com

jldesign.co

02 | MediConCen v2.0 (Doctor App)

MediConCen is a medical app of a Hong Kong-based medical startup, designed to digitalise the insurance claiming process by using Blockchain technology.

Overview

jereyleedesign@hotmail.com

The app aims to provide a one-stop service for clinics to verify clients and take payment through the app as well as providing a paperless insurance claiming solution.

jldesign.co

02 | MediConCen v2.0 (Doctor App)

Objective • Improve the overall Look & Feel to make the app more • • •

trustworthy so that it is ready to present to the investors Update the UI so that the Look & Feel align with the brand Optimise the existing user flow to improve its usability Integrate the new functions to the app

jeffreyleedesign@hotmail.com

jldesign.co

02 | MediConCen v2.0 (Doctor App)

Sitemap

jereyleedesign@hotmail.com

jldesign.co

02 | MediConCen v2.0 (Doctor App) Chinese Version

思源⿊體 (Noto Sans Traditional Chinese)

Typography

Regular & Medium English Version

Roboto

Regular & Medium

Colours jeffreyleedesign@hotmail.com

Primary #FB5C5C

jldesign.co

Secondary #FFA86A

#383A3C

#FB5C5C to #FFA86A

jeffreyleedesign@hotmail.com

02 | MediConCen v2.0 (Doctor App)

jldesign.co

Design v1.0 Home Screen

Problem

Pointed out during client’s meeting

• The existing banner size is too big • The Verify and Payment should be separated and more prominent

• The UI is missing some

v2.0 Home Screen (Current)

Improvement

• The buttons are now more

prominent and bigger to shorten user’s navigation time to the button

• Primary and Secondary colour are introduced to make look & feel more consistent

characteristic

• The overall structure can be

optimised and remove unnecessary element

• Bottom Navigation Bar was also •

added for quick switch of functions e.g. when a nurse need to switch from Verify to Payment for the next patient

02 | MediConCen v2.0 (Doctor App)

Keyflow Patient Verification Click on the screen to play the video → For PDF reader, please email me to request for a PPT, Keynote format for best experience

jeffreyleedesign@hotmail.com

jldesign.co

02 | MediConCen v2.0 (Doctor App)

Keyflow - Payment Click on the screen to play the video → For PDF reader, please email me to request for a PPT, Keynote format for best experience

jeffreyleedesign@hotmail.com

jldesign.co

jeffreyleedesign@hotmail.com

02 | MediConCen v2.0 (Doctor App)

Selection of the core screens

Login

Scan QR Code (Verify/Payment)

Patient Details

jldesign.co

jereyleedesign@hotmail.com

02 | MediConCen v2.0 (Doctor App)

Selection of the core screens

Registration 1 - Registrar Details

Registration 2 - Clinic Details

Registration 3 - Doctor Details

jldesign.co

jereyleedesign@hotmail.com

02 | MediConCen v2.0 (Doctor App)

Selection of the core screens

Transaction Details

Operation Reports

Medical Records

jldesign.co

02 | MediConCen v2.0 (Doctor App)

Cross Platform Compatibility MediConCen Official Website iOS Android

jeffreyleedesign@hotmail.com

jldesign.co

03 | V.P.A

V.P.A UI/UX Design | Conceptual Project | iOS

Invision Prototype

jeffreyleedesign@hotmail.com

jldesign.co

03 | V.P.A

Manage your business in one hand with ease

Overview

jereyleedesign@hotmail.com

The app is specifically designed for business users, an all-in-one app where they can plan & manage everything easily without switching between apps.

jldesign.co

jeffreyleedesign@hotmail.com

03 | V.P.A

jldesign.co

Top Bar: Banner which shows the time, location and current/ upcoming event

Schedule

Email

Journey Planner Will automatically save your schedule’s next location and plan it in advance, providing travel information for user’s next journey

Notes

Settings Calls

Touch ID is required to ensure user’s privacy

Maps

Calculator, camera and voice memos

jereyleedesign@hotmail.com

03 | V.P.A

Schedule

Email

Journey Planner integrated with Google Maps and Uber

jldesign.co

Notes & Voice Memos

jereyleedesign@hotmail.com

03 | V.P.A

New Notes with Voice Recording Function

Calls

Settings

Maps

jldesign.co

04 | Find Your Destination

Find Your Destination Visual DesignăƒťWeb Design | Conceptual Project | Web

jereyleedesign@hotmail.com

jldesign.co

04 | Find Your Destination

The story The reason I started this project was because one of my colleagues was always discussing with me about where to go on her next vacation.

I was inspired to started a project about an online web application designed for travel enthusiasts to find ideas about their next destination.

Overview

Goals • To provide an easy, effortless way for travel enthusiasts to find their next travel location • To provide an unbiased, neutral way for travel enthusiasts to find basic travel informations • Encourage people to explore the world

jeffreyleedesign@hotmail.com

jldesign.co

04 | Find Your Destination

Use Case

jereyleedesign@hotmail.com

jldesign.co

04 | Find Your Destination

Sitemap

jereyleedesign@hotmail.com

jldesign.co

05 | Evan Horisk | Production + Creative

jereyleedesign@hotmail.com

jldesign.co

05 | Evan Horisk | Production + Creative

Evan Horisk | Production + Creative Web Design & Build | Client Project | Web

jereyleedesign@hotmail.com

jldesign.co

05 | Evan Horisk | Production + Creative

The story Evan is a vice president of a media production company and he was looking to build a website to show what he has been doing and build an online presence as well as identity.

Overview

He also want to use this website as his work portfolio and ultimately create more business opportunities.

Goals • Build online presence • Create business opportunity • Create a stunning online portfolio

jeffreyleedesign@hotmail.com

jldesign.co

05 | Evan Horisk | Production + Creative

User

The Proposed Solution

jereyleedesign@hotmail.com

1st Impression

A compilation of Evan’s best work was shown in the first place to draw users interest

Video Wallpaper

jldesign.co

About

Work (Show Reel)

Contact

A little bit more about Evan, to show character

Where the viewers will be impressed by the amazing works from Evan

Provide a way for user to contact Evan

jereyleedesign@hotmail.com

05 | Evan Horisk | Production + Creative

The design was finalised and created using WordPress

Home Page

jldesign.co

jeffreyleedesign@hotmail.com

05 | Evan Horisk | Production + Creative

About

Work (Show Reel)

Contact

jldesign.co

05 | Evan Horisk | Production + Creative

Montserrat

Typography

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()

Open Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()

Colours jeffreyleedesign@hotmail.com

Primary #59C0A4

jldesign.co

Secondary #555555

#ffffff

05 | Evan Horisk | Production + Creative

Comment from Evan

Jeffrey helped me transfer my existing Wix website to a new Wordpress website. He handled everything and made it really easy for me! He also took come creative liberties (chose still shots as background and fonts) and I was really impressed with his selections - they were better than what I'd have chosen and it saved me hours of searching). I'd highly recommend Jeffrey for your project. http://evanhorisk.com/

jeffreyleedesign@hotmail.com

jldesign.co

06 | 404 Error Page

404 Error Page Visual Design・Web Design | Conceptual Project | Web

jeffreyleedesign@hotmail.com

jldesign.co

06 | 404 Error Page

jereyleedesign@hotmail.com

jldesign.co

Like what you see?

Get in touch ↓

jeffreyleedesign@hotmail.com

jldesign.co

linkedin.com/in/jeffreyleehk/