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
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
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/