Design Portfolio Fall 2023
Ashley Xiang A dreamer
and a visualizer
prioritizing human-centered design.
ashleyxiang888@gmail.com dreamxvisual.com https://www.linkedin.com/in/ ashley-xiang/ I’m an aspiring UX/UI designer studying Design and Environmental Analysis with a minor in UX design and Game Design at Cornell University. I strive to share new ideas, learn from diverse perspectives, and expand the horizon of what defines design. Delving into multiple mediums, my design journey is focused on the user experience and is human-centered.The way people connect and interact draws my interest and is what I would like to continue exploring in my education and future career.
2
3
Ashley Xiang
01 02 03 ParkDown | 2022 UX/UI Design
4
Music Mood | 2022 UX/UI Design
Groove that Goob | 2023 Game Design, UX Design
Table of Contents
04 05 06 FLBM | 2022 Exhibit Design, Interior Design
Luxband | 2022 Product Design
Other Works | 2020-2023 Fine Art, Graphic Design, Etc
5
01
Ashley Xiang
ParkDown Parking Solutions on the Go Scope User Research, UX Design
Date Fall 2022
Project Team 5 student designers
Parkdown is the only innovative app that delivers timely, updated information about parking availability, regulations, and pricing in a manner that fits into Cornell students’ existing habits and busy lives. We help students park by providing parking options in their immediate area and consolidating parking information in one place.
6
UX/UI Design Straightforward, simple interface which is easy to interpret and use while slowly driving and finding parking.
7
Ashley Xiang
Cornell students who are new to driving in the Ithaca area have trouble determining public parking spot availability and regulations, leading to stress and legal punishment.
8
UX/UI Design
Design Goals
Simple
Efficient
User-friendly
Reliable
Simple, inviting onboarding interface
9
Ashley Xiang
User Research We conducted six contextual interviews, asking students to drive around Collegetown and actively find parking. After the interviews, we collected sentiments and created an affinity diagram together. From the grouping and diagramming activity, we found four main user insights.
User Insights
10
UX/UI Design
User Persona Identifying ideal users’ needs drives design reasoning.
Mark Lu Needs
Priorities
Mark is a new driver in Ithaca and has been frustrated because he can’t find available parking near his classes.
• • • • •
He has also been fined once for exceeding the parking time he paid for.
Career development Efficiency Time management Control over schedule Social life
Requirements The 12 requirement statements guide the design process and decide the main focus of the project. We needed to define our goals and hone in on specific problems we could solve.
11
Ashley Xiang
Ideation Sketches Fast, design ideation and brainstorming.
Hologram car display with directions
Special headphones with audio cues
Smart navigation band
Website with constant parking updates
Smart parking app with alerts
Ithaca rule updates with clear consequences
Special parking lot signs with information
Stacking car parks to add parking
12
UX/UI Design
Chosen Design Sketches
Carplay compatible app Custom profile and side menu if you want to look for specific parking options
Redirect from any navigational app to ParkDown when near your destination
Illegal parking pop-ups to prevent users from getting tickets
Sound and audio cues so there are minimal distractions
13
Ashley Xiang
Final Design Main features and use cases for ParkDown.
Main onboarding
Progress bar Confirmation and continue button
Default map view
Green and red color coding to show illegal vs legal parking Card pop-ups with surrounding parking options’ information (price, hours, etc)
14
Preference sidebar
Notification settings Parking option preference checkboxes
UX/UI Design
Illegal parking warning
Pop-up when you are approaching or about to park in an illegal area.
ParkDown notifications
Lockscreen notifications that remind you when your parking time is almost over.
Easily tap in and see where you parked.
15
Ashley Xiang
Paid parking reminder
Scroll to set time you paid for parking
16
Reminder for how much time is left
UX/UI Design
“Finish” button is replaced with “End Session” and a proper timer or countdown is added
Checkboxes and text are larger to allow for better visibility and to prevent misclicks or mistakes
For a more fluid onboarding experience, “Submit” and “Start” buttons progress the user through the flow in addition to the swiping motion
17
02
Ashley Xiang
Spotify: Redesign
Music Mood Connecting with others through curated music Scope User Research, UX/UI Design
Date Fall 2022
Project Team 6 student designers, Mainly individual
Music Mood is a new added feature which analyzes user weekly listening trends and the top 25 songs they listen on repeat. Every song is assigned to a emotion or feeling and each user has a combined “mood” by the end of the week. They receive a weekly, updated custom playlist which they can use to customize their profile and connect with others.
18
UX/UI Design Bright, captivating visual design that allows for personalization and connection with others.
19
Ashley Xiang
Problem Statement When I listen to music, I want others to know what I’m feeling, so I can express who I am better, but I can’t do that because:
1
2
3
Music platforms don’t have enough ways to express your musical taste other than making playlists.
Creating playlists about one theme or story can take too much effort.
Songs are linked to specific memories/emotions but there’s no way to track them.
Design Solution
Featured on Home page to gather attention and interest Each “mood” contains a blend of two emotions and colors based off Spotify Aura
20
UX/UI Design
Research Methods We conducted six interviews and asked participants how they felt about music and what streaming platforms they used.
Analysis There was a group affinity diagramming (Figure A) session where we combined sentiments and examined common themes across all participants.
Figure A
Interview Insights From user research, music and music sharing is personal and important, but current sharing music features lack personalization and interesting elements.
21
Ashley Xiang
Feature Idea Sketches Designing features that could connect people with their friends and family through music.
Generated AI group playlist covers
Music sharing and messaging within the app
Sharing music to friends on a specific page
Music aura and identity based on music taste
22
Custom profiles based off music
UX/UI Design
Information Architecture Information architecture allows us to see where the feature should exist within the app and how it can be integrated.
UI Kit Creating a UI Kit allows us to study Spotify as an app and do visual design with the same guidelines.
23
Ashley Xiang
Final Design Features Personalization
Weekly customized playlists
24
Connection with others
Adapted banner and unique profile based off Music Mood
Easy to find your friend’s playlist on their profile
Self-discovery
Follows current UI and is easy to add to your profile
Fun stories to look through and discover more about yourself and your music taste
UX/UI Design
Final Design Flows and Interactions Flow 1: Sharing Mood with a friend
Flow 1 Sharing playlists with friends will include a special message format and design. It generates interest and motivates others to look at their Music Mood.
Flow 2: Adding Mood to your profile and banner
Flow 2 An extra “Add to Profile” option is added to the playlist settings panel so users can quickly customize their profile and sharing components.
25
Ashley Xiang Flow 3: Viewing the Music Mood story for more details
Flow 4: Adding Mood to your profile from your profile
Flow 4 In addition to adding the customized profile from the playlist, users can also edit their profile and have the option to “Add Music Mood”. The unique profile is more personal and adds a connection to the music.
26
UX/UI Design
Flow 3 Music Mood shows up on both the Home and Search page to increase visibility. Additionally, interactive stories help users learn more about the meaning behind their mood.
Flow 5: Checking your friend’s weekly mood
Flow 5 Friends can check each other’s special profiles and weekly Music Mood playlists. It helps with bonding in relationships and promotes music sharing.
27
03
Ashley Xiang
Groove that Goob
A unique rhythm, stealth game that’s fun for all Scope Game Design, UX Design
Date Spring 2023
Project Team 4 student designers, 4 student programmers
The party-loving Globulons shattered their precious Oracle Jukebox, leaving the Mixolydian Galaxy devoid of music. To bring their music back, Goob sets its sights on abducting the Milky Way’s source of sound. To do this, Goob must sneak to the top of Astral Ace’s penthouse party. In this top-down, rhythm-stealth game, players groove their way across vibrant dance floors, avoid getting spotted by wild party goers, and absorb dancers to inherit their unique rhythms.
28
Game Design
29
Ashley Xiang
Game Design Groove that Goob is a top-down 2-D game that combines rhythm with strategy. It is a unique and fun game because it requires the player to stay on beat while also find a way to escape each level safely. It requires accuracy and quick thinking, but is also forgiving so that people who aren’t familiar with rhythm games can succeed. The initial game ideas were tested with players with a non-digital prototype and a turn based system was used to emulate staying on beat. The game went through several rounds of play testing and iterations.
Initial Gameplay
Finalized Gameplay
•
•
Dancers are scattered around each level Players avoid alternating danger light tiles Levels are time based Goob absorb dancers to create paths or escape the light
• • •
• •
Dancers move at a separate rhythm from Goob and have danger vision tiles in front Players have no time limit Goob absorbs dancers to gain their rhythm and pass special dance tiles (Figure A)
Figure A Gameplay Example. To navigate deadly dance tiles, Goob absorbs a faster dancing party-goer. Goob copies their rhythm, allowing it to pass safely and reach the elevator.
30
Game Design
Design Concept The game will have a dramatic setting and take place in the center of a busy city. There are three main design elements that will be incorporated into the design of the game.
Progression in Time
Dramatic Lighting
Retro Party
Levels will transition from a bright, daytime city setting to a cyberpunk, night setting, teeming with life and illuminated throughout. This creates a lively atmosphere, reflecting the increasing complexity of the levels.
The game will include strong colors and contrast in lighting, placing emphasis on certain characters.
Although the city is futuristic, the interiors feature retro designs and disco elements which pushes the urge to groove.
Character Design Goob has no gender-defining traits and isn’t designed to be anthropomorphic. We also had goals to create a simple, friendly character, which is loved by all.
Earliest ideas of Goob include jelly-like glob forms.
Cartoon and early simple exploration of Goob.
Pixelated style and color experimentation.
Final Goob design with new adjusted color palette that strays away from stereotypical alien colors.
31
Ashley Xiang
Designed Game Screens Title/Home
Settings
Simple, yet fun title screen with an animation of Goob moving towards the dancer. “Play” and other buttons are easily accessible and straightforward.
Settings screen following retro disco concept and color scheme. The main interactions are slider buttons.
Pause
Level
Pause screen freezes where player left off so they can keep track of where they are.
Level designs change with progression. UI elements are still recognizable.
32
Game Design
Tutorials The game includes five tutorial levels that review and focus on individual mechanics in the game. In each tutorial level, there are cards with graphics that explain how to play and pass each level. Many follow Goob’s character or are placed next to a specific UI element it is explaining or referring to.
Tutorial card displays which keys are used to move the character. The second card explains the function of the beat indicator.
Tutorial card explains how to recover after being caught.
Many of the tutorial cards have simple animations that explain more complex mechanics without overwhelming the player and having too many cards on screen. The cards alternate in one place.
33
Ashley Xiang
UI Elements
34
The Groove Bar shows the player when they have unlocked absorption and how many attempts at absorption they have left. The music note and bright blue border appear for visual emphasis and clarity.
Having a level label makes it clear to the player what level they are on and shows their progress. It also helps them measure level difficulty and not repeat the same level.
The beat indicator includes moving vertical lines that correspond to the speed of the rhythm. Players are taught to move when the lines meet and hit the star in the middle.
This indicator is visually distinct and noticeable but not too distracting. It helps the player stay on rhythm and gives newer players extra support.
Game Design
Marketing Created a promotional banner and icon for the game design website which features all of the games for the GDIAC showcase. Produced a large scale poster that draws people in and gives a glimpse into the setting and emotions of the game. Designed the logo for the game and all materials.
35
Ashley Xiang
04
Finger Lakes Boating Museum A nostalgic, immersive experience Scope User Research, UX/UI Design
Date Fall 2022
Project Team 6 student designers, Mainly individual
FINGER LAKES
BOATING MUSEUM
This new exhibit in the Finger Lakes Boating Museum provides a unique, sensory experience, presents the audience rich history, and incites feelings of nostalgia. It is a captivating space to observe, feel, and learn from.
36
Interior Design
37
Ashley Xiang
Concept The goal is to create an immersive, deep lake experience by engaging the user while keeping the historical elements of the Finger Lakes alive. Dark, rich walls and spot lighting highlight individual boats and showcase their details and beauty. At first, the space feels like a mystery, waiting to be explored and pieced together.
Narrative
Immersive
Historical
38
A
Interior Design
B
User Experience Journey Different user journeys of visitors coming to the Finger Lakes Boating Museum new exhibit and how they will interact or experience the space. distinct target audiences A Three that visit the experience for separate reasons.
exhibit has an activity or B The intent for all three visitor types but all visitors will leave with something beneficial.
39
Ashley Xiang
Blocking Diagram + Floorplan To separate the open warehouse space, a large interactive screen of a map is the first thing you see. The map of the Finger Lakes will have all boating past boat makers and bring nostalgia to those who love boating. The visitors are encouraged to walk different paths and explore the exhibit. The lighting will highlight and focus on certain areas of the room, adding to the immersive experience. An important aspect that was included from the beginning was a secure viewing platform or raised display for prospect and allows visitors to take in the entire room.
B A
circulation remains A The the same with two primary central routes because the displays come outward.
larger mezzanine is B Aadded for more display
potential and a variety of views. A children’s area is added as well to provide more interactions.
40
Interior Design
Built Model
Glass textured partition to divide up the space and different types of boats
Central children interaction zone with raised walls and seating
Mezzanine to provide an overlook area and opportunity to view the whole exhibit all at once
Large map of Finger Lakes right in the beginning to separate space and bring nostalgia
41
Ashley Xiang
Rendered Elevations Photoshop renderings of West cross-section and South wall.
A
B
42
Interior Design
the dark space, spotlights A In highlight information and guide the visitor.
expanded boat display B Ain large front of the interactive map to introduce boats and history altogether.
A
circulation remains the same A The with two primary central routes
because the boats are stemming from the wall.
43
Ashley Xiang
Finishes FF&E Physical material samples and furniture examples.
Dark blue, soft upholstery and colors that blend into the background and add depth to the space
Sleek, track lighting
Special glass partitions which divide certain sections of boats but still permit visibility
Functional and not visually distracting in a space
44
Interior Design
Model Detail Shots
45
05
Ashley Xiang
Luxband
Lighting the path towards a greener future Scope User Research, Product Design
Date Spring 2022
Project Team Independent
Luxband is a smart headband system with interactive movement detection, LED lighting, a smart tracking progress application, and a connected art installation. Other devices that detect movement don’t encourage others to join in and build a community or have effective motivational incentives. Luxband is part of a greater research and product goal of combating climate change and reducing the carbon footprint on the individual level.
46
Product Design
47
Ashley Xiang
Problem The climate crisis has become a pressing issue and continues to be a point of concern among the population. What solution can we create to mitigate the problem?
Target User The product will be designed for college students who live on campus. After conducting user interviews and a cultural probe, 5/5 students had a car at least in the top two modes of transportation and only 2/5 students felt conscious about climate change through direct experiences.
Design Goals • • • •
Fashionable and discreet wearable that students are willing to use (Figure A) Utilize light elements Catch attention from people walking by Promote conversation and connection
Figure A. Physical prototype worn on a student
48
Product Design
Design Process
User Interviews + Background Research Concept Board
The design should be futuristic, gravitating, incorporate light elements.
Cultural Probes Morphological Chart Non-digital Prototyping Quick design thinking and iteration to come up with a diverse array of ideas.
Storyboarding Animated Gif Animated storyboard of the product of its intended function.
Roleplay/Interaction Demonstration Directly showcases human interaction with the designed product.
Scenario Physical prototyping Working prototype with Arduino elements and sensors.
Final Demo Video
49
Ashley Xiang
Physical Prototype The prototype utilizes an Arduino board with an accelerometer to track motion and an RBG LED stick to emit light. These attachments are hidden for the sake of the prototype and Wizard of Oz reactions.
3-axis digital accelerometer to track motion
RGB LED stick
Figure B. (a) Luxband stationary (b) Luxband after movement (c) Mockup of installation on campus
50
Product Design
Using a headband, card stock, transparent acrylic, and Arduino components I created a functional high-fidelity prototype. The Luxband is a smart headband that automatically turns blue when a user starts walking. Each headband is connected to the Lux app where walking data is tracked and also sent to a centralized display on campus. On the installation, footsteps are rapidly moving, increasing as more people choose to walk rather than drive. As more people are aware of the installation and headbands, they are encouraged to join in on the movement. The product is meant to combat sustainability issues by helping college students slowly lessen their carbon footprint.
51
06
Ashley Xiang
Other Works Scope Graphic Design, Fine Art, 3D Modeling, Sculpture, Etc Date 2020-2023
Coming from a diverse design and art background, I have delved into many forms and mediums of design. Although I have a strong passion for human-centered design, I love experimenting with graphics, trying new softwares, and drawing for fun.
52
Other Works Photoshop self portrait
53
Ashley Xiang
Fine Art
Still life | Charcoal
Outcast | Chalk pastel
A Hero’s Beginning | Acrylic
54
Interior Rendering | Marker
Other Works
Sculpture (3D + Physical)
Eclipse | 3D modeling
A New Perspective | Sculpture, Installation 55
Ashley Xiang
Graphics
Self Dissection | Mixed Media 56
Self Reflection | Graphic
MDC Promotio
ons | Graphic
Other Works
Medium Design Collective, Issue 2.998 x 10^8 | Mixed media 57
dreamxvisual.com ashleyxiang888@gmail.com