UX/UI Portfolio

Welcome to my world!
Look at some pieces of design I post here. These are not fully because we have confidential and have a consent (since 2020 till now)
Click here
I don't intend to post a Mock-up Portfolio (only for showing graphic/visual skills) because the process from mock-up to End-User is far far different. These are the ACTUAL projects that I have done with team. We targeted to END-USER/CUSTOMER to bring the successfull completed projects from scratch.

1. UX/UI Layout Designs

It's pretty large size if uploading all so please check it on Gdrive.
On here you can see the Layout of Tofro (this project has not done yet) Syno Japan Conference and some UI mockup layouts.

Click here

2. Live sites

Hong Kong Market

◌ Hong Kong Market is the project for the most popular markets in Hong Kong island. We did it on Wordpress with Muffin Builder.
◌ Timeline: 3 weeks

Seeds Children's Bookstore

◌ Seeds was founded in 2013 and is located in the heart of Central of HongKong and they are one of the most patient clients. This project launched in the middle of 2017 and revamp in the end of 2018.
◌ Timeline: 6 months from 1st site and next 6 months for revamp site

Jupiter Groups - Logistics

◌ Jupiter Group was founded in Hong Kong since 1980s as a worldwide logistics service provider.
◌ Timeline: 4 weeks

Righteous - Accountants and chartered secretaries

◌ Righteous is a team mix of professional accountants and chartered secretaries, offering one-stop professional services in the area of company formation, virtual office, statutory compliance, cloud accounting, audit and tax advisory.
◌ Timeline: 2 weeks. My role on this project was adding content and fix columns.

WMT Watches

◌ Watch Experimental Unit ( W.MT Watches ) has been manufacturing & designing timepieces for years. W.MT has made lots of unique timepieces for customers all over the world.
◌ Timeline: 4 weeks

Star of Canton Restaurant

◌ The Group is a Chinese restaurant group that is delighted by customers with Cantonese cuisine, Chinese banquet and catering services. There are four full-service restaurants in Hong Kong and two full-service restaurants in Shenzhen, China to provide Cantonese cuisine under the brand name "Li Bao Ge".
◌ Timeline: 4 weeks

Focus LED UK Ltd.

◌ LED products in UK
◌ Timeline: 3 weeks

BravoTalents.

◌ HR Recruitment System
◌ Timeline: 9 months

03. The UX/UI Process in Agile

We have been working on AGILE environment, STANDUP every 9:30 am, BIWEEKLY SPRINT every Friday and assigned tasks through JIRA environment (Atlassian). The process has several steps below:
1. Research & Interview users/Surveys/Feedbacks
2. Discuss with stakeholders
3. Wireframe
4. Prototype
5. Testing with QA/AC
6. Deliver to Devs & check design
7. Back to test & release functions

04. Case Example:
Syno Landing Page
‍

◌ Client: Syno Japan (www.synojapan.com)
◌ Timeline:

◌ Colour Branding: Green
◌ Requirement: Create a Landing Page for Japan Conference in 20th February. Translate PowerPoint slides to UI Design. Click here
‍

Reference 01: Bebit Landing Page

Pros: Japanese style with many visual graphics - easy to remember.
Cons: Typography - Texts are not consistent. Background is too messy. CTA on banner is complex.

Reference 02: Uideck

Pros: Western style with smooth graphics. Typography is consistent. CTA is attractive at the first sight.
Cons: The number of texts on Landing Page does not fit - dummy text, text is quite poor.

Solutions for SYNO LANDING PAGE
1. Look and feel: Clean and clear style
2. Use appealing graphics - Strive to convert texts to UI visuals.
3. Simple CTA banner
4. Button and Typograhy are consistent - colour, size.
5. Contact - Sign up form

Tool: Moqups
3 times fixing Wireframe from the 1st and here is the final.
‍

3 days to get done the 1st UI layout design from Wireframe.
‍

Many fixes/discussions - Just do several screenshots and post on here :D. Because the timeline for code is only 4 days, we decided cut off Mobile Responsive Design - This means use directly Landing Page on Desktop and Laptop. Users will zoom in to see detail.

Conclusion: Every project is a valuable experience, not only the skills but also communication with team and manage timeline. This project lasted in short time (10-15 days) and only have one time online discussion with CEO Syno Japan so I have to quickly learn about Market Research and Customer Experience. After creating 1st design, we also need to fix as well. Finally, it has been launched successfully. Nothing is happier than the moment I had done a project with strict timeline and very detailed requirements.
Luckily the final one on this design does not look far from the 1st one.
You can view source code on Github.
Click here

06. Case Example: Medical Claim

05. Case Example:
Moto Inc. System

1. Scenario
Fullerton Healthcare Group is looking to build a Medical Claim submission mobile application with a marketplace and profile editing feature. The design of the mobile application must follow known user experience conventions and have a clean and varied design. We want a new type ofapplication design that is fun and animated.
‍
2. Deliverables
‍Figma view link with the following 7 screens:
01. Splash Screen with Logo
02. Login Screen
03. Home Page
04. Clinic Listing Screen (view samples)
05. Profile Edit Screen
06. Loading/Transition Screen
07. “Action Successful” Screen
08. short powerpoint / writeup on the research process.

01. Project Goal
This eClaim is applicable to medical claim submission. The amount of each submission shall not exceed the maximum receipt amount of the corresponding claim type.
‍
2. Value Proposition
For [target customer] Patient, Medical Provider, Health Plan member & employer plans.
Who [target audience’s needs] With our medical service, individual and group medical policy customers can make claims for patients
The [product name] Medical Claim application
That [product benefit/reason to use] makes Claims can be approved in as little as a short time. A submission can be made in 3 simple steps and 1 minute.
Our product [differentiation] not make medical claim, but also check the process and search Clinics.

CLICK HERE TO SEE FULL

CLICK HERE TO SEE FULL
‍

This is a assignment test I received from Restaff. They would like to see my own assumption and improve their old product. It is not copyright or the whole project, just share several screens I did design
Timeline: 1 week

Moto Inc. has 20 different brands and each brand has 1-5 models. This feature allows users to select Brand -> Model. It is convenient for filter of system. Brand firstly, Model and next one is License Plate Number.

After 3 days researching, I remember a Case Study on Odoo which I did research and wrote for Arestos (Hexience). Odoo Car Management system are exactly similar to this case of Moto Inc. Althought Odoo has functions/features that needed, Odoo App is not good for UX design. It's quite general.
Reference Link 01

Reference Link 02