Jeffrey Kin Wang Lee UI Design Portfolio
Crafting Visual & Digital Experience
Contents. 01 - Evan Horisk | Production + Creative
02 - Alvin Kean Wong Photography
03 - Find Your Destination
04 - V.P.A
05 - Drink Tastefully
06 - Portfolio/ Muti-purpose Horizontal Scrolling Web Design
07 - The Body Shop Rebranding
08 - 404 Error Page Design
01
Evan Horisk | Production + Creative Freelance Project http://evanhorisk.com/
Personal Website Design & Build for Vice President of Tane Digital Video Final feedback from Evan: Kin 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 Kin for your project.
Home Page (Video Wallpaper) The home page showcased Evan’s best video production works
About
Work (Show Reel)
Contact
02
Alvain Kean Wong Photography Freelance Project http://alvinkeanwong.com/
Portfolio Website Design & Build for New York Based Photographer
Landing Page
Customised CSS to customise the size and position of each album cover as if they are pinned
Album Page
Minimal apporaches to the website design in order to minimise the visual interference to readers
03
05 - Find Your Destination
People love traveling, however, they often run out of ideas for their next destination. In order to accommodate this group of travelers, I have come up with an idea to design a web application which helps them to find their next destination.
Home Page Allow users to set the requirement for the search
Search Result Page Destination Page Top Slider: 5 Top Match locations Reveal relevant informations of the Bottom: other results destination and links to travel websites to book hotel and flight
Blog Page Location submition Page Edited by editorial team giving users Allow users to suggest new some inspiration for their next destination and will be shown destination on the result page when approved by editorial team
Contact Page - Email -Contact Form - Phone Number - Social Links
04
06 - V.P.A.
V.P.A. is an Virtual Personal Assistant app, managing everything from scheduling to company management. V.P.A. Prototype https://invis.io/BEBC1JSKR
Where you can handle everything about your business. The app is specifically designed for business users, an all-in-one app where they can plan & manage everything easily without switching between different apps.
Main Screen
Touch ID is required to ensure the safety of user’s personal information
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
Call Calculator, camera and voice memos
Settings Maps
Schedule
Journey Planner integrated with Google Maps and Uber
Notes & Voice Memos
New Notes with Voice Recording Function
Call
Maps
Settings
05
04 - Drink Tastefully
Drink Tastefully is a web design concept of a coffee shop. The aim is to explore an innovative layout for the F&B industry and find a compelling way to ‘tell the story’.
Landing Screen
Minimal design combined the strong visual Contrast image to instantly tell the visitors what this is about
Horizontal Scrolling Menu A horizontal menu for the customers to have a glimpse of what the coffee shop/ restaurant offer
Blog Section A blog section which allow the users keep up with the lastest news and offer
About Us A section in the website showcasing a brief story of the coffeeshop/ restaurant. Focusing on telling user who they are and what’s their core value.
Contact & Footer Section At the end of the page, there is the location of the restaurant/ coffeeshop and all the social links which allow visitors to contact or find the coffeeshop/ restaurant.
06
02 - Portfolio/ Muti-purpose Horizontal Scrolling Web Design Portfolio/ Muti-Purpose Horizontal Scrolling Web Design Tell a story in a compelling and minimal way. The design features horizontal scrolling and dark theme. Providing an immersive browsing experience to the users.
Site Logo Home
Site Logo
Social Icons
Manifesto
Contact
Home Page
Who We Are Page - Who you are - What’s your value
What We Do Page - Who you are good at - What services do you offer
Portfolio Page - Showcase what you’ve achieved
How We Do It Page - Introduce the methodology used behind the projects
Contact Page - Contact Form - Phone Number
Project Page - Project Content
Project Page 2 - Project Content
Project Page 3 - Project Content
07
03 - The Body Shop Branding
This is a conceptual project aiming to promote/ solidify The Body Shop brand value and refresh the brand image by giving it a facelift
the logo the BODY SHOP logo - KEEPING THE SIMPLICITY OF THE ORIGINAL LOGO AND UPDATE IT WITH NEW FONT THE BODY SHOP MEN LOGO - UPDATED WITH A BOLDER AND MORE EXPRESSIVE STYLE TO INJECT personality into the body shop men brand
the font For the bodyshop men - ROWO typeface. . FOR THE MAIN FONT - FESTER SEMI-CONDENSED.
the body shop values 5 core values of the body shop: - forever against animal testing - support community fair trade - activate self esteem - defend human rights - protect our planet
New Visual Identity starts with the brand’s core vaue
Giving the products a brnad new packaging
Updated Site
Current Site
Freshen up the site a quck mockup showing the potential direction of the facelift on the official website THE site architecture is based on the current site and is now optimised to provideo better visual experience and simplified site navigation
Promotion campaign mockup
08
404 Error Page Design
What can we do to the 404 Error Page to make the users to stay on the website when they hit a page no longer exist? My Solution: - Tell users an error has happened with the reason - Make the page more appealing with graphics and fonts - Providing Search function to let users find what they want -Redirect users to the main pages with menu bar (when they have no specific destination)
Type something
Thank you very much for you time
Website: jldesign.co Email: leekinwang@hotmail.com Linkedin: linkedin.com/in/kinwangleejeff Crafting Visual & Digital Experience