Design Challenges
Project Detail
HCID 540 Design Tools and Processes
Weekly Design Challenges
Deliverables
Affinity Mapping, Persona Creations, Lo-fidelity Wireframes, High-fidelity Wireframes, Interactive Prototype
This case study showcases weekly challenges I completed in my HCID 540 class at the HU Master's Program. Each of these challenges tackles a different stage of the UX process.
Prompt
Design a new ride-share product by identifying gaps and opportunities in the current market.
Approach
I conducted secondary research using academic sources, articles, focusing on trends in EV ride-sharing, accessibility, and sustainability.
Competitive Analysis
The competitive analysis included global and regional competitors like Uber, Didi, Ola, and Revel to highlight the differences and unique user needs of each competitor.
Role
UI/UX Designer
Time
Jan - Mar 2025
Overview
Challenge 1: Competitive Analysis & Secondary Research
Competitive Analysis - EV cars - International & U.S based.
Deliverables
Stakeholder presentation summarizing key insights
Product Opportunities
Challenge 2: Survey & Persona Creation
Prompt
Understand user needs and behaviors to help with ride-share product direction and create a persona.
Approach
I created and distributed a short survey targeting users who commute regularly. The questions focused on commuting habits, frustrations, and opinions on electric ride-share options. After analyzing the survey data and secondary research, I created a persona.
Graph answer of most important factors participants consider when choosing a ride-share service.
Deliverables
Collected and analyzed responses to identify common pain points such as cost concerns, waiting time, and interest in sustainability options.
Main persona
Challenge 3: Affinity Mapping
Prompt
We were given a transcript of a user interview and asked to organize key takeaways using an affinity mapping process to better understand user needs, frustrations, and any patterns in their behaviors that related to grocery shopping.
Approach
I noted from the transcript of keywords that related to themes such as any frustrations during the checkout and delivery process, and sand hopping habits.
Challenge 4: Sketch
Revised sketch of steps select time & select seats.
Challenge 5: Paper Prototyping & Usability Testing
Challenge 6: Low-fidelity Wireframes
Challenge 7: High-fidelity Wireframes & Flow Annotations
Affinity Mapping completed as a class.
Deliverables
Affinity map with themes such as delivery frustrations, shopping habits, and costs.
Prompt
Design a movie ticketing app that allows users to:
Select a location nearby
Choose a movie
Pick a showtime
Select 5 seats in a row
Approach
In class, I quickly sketched 7+ layout ideas based on the provided user flow. Then later revised 5 screens based on professor and peer feedback.
Revised sketch of steps select location & select a movie.
Deliverables
Initial in-class sketches.
Revised sketches.
Annotations and relfecitons.
Prompt
Design and test a paper prototype for a movie theater app where users can select a nearby location, choose the movie Interstellar at 7 PM, and book 5 seats in the same row.
Approach
I created hand-drawn screens to simulate the app’s flow and conducted a think-aloud usability test. The participant completed the scenario while I observed and took notes.
Usability Testing of the created paper prototype
Deliverables
Usability Testing Report: participant completed within 2 minutes, overlooked some features such as location. and preferred confirmation before checkout.
Complete Paper Prototype with interactive features.
Prompt
Create low-fidelity wireframes for the flow of the movie app where the user can:
Select a nearby location
Choose the movie Interstellar
Select the 7 PM showtime
Book 5 seats in the same row
Approach
Based on the previous paper prototype and sketches, I created lo-fidelity wireframes using simple grayscale layouts. Each screen focuses on the core features and reduces distractions for users throughout the booking flow.
lo-fidelity wireframes of the movie app
Deliverables
Figma file:
Low-fidelity wireframes
Annotations for all user actions
Prompt
Create high-fidelity wireframes and flow annotations for the flow of the movie app where the user can:
Select a nearby location
Choose the movie Interstellar
Select the 7 PM showtime
Book 5 seats in the same row
Approach
I created high-fidelity wireframes in Figma following the low-fidelity wireframes. The flow annotations explain key interactions.
1st part of flow annotations.
2nd part of flow annotations.
Deliverables
Fully annotated Figma high-fidelity wireframes
Ckear task flow from start to seat selection
High-fidelity wireframes
Challenge 8: Interactive Prototype
Prompt
Create a prototype for the flow of the movie app where the user can:
Select a theater location: “Central Downtown: AMC Theater”
Choose a movie: “The Avengers”
Select a showtime: 9 PM
Book 5 seats in the same row
Approach
Based on the previous high-fidelity wireframes, I created the prototype using Figma.
lo-fidelity wireframes of the movie app
Deliverables
Interactive high-fidelity prototype.
Reflection
These weekly design challenges helped me sharpen my UX process under tight timeline. From research and sketching to prototyping, I spent time practicing iterating quickly while staying focused on the main user goals.