Hotelr is an app that helps users share a hotel room and save money.
PLATFORM: iOS
TEAM: 6 Designers, 2 Developers, 2 Founders
ROLE: Design Lead
I was responsible for the overall design and team management. I also independently contributed to each design phase.
Hotelr App
RESEARCH
We performed different research methods to learn:
-
WHO - Which users are most comfortable with sharing of their hotel room?
-
WHAT - What do users need to know about their potential roommates?
-
HOW - What makes users feel safe while sharing their space?
Whiteboarding: This helped us envision potential scenarios users may find themselves in and motivations they may have. It served as a guide to the questions we asked in the next steps.
Different research methods and their findings:
Prototype Testing: We performed user testing on existing alpha prototype to gather more insights.
Research
Findings
Thematic Insights
Effects on Design
TASK FLOW
We brainstormed individual task flows for searching hotels, selecting a room and matching users. We then discussed how each of these tasks would be related and the main flow a user would take.
WIREFRAME
The team performed 6 rounds of a design practice referred to as "Crazy 6’s" for the following screens: Onboarding, Home screen, Hotels view, User match view, User profile, and Reservations.
"Diverge and Converge" is a key part of "Crazy 6's" that consists of:
-
6 quick idea sketches, each in 1 minute.
-
Presentations and discussions.
-
Final screens sketched based on feedback.
-
Silent voting and discussion
We rapidly converted our ideas from the design studio exercise into low fidelity mockups and created a prototype in Marvel for testing. We gave users a typical task to perform using the app and observed how users interacted with the app. We looked for pain-points as well as things that worked well, and iterated our screens based on the user testings.
VISUAL DESIGN
CREATING STYLE GUIDE:
-
Each member of the team created a Style Tile for initial ideation.
-
Style Tiles included: color, typography, icon style, and a example of a hi-fi mockup for reference
-
Discussed and fused elements to collectively designed 4 main style tiles
-
What we ended up picking: dark, soft colors for comfort; because people tend to book hotels at
night; bright orange accent to mirror Hotelr’s logo color and to make the app sleek and appeal to
the younger target audience.
-
The team then followed this style guide along with the specified grid and layout settings for
the high-fi mockups.
INITIAL STYLE TILE
Hotelr Style Tile
STYLE GUIDE
High-Fi screens: While designing the high-fi screens for the app, I routinely checked the designs on the phone. I cross-checked the sizes of icons and text were appropriate as well as the color contrast and the visual look of the app on the phone. I have presented below few of the screens from the app that I had designed.
After creating round one we held design critique sessions with the team to challenge ourselves to create better designs. We iterated on our screens based on the feedback. We then did another round 2 of design critique and designed version 2 before proceeding to user testing.
User Testing Feedback for the screens below:
User 1
" I look for the map view to see where the hotel is located. Do you have that feature?"
User 2
"I need to read reviews of the hotel first ...... only then can I proceed"
User 3
"Wow, glad you have the nearby landmark mentioned. Thats so helpful!"
ITERATIONS
Version 1 - Based on Wireframe & Style Guide
Version 2 - Based on Design Critique Feedback
Version 3 / Final - Based on User Testing Feedback
SCREEN 1
SCREEN 2
VIEW OTHER PROJECTS
