Loading Ralph Chang's 2024 portfolio

Qwell

Community foundation works to improve LGBTQIA+ quality of life in Austin, Texas.

UI/UX DESIGNUSER RESEARCHUSABILITY STUDY
planet longhorn

Overview

The Greater app helps users explore LGBTQIA+ friendly places/restaurants and organize meetups to engage with the Austin community. Its main purpose is to provide a platform to discover and connect with LGBTQIA+ friendly establishments/events in Greater Austin. Unique features include filtering listings based on specific criteria and creating events to share with the community. The target audience is LGBTQIA+ residents and allies looking to support LGBTQIA+ friendly businesses/events, and the benefits include discovering new places and experiences and promoting inclusivity and diversity in the area.

Role

UI/UX Designer

Completed

Spring 2023

Design Link

Figma
OVERVIEW

Problem.

branding
MY RESPONSIBILITY

1. Survey interface design.

The app includes a Wellbeing Survey, Dashboard, Settings, App Invites, FAQ, and Credits. Users can earn points and gifts for answering QWELL's survey questions and can choose to remain anonymous. The survey is only available for a limited time (June-August). Users have the option to alter demographic answers and report adverse experiences.

MY RESPONSIBILITY

2. Help menu.

Users can request referrals and information not available in the app. In cases where there are no search results, users can request push notifications for future answers. Unanswered queries are shown to other users as an incentivized opportunity to help find answers. Non-anonymous paid positions could be considered to ensure a quick and personalized response. 'Cases' are 'closed' when the searcher indicates satisfaction.

CLIENT

Evaluating client stance/goals.

Our client provided us with a document containing all the specifications for the app. In the initial weeks of the spring 23 semester, the design and product team worked closely with the client to understand the specifications, define objectives, and establish timelines. We maintained frequent communication with the client, and received feedback on our designs via Figma.

PERSONAS

A fast and easy way to see the floral design.

Thanks to user research, I can segment a florist’s job into small actions and find place for improvement opportunities.

branding
WIREFRAME

Paper wireframes.

Paper wireframes aim to enhance the user experience and solve any pain points. These wireframes took inspiration from image editing and note apps to develop a user-friendly interface that exceeds expectations.

branding
WIREFRAME

Digital wireframes.

The first wireframe allows users to access recent projects at the top, find suggested color combinations for inspiration in the middle, and view a card layout of flowers at the bottom. The second wireframe is the design panel for bouquet.

branding
PROTOTYPE

Low-fidelity prototype.

Here's a low-fidelity prototype that includes a home page where users can create or edit files, search for content, and add flowers to a selected project. When the user exits a file, a confirmation box will appear to let them know that their progress has been saved.

branding
USABILITY

Usability study findings.

branding
MOCKUPS

Refining the design.

The refined design will have a list of scrollable buttons at the bottom, categorizing the user's floral design needs. This leaves more canvas space for design and creation. Usability test results show that users don't often add flowers to a project. They need a simpler way to add flowers during the design process. To address this, I've added a feature for users to favorite flowers. On the design page, under the 'focal' and 'foliage' buttons, users can view their favorite flowers. This makes it simpler for them to add preferred flowers to their designs.

branding
PROTOTYPE

High-fidelity prototype.

branding
ACCESSIBILITY

Accessibility considerations.

branding
TAKEAWAYS

The project helped me to learn more about the process of a design thinking framework. Learned to do better visuals with the material design guidelines, by creating a small component library. Also learned how to empathize with the users in a better way.

IMPACT

Florist can design floral arrangement easily and present their design to customers to ensure their bouquets are well-received without costly and time-consuming re-dos.

NEXT STEP

The UI/UX design of Flori involves continuous iteration based on user feedback and testing, learning advanced features of Figma like autolayout, and incorporating more accessibility features.

WHAT I LEARNED
  • Accessibility is crucial:

  • Focus on contrast, font size, and user feedback to make the app usable and enjoyable for a broad audience.
1/4

More projects

SCF Analysis
UI/UX DESIGNFULL-STACK DEVELOPMENT

This project simplifies the vast Survey of Consumer Finance data into an accessible and engaging web application for all users.

Planet Longhorn
WEB DESIGNWEB DEVELOPMENT

Design and develop an informative and community-representative online presence for Planet Longhorn.