Declaration of International Day of Conscience
Conscience is innate.
ILLUSTRATION
I like to use pastels to draw the illustrations. The subtle colors make the images in the dreams.
Raccoon Series
A series of Raccoon illustrations for the desk calendar project.
move·ly
Your workout, your style.
Challenge Review
The current pain points among the current workout apps
More and more people (especially females) look for workout apps to maintain healthy at home. Especially during the pandemic, people are afraid of going to the gyms and workout studios.
Since our product is on the early stage, we would like to know the opportunities and pain points among current workout apps for working professionals.
Discovery:
Research & Analysis
The participant spends time looking for
the desired class videos.
After interviewing 5 participants, their exercise frequency/digital workout products/preferred exercise/platforms are very different.
With the Affinity Map, the common part is the participant wants to set up her/his own workout plan. (desired length/instructor/body part/target/difficulty/(no) equipment)
Design: Concepts & Sketching
Filter Setting is the priority feature.
After analyzing, these features: instructors reputation/filter setting(duration)/different platforms/ log/statistics feature/enough class data could solve current problem.
With the Feature Prioritization Matrix analysis, the priority is to work on the filter setting feature.
Develop: prototyping
clickable hi-fi prototype
https://www.figma.com/proto/SnDRflwOLV6S7uzgA5wtv8/prototype?node-id=94%3A3212&viewport=373%2C472%2C0.07660292834043503&scaling=scale-down
Test: Validation, Usability, Feedback
Refine the app
After conducting the testing of the lo-fi clickable prototype with the users, I just realized that the users will apply her/his own way to search the class video. Therefore, I have to modify the previous user flow.
Design: Iteration
Filter setting should be arranged at the beginning.
Design is an iterative process. After receiving feedback and insights from the testing phase, I go back to refine the designs. These include updating the design, adjustments of the flows, etc.
While working on this project, I came out different arrangement of the filter setting. The best solution comes out from the user testing. The users suggest me to put at the beginning of the flow instead of hiding in the pages. This will be more clear, fast and accessible.
Solution & Impact Overview
Users customize their workout plan
in a few simple clicks.
The final solution is a clickable high-fidelity prototype in the iPAD app platform. The listed workout filter did fit the user needs, so they can easily go into the desired workout class within a few clicks.
EZ hotel
Book a Hotel Easily
Problem Statement
What the users really need
EZ hotel website allows travelers to spend less time comparing the hotel rate/room details to get the best deal. It eliminates the chaos of opening lots of website tabs, clicking the update search button repeatedly, making the hotel booking easier than ever.
Every travelers need to go through a time-consuming process to get their ideal best deal. (spend less with better quality/rewards)
- They need to compare the best deal in different hotel booking websites.
- After choosing the hotel, they have to look at the room details if these fit their needs.
- The floating rate triggers them to go back and forth to change their check-in and check-out dates in order to get the cheapest price.
Research
Key Finds
Interviews with 3 different people, age 30-40, M/F
- They prefer to stay in the hotel because it’s more reliable, convenient (put the luggages) , and less contact with strangers.
- They look at the room pictures and read the descriptions carefully. If the lighting is not good, or carpet with stains, they’ll choose another one.
- They’ll spend time reading the reviews in different ways. One reads the best & worst reviews. One read the 3 worst reviews if he can tolerate the same situation.
- They at least visit two hotel websites to do the price comparison.
- They tend to change their check-in/check-out dates and try to get the less expensive deal.
Persona
Hotel Travelers
GOALS & NEEDS
- No need to update the check-in/check-out dates all the time to see the best rate
- Ways to minimize the hotel search/booking steps
- Save time making the notes and share with friends
User flow
Always wearing the user's shoes
After the user interviews, I figured out that most of them do the hotel booking at laptops so they can do the comparison or read the hotel details clearly.
Most users don't want to sign up too many websites, so how to make the user-friendly website is really important.
Sitemap
Start planning the structure of the app
With the card sorting testing, it's easier for me to think about how the user group the related items.
Sketching
Planning the boards
During the paper prototype testing, I just realized that asking the users to check the hotels to do the price comparison is annoying.
They would like to see the rate comparison, but they don’t need to do any extra clicks. Less clicking or less pop-up windows or less advertisements are what they are looking for.
Wireframing
Visualizing the real functions
After refining the paper prototype testing results, it's time to deal with the real layout
Prototype
Connecting all together
https://invis.io/EKOZDLGU5N3
While working on the prototype projects, at first I created all the boards in Xd. It can easily work between Adobe Illustrator and XD. However, while I want to do the test, it seems XD is not user-friendly. Therefore, I went back to InVision, which I can test the prototype easier on the laptop and the mobile (app). The struggle is that on the real screen, even the 1 pixel is very crucial. There are lots of times that I need to go back and forth between the boards and fix the minor pixel changes. Also, how to connect all the boards right is important. During the test, I figured out that if you visit one board, you’ll get stuck and nowhere to go.
Testing
MORE TESTING,
MORE USER-FRIENDLY
Because of the previous paper prototype testing, the users are looking for clear information, less distraction (less clicks) hotel booking website. Therefore, the map and the hotel selections are putting together. Also, the users seriously choose the ideal hotel during the task scenario, so I added the bed specs for more details. Moreover, I edited the wording from “View Deal” to “Choose”, which makes more sense to the users.
ROOM X MATE
My 1st UX project
Problem Statement
What the users really need
As one of the target audience of room/apt/house for rent market, how to get the useful/correct information is crucial. At bay area, there are lots high-tech companies with high paid salary. The apartment rent price is high, so is the house sales market. Quite a few working professionals choose to live with the friends to lower down the living cost. Although the current two websites (mobile apps), Zillow & Trulia, already offer enough information on the platform, however; the website can be created more user-friendly, and not overwhelming the users. I also want to add the review/comparison features, so the potential users can get a clear overview of the selections. What: focus on the rental room/apt/house market (not house sales market) Who: single professionals/young couple at the age of 25-35 Where: At Bay Area of Northern California When: the users can search the rental pricing anytime How: The prototype will be on the laptop/iPhone to validate the features
Research
An Apt/House for Rent User Experience App
The purpose of this research is to take a look of the potential users of an Apt/House for rent user experience app and make sure what their needs and what features they would like to see in the app.
Persona
Hotel Travelers
GOALS & NEEDS
- No need to update the check-in/check-out dates all the time to see the best rate
- Ways to minimize the hotel search/booking steps
- Save time making the notes and share with friends
Sitemap
Start planning the structure of the app
The sitemap helps me determine where in the app users should see what's important to them.
User flow
Always wearing the user's shoes
After creating the sitemap -- I wanted to spell out specific flows users would take within the app. These documents illustrate those routes -- showing all points of interaction and decision-making
Sketching
Planning the boards
After creating the sitemap and user flows -- I felt ready to start sketching potential layouts. These pictures illustrate some of my initial thinking.
Wireframing
Visualizing the real functions
The next step was transferring these paper-and-pencil sketches to digital files. I used Balsamiq as an intermediate step before going into Illustrator. This allows for flexible wireframing before committing to building a high-fidelity prototype.
CHALLENGE: How much screen real estate should be allocated to finding a roommate
Style Guide
Unity and Consistent
I chose these subtle colors because I want the focus of the app to be on the information being displayed.
Prototype
Connecting all together
https://invis.io/SKB834N5G
While working on the prototype projects, at first I created all the boards in Xd. It can easily work between Adobe Illustrator and XD. However, while I want to do the test, it seems XD is not user-friendly. Therefore, I went back to InVision, which I can test the prototype easier on the laptop and the mobile (app). The struggle is that on the real screen, even the 1 pixel is very crucial. There are lots of times that I need to go back and forth between the boards and fix the minor pixel changes. Also, how to connect all the boards right is important. During the test, I figured out that if you visit one board, you’ll get stuck and nowhere to go.
Testing
Understand the validation process
Overall all the testing is going well the the users are able to accomplish the given tasks without problem. There was some confusion caused by the prototype limitations. The users are willing to share their personal ideas to improve the app.
Room X Mate App
What I learned from the entire process is the result is not as what I imagine at the beginning. After doing the user researches/interviews, I got to know the real needs of the users. If the users need to find a apt with someone to share, the someone will be something in common, not strangers.
ABOUT ME
YC Chen
Graphic Designer · Illustrator ·
UX Designer
Brenda is a CA based graphic designer with over 10 years experience. She’s worked on a variety of in-house projects from package design to social marketing. She has the visualization talent to see the big picture and then go into the details to fulfill the project goals.
Her most recent work was move·ly workout app where she designed for female working professionals. In the process of design-define-design-refine, she sharpened the designs back and forth based on the users behaviors and needs. The user-centered design methods and processes brighten her vision of design. She keeps the same belief for doing volunteer work in her leisure time as well. She strongly believes that design can make life more joyful and meaningful.
Brenda is willing to challenge herself to work on a range of projects from designing native apps/short animation to collaborating with the art directors. No matter if she's taking the pictures with her iPhone, illustrating on the sketch paper or creating the prototypes on her laptop, Brenda does her best to keep the artworks with quality and creativity.
She graduated from Savannah College of Art and Design with a M.F.A. degree in Illustration. Working as a Graphic Designer, she recently explored the field of user design. During her leisure time, she likes to get inspiration from nature with photography. Owing to the nourishment from Asia, she embraces the Eastern and Western cultures and bring these culture-blending energy into her work.
CONTACT
Email
ychen37@
gmail.com
