UI/UX design work
In this UI/UX design portfolio, you'll find a collection of my work from both my internship and current full-time job. By reviewing these projects, you'll get a glimpse of my skills and capabilities as a designer. If you're looking for someone with my expertise, feel free to get in touch. I'd be thrilled to share more with you!
All of the UI projects were created using "Figma" as the design tool
ERP 企業資源系統設計
Workshop reservation and online store
Spent: 3 weeks
Pages: 5 main pages
This project focuses on developing a comprehensive website system designed specifically for the workshop. The platform will enable clients to easily make reservations for various weaving and crochet workshops, purchase material or packages, and access a complete history of their reservations and purchases.
Key features of the website will include a user-friendly interface that allows clients to browse available services, select their preferred time slots, and receive confirmations for their appointments. Additionally, clients can explore a curated selection of products for purchase.
To ensure transparency and convenience, the system will provide clients with easy access to their reservation and purchase records, allowing them to manage their appointments and orders efficiently. This project aims to streamline the client experience while supporting salon operations through effective appointment management and product sales.
Client-side
Admin-side
01
Classlet (mobile)
The slides above demonstrate the updated user interface (UI) of the metaverse learning application. They also showcase various ideas to enhance the user experience, starting from the login screen, all the way to the scene and task flow.
02
GoGoMPF (web app)
During my internship, I contributed to enhancing the user interface and experience of a website application. This application serves as a valuable tool for MPF agents, allowing them to efficiently store and access essential information such as MPF plans and funds, MPF portfolios, retirement statistics, and client details.
In the portfolio showcases, I have included a comparison between the original version of the website application (displayed on the left side) and a video demonstration showcasing the improved design and modifications implemented.
Web app - Original version
Web app - Modified version
Modified design elements:
Color theme
Menu bar
Button
Feedback
Task flow
Information dialogue
Contact form
Client list
03
GoGoMPF (For Agent)
Additionally, I assisted the company in creating user-friendly interfaces (UI) for new features in both the web and mobile versions, catering to the needs of agents and clients. Notable additions for agents in the web app comprise:
-
Provider ranking
-
Message
-
AI recommendation (possible enhancement of portfolio)
-
Fund switching
The image above shows the user interface of our mobile agent application. It's a simplified version designed for quick access and reminders. While we recommend agents to use the website's app for a more comprehensive experience, this mobile version serves as a handy tool.
04
GoGoMPF (Client)
The mobile app version aims to offer clients a smooth and convenient experience in handling their MPF portfolio. By simply tapping on their mobile devices, clients can effortlessly access their portfolio and see their investments in real-time. They can also seek advice or suggest improvements for their portfolio, receiving expert guidance from a suitable agent who can assist them in managing their investments more efficiently.
05
Telematics (application)
Background research
-
Exploring the concept of telematics and its applications in car insurance
-
Identifying key behaviors for measuring insurance
Concept
This app features user interfaces for both commercial owners and private/commercial drivers. By utilizing a car-installed sensor, the app collects and stores relevant data. Users can then review and enhance their driving behavior, while owners can access statistics to inform decisions regarding rental fees.
Use case research
Studying existing use cases in the UK and the USA for reference and learning purposes.
Meeting
Engaging with the technical team and project director to comprehend requirements, address technological constraints, and share crucial measurements of driving behavior to incorporate into the application.
Design
-
Documenting the application's pages
-
Presenting the page flow to the founder
-
Commencing page design
-
Conducting a mid-point check with the technical team
-
Finalizing design through high-fidelity and interactive prototypes
Room of improvement:
-
Using action verbs for button naming
-
e.g. Login --> Create (during the create account stage)
-
e.g. Continue --> Enter code (during the PIN code verification process)
-
-
Add an action button to clickable cards
-
e.g. More/Detail (when the user want to check the journey's detail)
-
-
Button color
-
e.g. the daily, weekly, and monthly journey buttons should only use two styles (solid or border)
-
Original
Improved
-
Button size
-
the size of the button creates an unaligned design
-
e.g. button to complete the form is too short
-
Original
Improved
06
Telematics (website)
This website showcases Explainable AI and one of our projects, telematics insurance technology. It presents the features, benefits, and practical uses of Explainable AI. I created a user-friendly website that adapts seamlessly to desktops, tablets, and mobile devices, ensuring all content is displayed properly. To bring the design to life, I utilized Questi AI to export the Figma design into HTML and CSS code. Visitors can easily access the website by using the provided link.