App Designs
Redesign of irbnb
Starting point
Airbnb is a popular app for booking stays during trips, but its filter function has place to improve based on the interviews during user testings.
I mainly redesigned this filter function including adding sort by function, save your filter preferences to the profile and you can even see the ground plan of the room.
Research
Personas
Workflows
Lo-Fi prototype
User testings
Hi-Fi prototype
Adjust
MBTriviA
MBTriviA is an game app inspired from Trivia games, but the main topic is about Boston's subway system. Our team aims to promote better interaction between people and the subway during their ride to form a better community.
In this game, people will represent their subway lines and each line has different categories. A leader board and the answer time they have is consistent with the arrival time of the train. They can check the map while playing the game to find out the arrival time, making people's originally boring ride time full of fun.
1: Research & Observation
2: Ideate & Brainstorm Phase
3: Low-Fi Prototypes & Visual Style Guide
4: Role play & User Narratives
5: High-Fi prototype
Redesign of irbnb
Introduction
Background
To be honest, booking.com is the software I've been using. However, last year's trip to Hawaii made me know a new software: Airbnb. In this software, I saw a more personalized service, we can use filter to continuously customize their own accommodation options. Not only that, you can also communicate with hosts on Airbnb to stay in a more affordable rent house. Compared with other software, its functions are more complete and complete, which also refreshed my cognition in this respect.
However, there is still room for improvement. After analyzing it in detail such as UI, function, page, layout, the goal of my project is to pinpoint an unmet need or challenge within the current Airbnb application and propose a solution by either (1) introducing a new feature or (2) reimagining an existing one. Because it is fully functional, it is extremely challenging and requires strong powers of observation, imagination, and problem solving.
Problem statements
After investigation and analysis of competitive products, I found that the biggest problem is that the page contains too much information at the same time, for example, the selection bar at the top is very long, and the random ordering of housing listings leads to insufficient price clarity and price transparency, and the search and filtering functions are also fragmented.
Approach
Research methods
After conducting a competitive usability analysis by exploring how Airbnb is different from Vrbo and Booking.com. We interviewed four users of different ages and different length of use, which helped us to have a more comprehensive understanding of the characteristics of Airbnb, including its advantages and disadvantages. I also began to summarize the problems that Airbnb users had mentioned, including the price and listing being out of order, and the lack of clarity on discount options. These observations were then translated into valuable insights, and from there, the How Might We (HMW) questions were formulated to guide the design process. After this step, I refine my statement and begin to brain storm possible solutions, eventually presenting them in workflow and wireframe format.
User personas
During the interview, we briefly listed each user's persona to facilitate subsequent analysis. Finally, after completing the HMW questions, we integrated all the data to form an ideal persona that answered the HMWs.
List of HMW:
In group discussions in class, we came up with some HMW together:
-
increase cohesion between the mobile app and desktop site?
-
better inform customers of fees and discounts?
-
increase specificity of search functions?
-
highlight the restrictions a rental house may have?
-
increase the communication between the renter and the host?
-
save time by gathering the parts that need filtering?
Personas:
Interview Questions
Q1. What’s your name/year/major?
Q2. How often do you travel?
Q3. What do you typically use AirBnB for?
Q4. When was the last time you used AirBnB?
4.1 Where did you go?
4.2 Why did you choose AirBnB over other booking sites?
4.3 Did you come across any challenges while booking your trip?
4.4 How did you fix those problems?
4.5 Overall how easy was the booking process for you? Scale from 1-10.
Q5. Would you recommend using AirBnB over other booking apps? If yes, then what features stand out to you on AirBnB?
Q6. Was there a time you chose a different booking site than AirBnB?
6.1 Why did you choose this site over AirBnB?
6.2 Were there certain functions that this site offered that AirBnB didn’t?
Q7. What do you wish you could change about AirBnB?
Q8. What factors have the most influence on you when choosing travel accommodations?
Siraj Akmal
Age: 20
Education: Business Admin+DS
Q1
Q2
6 times a year
No, only ocassionally
Q5
Yes, it's well known and developed
-no features stand out, just good experience
Q6
Hotel website
-easier and less work overall
-used to be cheaper than hotels but now there are many fees that hotels can be cheaper
Q3
Renting houses, vacations, small trips with friends
Q7
the information available on website-more info about the property and disclosures and requirements and also better search features
Q4
Last semester
-vermont
-fimiliar with sites
-not really, very straight forward
-no problems
-7
-increase the info on the website before using
Q8
comfort and cost
Obstacles
-Fees
-No hotel options
-Need more info on house before booking
Neutral
-No features stand out
Positive
-Well known and fimiliar
Austin Kim
Age: 21
Education: Business Admin
Q1
Q2
4-8 times a year
Yes
Q5
Yes
-the user experience process stands out since it is very easy to a place
-really likes the map feature
-dislikes the fact that there’s no sort by price feature
-would like clearer age limitation before booking
Q6
Expedia
-ability to book hotel
-just hotel
Q3
To find a place to sleep while traveling
Q7
the approval process for rental owners- more accountability to be hospitable and be on time to in person check ins and messages on emergences
Q4
Last summer
-nyc
-easy and fimiliar
-getting into the Airbnb in the morning at check in time
-called the airbnb owner
-7
-if the owners quicker to respond to inquiries
Q8
Price
Obstacles
-Bad communication with owners
-Lack of clear age limitation for booking
-Can't sort by price
Neutral
N/A
Positive
-Nice use of colors on interface
Iris Liu
Age: 21
Education: Business Admin + Design
Q1
Q2
Not often- maybe once a year
Not really but I look there for fun/options for future trips
Q5
Yes, since it’s relatively easy to use
No features stand out- just prices and colors of the interface is pleasing
Q6
when booking hotel
to book a hotel instead of house/apartment (airbnb doesn’t have hotels on its site)
not really- just the option to book a hotel
Q3
To see what’s available when traveling
Q7
when you search up where you want your stay to be itd be nice to see a more exact location of where you’d be staying when booking- more proximity features
Q4
Q8
money and location
Last summer
-california
-cheaper and went with many people, also wanted kitchen and laundry
-yes, no way to contact owner
- key didn’t work
-8.5
-more information and specifics on cameras and make it easier to see age limitations when booking
Obstacles
-Bad communication
-No exact location
-No ability to book hotel
Neutral
N/A
Positive
-Map feature
-Easy to use
Nancy Chen
Age: 19
Education: Undergraduate CS + Statistic
Q1
Q2
Only during long breaks
Only if I need, only use for a better price
Q5
Yes, but no, since it's relatively easy to use
I will only think about where to go before using this app, so the introduction of different scenery similar to the ads above the screen make me confused
Q6
when booking hotel
I prefer hotel than rental house because of the privacy so airbnb is never my first choice
Q3
Find place to sleep during vacation
Q7
Hope the price selection can be saved for later use, and hope to see a real room tour in some ways
Q4
Last winter break
-Hawaii
-cheaper and close to attractions
-the owner is super friendly but I'm not so outgoing
-cleaning fees are separated, annoying because many cheap options are with expensive fees
-8.6
-searching is time consuming, hope the filter can be saved and ready to use
Q8
price and location
Obstacles
-Bad price transparency
-Time consuming
-No ability to book hotel
Neutral
-Price, but I think all cleaning fees can be way cheaper
Positive
-Clean interface
-The chat is useful
Ideal HMW Persona:
X
Use several times and comfortable with phone app for personal work and travel.
Goals and needs:
-
X wants to efficiently use the search function and understanding them easily and shortly
-
He wants to see more transparent price and also sort the options by price
-
Wants to keep the user friendly interface and the function of the map
-
Wants to have a specified search function and the description of the room
Pain points:
Time consuming
Search/filter function exclude price
Hard to get the information about discount
Room’s info is still unclear
Get confused by the guide (especially the ones on scenery)
Insights & Refine statement
After the interview, I found that the main repetitive problem was the unclear price, especially the discount was not included in the filter at all, and the service charge and cleaning fee were not clearly indicated in the price. Secondly, it is very time-consuming to re-filter every time, and the screen is not detailed enough, but the information is too much.
Therefore, the problem I will solve is to enlarge the advantages of filter function, specify the functions that can be filtered, add price and discount columns to make prices more transparent, and make a shortcut for saving the filter settings to add efficiency.
Workflows:
1
This first solution focuses on immediacy and convenience, I put all the filter functions on the top of the image, so that users can easily filter the hotel options while they can see them
2
The second solution emphasizes time saving and clarity. I concentrate all filtering functions in the filter in the upper right corner of the first interface after opening the mobile app, which helps users quickly develop their own solutions and save them for future use. At the same time, the original complex information in the home page is simplified, making it clearer and easier to use.
3
The third scheme is interactive. Users can check the functions contained in the hotel according to the functions they have seen, which is similar to the shopping experience, but also better help users to make their own plans and think about whether they need a function and the importance of different functions for users
Design solutions and user testing
The final workflow I selected is the second one because of its clarity of the main function and the ease for using.
Visual Design Audit
In order to remain the overall design style (a good feature mentioned by interviewees). A visual design audit was created to record icons, colors and functions of the original Airbnb design.
Low-Fi prototype:
Low-Fi user testing 1:
Pain points:
1: There was a bit of confusion at first about how to do this, as it didn't change after entering the location and time, but after a short time of trying, found the filter function in the upper left corner
-
This means the function of my design doesn’t out
Visibility of system status: lack of providing feedback after the user finished an action.
Make the filter icon standout to hint them what to do
2: Once I open filter I have to complete all the filters before I can hit Finish to close
-
participant found it’s inconvenient to clear all the things they entered.
User control freedom: Lack of clarity of the functions, especially after they open the filter. A clear guide should be provided so that user can navigate easier.
Bright points
1: The black and white and the full screen design of the filter function make things clearer and easy to understand
-
Aesthetic and minimal design: the UIs are focusing on essentials, which supports the users’ primary goal.
Observations
When user open the first page, and after he filled out the destination of his travel, he clicked several times and don’t know what’s next step.
User testing 3:
Pain points
1: User has confusion on where to use the filter button, based on his past experiences, he customizes his own features in profile.
-
A lack of clarity in conveying the information on where to start with.
Match between the system and the real world: the design’s icon and flow doesn’t match user’s cognition. May be add guiding instructions next to the filter button. User may also save their settings into their profile and also edit them exactly in the profile, so that they can start correctly in both ways.
2: The typing function of the search button in the filter is confusing. “I thought it’s loading because it’s totally white.” “Also, it’s too narrow and hurting my eyes.”
-
Match between the system and the real world: the design’s flow doesn’t match user’s expectation. Switch this search button into another form may help solve this problem.
Bright points
1: again, user like how simple and clean the screens are (Aesthetic and minimal design)
2: Like the idea that put all options into the filter, easier and save time
-
Flexibility and efficiency of use: provides personalization, and allow for customizing their own choices.
User testing 2:
Pain points
1: The text “any week” in the first page below “Destination” looks like an ad. I thought it can’t be clicked.
-
Miss-conveying the function
Match between the system and the real world: the choice of word doesn’t perfectly match its function. Decided to change that into “date” like other apps do.
2: “There’s no feedback after I finish all the selections in the filter.” Users worry about whether their choices will work
-
Lack of positive feedback after user finishes what they supposed to do.
Visibility of system status: lack of providing feedback after the user finished an action. Check marks are added to provide joyful feedback. Maybe a flower falling down animation can be added as well.
Bright points
1: like the Edit button and room button with underlines so that I can open in both ways.
-
Flexibility and efficiency of use: shortcuts are created for edit the features.
Collection of feedbacks:
High-Fi prototype:
MBTriviA
Introduction
Background
The subway is a great convenience in our lives, especially in the busy city of Boston, but at the same time, I find that whenever we ride the subway, or at least I do, it feels like there are always new things to complain about, but there is no systematic solution. Therefore, we want to design our own plan to improve the subway system.
At the beginning, we divided into groups to look at the subway map of Boston, from which we found a lot of problems and places that might cause problems to passengers. From our own experience, we also find that we do not fully understand it. Moreover, we found that there were also problems in the system from various aspects, so we planned to make improvements.
Research & Observation
Case Studies
The first step we did was to compare the Boston subway system with other systems. We chose Universal design for rails, Shanghai Metro and London Underground for comparison, looking for their differences and advantages and disadvantages. We specifically look through these aspects: wayfinding system, public system, accessibility and safety.
(Interior photograph)
(station & wayfinding system)
Shanghai Metro
Wayfinding system:
Before get on
1:You can choose your destination from the ticket machine, the machine will automatically plan the route and tell you how to change lines
2:The mobile app（Metro） can view and enter the location at any time, and tell you how to transfer
3: Ask the front desk. There are service personnel at each line's entrance to the subway gate
After you get on
1: Listen to the arrival announcements on the subway (in English and Chinese)
2: Signs are on the wall and the opposite direction
3: Signs inside the train
（Wayfinding system）
Public space:
1: Restrooms can be find at two ends of the station
2: Seats provided
3: Vending machines (some may have shops sell snacks)
4: Seats inside the train
5: Ads in the channel
6: Small TV
7: Handles
（Public space）
Accessibility:
1 Special wheelchair “machine” (you can ask the front desk for help)
2 Special seating for disabled and pregnant women
3 Handles on side and the roof
4 Online customer service
5 Barrier-free elevator
Safety:
1 Security check before you enter (only check bags)
2 CCTV
3 Emergency open
4 Yellow line
5 Voice announcements (e.g. stand inside the yellow line, get out of the car and watch for air strikes and steps)
Once you are in a station:
-
Scan your Oyster Card and enter the train platforms
-
Inspect the map to figure out how to get to a specific station from where you are
a. If you don’t know where you are, the station name is always boldly stated in the adapted TFL logo each station will have
-
Wait at the platform of the train you want to take.
a. There are often multiple train lines that use the same tracks.
b. A voice will announce which train is currently arriving and the next train(s) of each line that are arriving next and the wait time until they come.
-
Most trains have a display screen on the front car and the signs to tell which line it is and where it’s final is.
（wayfinding system）
Observations (user research and field works):
Human Behavior on T (Orange Line - 10:45am)
-
Most people tend to keep to themselves, with their headphones on, looking at their phones
-
A person was reading a book
-
A person was on their laptop, doing work
-
A person gave up their priority seat for an elderly person
-
A person came on for one stop, started yelling, and went off the next stop
-
During this situation, mostly everyone was looking down on their phones, ignoring the person
-
Some would sneak a peek at the person
-
2 friends came on and were talking and laughing amongst themselves
-
A person was talking loudly on the phone
-
There would be people looking at the station stops sign
-
Someone was eating a sandwich
-
A person put a glove on to hold on to the pole
（people at station, orange line, BOS）
To sum up, through the study of different examples, we clearly understand the shortcomings and missing parts of MBTA. Compared with other advanced subway systems in the world, Boston's subway system needs a lot of improvement. Therefore, we also draw advantages from the above three examples. It is convenient for us to determine the problem and brainstorm feasible plans in the next step. We also used the class time to wrote down main problems MBTA has and put them into different categories.
Ideate & Brainstorm Phase
In this phase, we grouped our observations into different themes, they are: navigational issues, safety and bleakness.
At the same time, we brainstormed various forms of solutions to solve these three problems and created corresponding user scenarios to help us think and choose the direction we want to think deeply and implement the designs.
Navigational issue:
-
Crowds during peak hours
-
Identifying the correct exit and entrance (inbound and outbound)
-
Not accurate real-time information
-
Transfers (figuring out where and how to transfer between lines)
-
Ticketing systems (some stops have ticket selling machine some don’t)
-
Accessibility issues
-Knowing where to exit may be difficult for people to figure out
-People may not know where to transfer in and out
-Sometimes there’s lack of announcements about real-time information
Bleakness:
-
Dark station and tunnel
-
Roaches and rodents
-
Dirty/messy space
-
Narrow carriage
-
Inescapable smell
-
Flickering lights
-
Outdated frequently broken infrastructures
-The surroundings of the train station can be an isolating experience due to the dark station and channel
-Sometimes you’ll see trash on the station grounds, and inside the trains itself
-Sometimes the lights at the stations will flicker
Safety:
-
Free ride
-
Harassment
-
Slippery stairs
-
Old infrastructures
-
No fences on the edge of the station
-
Random yelling
-
Random people yellow on the train, which may disturb or alarm passengers
-
People standing behind the yellow line, but there will be times where people will stand on the yellow line
Scenarios
List of HMW:
How might we make the directions system more clear so that users know the route they need most efficiently?
How might we enhance the overall environment of the station, make it look cleaner and brighter and create an interactive atmosphere that doesn't bore passengers?
How might we improve the overall security of the station and eliminate all potential security hazards?
Ideal HMW Persona:
for navigating:
X:
needs the subway frequently and is comfortable with phone app.
Goals and needs:
X wants to efficiently know what’s the route he needs
He wants to have a clear guide inside the station (where’s the restroom, how to get out..)
Wants to buy the ticket/get into the station more efficiently
Wants to know when the train arrives and help him avoid the crowd
Pain points:
Time consuming
Complex ticketing system
Hard to get the information inside the station (scattered)
Get confused by the guide
Brainstormed solutions:
for bleakness:
Y:
uses the subway several times, good with phone app
Goals and needs:
Y wants to pass time quickly without forgetting the time
He wants to have a clean space
Wants the ride be more joyful but not still secure the privacy
Wants better infrastructures
Pain points:
Expensive to solve
Super boring during waiting
Dirty and old space
for safety:
Z:
sometimes uses the subway, good with phone app
Goals and needs:
Z wants to have a clear notification of all dangerous behaviors
She wants to have a shield to prevent falling
Wants to know whether if there's anyone around who might be a threat to her safety
Wants to have a safety check to prevent free ride
She wants a service for emergency that is easy to find and locate
Pain points:
Old infrastructures
Anyone can get in easily
Hard to know how to deal with emergencies immediately
PROJECT IDEA 1. AR Navigating
Sketches：
PROJECT IDEA 2. Train Game
Sketches：
Finally, after discussion, we plan to solve the problem of bleakness, which is the second plan. We design an anonymous online game to increase the sense of community, which can not only satisfy the current idea that people value personal privacy but also increase the interaction between passengers. And tell passengers how long they need to wait/ride while helping them pass the time.
Low-Fi Prototypes & Visual Style Guide
Starting point:
In class, we had a more detailed discussion and detailed design as well as the logic behind the game. We took different colors of trains to represent different teams as the starting point and came up with simple games such as Snake and Pac-Man, but replaced most of the elements with train-related ones. We also set up a leaderboard to stimulate tourists' desire to play. Finally, we came up with the famous trivia game, which met our standards of simplicity, interaction, competitiveness and real-time performance, and decided to design around this idea.
In a nutshell, the train game we designed is called MBTriviA. After the player enters the subway station, by scanning the two-dimensional code on the carriage or station to generate the game, at the same time, the GPS system will obtain the location to calculate the arrival time, the player can compete in this different time to answer the question who is the most accurate and fastest. Your own ranking can also be seen on the leaderboard.
In the subsequent refinement and improvement, we also added a series of richer design and game content such as a periodic category for each line, friend mode, waiting mode, maps that can be viewed at any time, number of achievements, leaderboards and overall rankings of different trains, and even the placement of posters and QR codes in subway stations.
Case Study: Real time & Trivia games
In the beginning, since our idea was to make a game, we chose three similar games for case study to gain inspiration and experience.
1: Trivia Crack
Trivia Crack is a mobile quiz game where players answer questions from various categories to earn points. Users can challenge friends or random opponents, spin a wheel to select categories, and compete to collect characters. It's a popular trivia game for testing knowledge and engaging in friendly competition.
Relevant Workflow: Start a game with a random opponent and play one round
Goal: Engage in a trivia game with a random opponent
Trigger: black ovular “Play” button on home screen
Tasks: Log in, press play, choose random opponent, answer questions correctly to win
Steps: sign in or create a new account with Google, email, Facebook, or Apple; press play on the home screen; choose Classic game mode; choose Random on opponent page; press play again; spin the wheel to begin game; answer questions correctly; when question is answered incorrectly, your turn will end and you will have to wait for your opponent to finish their turn in order for your second turn to begin
Synthesis
-What Works: lots of good progress indicators and visual feedback, very clear and intuitive visual hierarchy and organization, most UI components are consistent and creatively interactive
-What Doesn’t Work: the timer is very small and easy to miss
-What we can take for our own project: correct answers progress indicator, correct answer screen, consistent play button, easy navigation/user control and freedom
2: NYT Games App
The NYT Games App is a mobile application offered by The New York Times, providing access to a variety of puzzles and games such as crosswords, Wordle, and more. Users can enjoy daily challenges, track their progress, and compete with others in solving brain-teasing puzzles and challenges.
Relevant Workflow: View Leaderboard
Goal: View your position on the The Mini Crossword leaderboard
Trigger: Ribbon icon with “leaderboard” label on the right of the menu bar
Tasks: Log in, play the mini crossword, navigate to leaderboard page, add friends to your leaderboard
Synthesis
-What Works: UI components are very clear and intuitive, the visual hierarchy of the leaderboard makes sense, nothing is difficult to understand, and it is very easy to add/remove friends from your leaderboard
-What Doesn’t Work: the home screen is jumbled and requires a bit of familiarity with the games that NYT offers
-What we can take for our own project: an Add Friends to leaderboard feature, an option to change the date of the leaderboard, visual hierarchy inspiration, leaderboard icon as shown in the menu bar
3: Pokémon Go
Pokémon Go is an AR mobile game. The game allows players to explore their real-world surroundings to find, capture, battle and train Pokémon. They can visit Pokéstops (real-world landmarks) to collect items such as Poké Balls and potions.
Goal: Explore the real world, catch Pokémon, train and evolve them, gym battles, and complete tasks
Trigger: Opening the Pokémon Go app and seeing nearby Pokémon
Task: Exploring their area, capturing Pokémon, collecting (filling up Pokédex)
Bright Points: Promotes physical activity, there’s reward systems (experience points, items, achievements, etc.), collecting pokémon, community, an engaging experience
Pain Points: You can only get the full experience if you go outside and walk around, safety concerns (people, especially kids getting lost in their surroundings), possibly invading on private property
Synthesis
-What works: The reward system works well, and it encourages people to go outside more to complete some of these tasks (ex. walk 2 km)
-What doesn’t: Right from the beginning of the game, you have to create your character, and it’s laggy and the interface isn’t great. You have to use the back arrow everytime you’re done with your customization which is confusing, because click the back button when customizing a character, etc., usually means to undo everything and go back to the previous screen.
-What can I learn from Pokémon Go: The reward system and collecting systems works really well for people who enjoy games that includes collecting items or badges/achievements
Design system:
A design system is critical in this part of the process, both to ensure the consistency of our different team members' designs, and to improve our efficiency, because we can directly use the UI components designed at this stage
Site map & Workflow:
Lo-Fi prototype
Role play & User Narratives
This is a quick and tangible way to test a project idea in the early stages of the design process. A Role Play may use actors or dialogue, and props or costumes. It involves getting into character and acting out a scenario in which a user may want to use your project. This part can help us better substitute the user's perspective, simulate the process of using the app and the scene when using it, and help us perfect the details and use logic of the app. We can also fully think about the deep logic of where users use it, when they use it and why they use it, helping us to make more reasonable designs, so that we can ultimately turn our Lo-Fi into Hi-Fi. For example, our friend mode, home page and the ability to search for friends are all inspired by role play.
UX Narratives:
-
Penelope Marshall, a 20-year-old Northeastern University student, recently started her first co-op position in Seaport. Every morning, she has to take the T from Northeastern to Seaport, which takes about 30 minutes. Penelope suffers from a short attention span due to chronic TikTok use, so she gets very bored on her morning commute which puts her in a bad mood for the rest of the day. Penelope wishes there was some fun, mentally stimulating activity that she could participate in while on the train that would allow her to get a more pleasant start to the day.
-
Jason, a Northeastern student, planned to catch the Orange Line subway after classes. However, faced with a 10-minute wait for the next bus, he found himself bored. Spotting an MBTriviA QR code, he decided to pass the time by opening the app. Upon checking his profile, he discovered he was just 10 questions away from the "Answer 100 questions" achievement! Excited, he scanned the code and delved into the history category. Surprised by some new facts, like the Isabella Museum being a cold case, Jason finished the questions just as the train arrived. He felt time had flown by and was pleased with the new knowledge gained.
-
Richard and his classmate Alexander get on the orange line at forest hill, but with 12 minutes to go before departure time, they don't know what to talk about. When the vibe started to become super embarrassed, they noticed the QR code for MBTriviA in the carriage, felt fresh and scanned it to find out and pass the time. They plan to compete to see who has the most knowledge, and the map at the top of the screen can easily tell them the time.
User Scenarios:
-
You are a 20-year-old Northeastern student who just started their first co-op position in Seaport. You suffer from a short attention span due to chronic TikTok use, so you get bored easily on your 30-minute commute on the T from Northeastern to Seaport. This puts you in an irritable mood (not a good way to start your day), so you must find a mentally stimulating activity to engage in during your commute to have a more pleasant and productive rest of your day.
-
You are a college student in Boston traveling with your classmate Alexander to downtown Boston to interview someone together for a project. As you enter the Forest Hills station to get on the orange line, you notice there is a 12-minute wait for the next train. Since you and Alexander are not very close, the conversation you have while waiting for the train is a bit awkward. Find some activity for you and Alexander to engage in to initiate a bonding experience or just eliminate some of the awkwardness.
User testing1:
pain points:
1: It’s a bit complex and unclear to put a single start button at the starting page since our game has two modes, if the users use the app for the first time, they don’t have a chance to know there are two modes until they start to play.
- This means the function of our design doesn’t stand out for new users
Flexibility and efficiency of use: the time we let the users select the game modes is not efficient and not friendly to new users since it’s not directly on the homepage.
User testing 2:
Solution: switch the start game button into two modes, so that users can know there’s two modes and select what they want immediately
Bright points:
1: The colorful screen color and the train-like loading icon definitely makes the journey more joyful and creates a casual vibe.
- Aesthetic and minimal design: the choice of colors make users willing to play and increase favorability
2: Icons for category and bottom are creative and easy to understand.
- Match Between System and the Real World: the icons conform to users' traditional perceptions
Observations: when the user comes to the home page, he fills out the destination quickly but it takes him a while to decide what to do next.
Paint Points
1: “It’s a bit confused about the rules, I know how long I’ll arrive but I’m not so sure this time means the time I have to answer questions until I start playing”
- This means the function of our design isn’t explained clearly to the user and lacks essential information.
Visibility of system status: user doesn’t know the rules for the game immediately, the homepage doesn’t have the appropriate title and info that explains contents.
2: The icon of the scores is unclear, “10/6 seems like I got 10 marks out of 6 questions total, makes me confused”
- This means the content of our screen conveys wrong information to users
Visibility of system status & Match Between System and the Real World: user doesn’t know the meaning of the score icon and the solution he provides means this score icon doesn’t match his own experience of playing a game.
User testing 3:
Solution: add a big “i” button on the homepage or a small “?” mark next to the start/ select mode button so that they can check rules. Add explanations of the rules and small tips on the loading page.
Solution (given by user): Maybe add two avatars at the top of the screen, one for yourself and one for your opponent, and each correct answer increases the number of correct answers and combos
Bright points:
1: The elements on the screen are designed to be coherent and harmonious
- Consistency and Standards: The use of UI and colors on the screen does not cause discomfort to the user or interfere with the delivery of information
Observation: The user uses the app in a coherent way, but he thinks that the waiting time is a little long in the loading interface. Maybe some elements about the description of rules can be added to increase the efficiency (solution to first pain point)
pain points:
1: “I like the map but I also prefer to see my destination on the screen, not only texts but icons. And if I'm on the orange line, the other lines’ color can be a little lighter so I can take a quick look and get back into the game.”
- This means we are missing some info on the screen
Visibility of system status: users don’t know the destination on the map, they only know the time left. The color also causes some understanding problems.
2: There’s no warning messages when the user tries to quit or misclick on the exit button.
- This means we are missing functions when users want to undo an action/option.
Error prevention & Help Users Recognize, Diagnose, and Recover from Errors: there’s literally NO signs for warning users that they are doing something that may cause errors.
User testing 4:
Solution: Increase the transparency of other routes and mark the end points on the map
Solution: A pop-up that tells the player that they are quitting/spending too much time on the map when they want to quit, and that they will not be punished if they quit.
Bright points
1: The map is easy to use and understand.
- Flexibility and Efficiency of Use & Match Between System and the Real World: Users can slide down to quickly open the map, and the map matches what they often use in their lives.
Observations: The user expressed his concern about misclick, but his overall experience was smooth
painpoints
1: “For me personally, as a gamer, I want a customized setting that can automatically skip/randomly select an option after I hesitate or think about it for how long to ensure my scoring efficiency.”
- This means that users are not fully in charge of how the app is used, and their needs are not being met.
User control and freedom: Users are not able to customize the features they need and have no freedom to self-edit/limit the time spent on individual questions
Solution: add a setting in the profile for users to set how much time they want to spend on a problem, after reaching the time, they skip/randomly select an option.
Bright points:
1: “I really like the idea that the time is based on your own journey, it adds a sense of competition and it’s also very attractive because it’s new and innovative.”
-user control and freedom: while we don't offer any customization in the game, the overall game logic is based on each player's unique scenario.
Observation: This user is interested in the mechanics of the game, and thinking in terms of how to win gives us a richer perspective
High-Fi prototype:
