Curated
Stays
Project Overview
Curated Stays is designed for travelers who want an alternative to staying in a hotel. The feel and comfort of a home give users a more welcoming feel to gain the full lodging experience. With listed accommodations and personal touches to best customize a memorable trip users can get an optimal experience.
Tools
Figma
Miro
Airtable + Excel
Notion
Timeline
4 Weeks
Diving into the market
Competitive analysis, market research, and user interviews were the most effective methods for gathering user information and market information. It was crucial for Curated Stays to understand what made competing brands successful in retaining users and to uncover user motivations. This insight helped prioritize features and structure the content layout.
The interview findings
1. The rental pricing comparison feature allows users to compare rental stay options for the best value.
2. Easy, intuitive interactions and images to showrooms and area spaces (with titles of what image is being shown). Displaying the names of areas lets users better understand the layout.
3. A precise, concise date picker needs to be quickly and readily accessible; users often change dates when booking a vacation.
4. Participants want an easy way to identify the message inbox with notifications; users can quickly check and respond to messages to better prepare for their stay.
Functionality comes first
During the research phase, I compiled a list of features from most important to least important. Not all features were included in the design; only the essential ones were included for prototyping and user flow. One exciting discovery was the potential for a romance feature for couples who want a more intimate getaway. Since most participants traveled with their significant others, offering a more personalized experience to enhance their travel could help them make the most of their trip.
Romance in the air
The romance feature, located in the 'things to do' modal, is not part of the user flow but is shown in the final design. Participants fondly reminisce, sharing their fun experiences. In addition, I had not seen any similar feature in any of the famous peer-to-peer lodging sites. A simple yet promising feature will separate Curated Stays from the pack. As I continuously revise the design and make a more complete interface, the next step would be to create a separate user flow, focusing solely on booking a romantic trip.
Sketching the user flow
I created sketches that serve as low-fidelity wireframes, concentrating on content layout. I deliberately included only essential information during this iterative process, prioritizing the mobile user experience by adopting a mobile-first approach. The labeled elements indicate the displayed content and its order, showcasing hierarchy and importance. Additionally, I carefully considered spacing and alignment.
Micro frames
Combining the user flow and wireframe saved time and made the process more efficient. It also streamlined the prototyping process. Conducting two rounds of usability testing made it easier for participants to test the content structure. Removing the visuals helped users focus solely on the information necessary to complete the task.
User flow
Micro frames are great, but adding a user flow visual makes it easier to identify the goal that needs to be accomplished.
Ideate & prototype
After creating the best and most optimal layout, it was time to infuse the design with creativity and passion. Drawing inspiration from Dribbble and similar peer-to-peer websites, I finalized the UI design. I designed five screens and chose the option that made it easy to distinguish and recognize text, color, imagery, and CTAs.
I initially wanted a light theme to create a clean yet exciting interface. The plan was to avoid overwhelming the users with too many colors. The booking experience can be overwhelming and stressful as it's a process that takes time. The selected dark theme works well because the yellow, which wasn't too saturated, evoked happiness and demanded attention. The dark, navy-like background made the text and colors stand out, but I chose the light theme. It was more appropriate and suited for a travel booking app. Competing apps also had a light theme, and considering that a light theme presents better visual performance for ther assignment.
Choosing a date
During the research phase, it was clear that there was a recurring need for the ability to easily and quickly change trip dates. Often, the dates are not firmly set when coordinating with fellow travelers. Users need to coordinate their schedules and make adjustments. The date call-to-action (CTA) is visible as users scroll through content. The date picker interface design displays the selected vacation dates, and users can also clear the date range with a single action rather than multiple taps.
Style Tile
There was no need for an elaborate design system or even a style guide. I chose something more simple and suitable for Curated Stays due to time constraints, project simplicity, and being the solo designer for the project. The elements that make up this deliverable are visuals that will be used heavily throughout the design.
Prototyping & testing
I conducted two rounds of usability testing to better understand the interface's issues. With a strong foundation, improvements can be implemented swiftly. The participants in the testing helped identify which elements or variations worked best so that I could make the necessary changes. The first round of testing was done using micro frames, which focused on identifying any flaws and gaps in the logic.
During the second round of testing, I used the final product. Unfortunately, I couldn't use my preferred precise analytical tool, Maze, which collects actionable insights to create a better user experience. One change we made after considering which content should be visible was extending the length of the page. Users felt they had more control and options, so they took advantage and explored more.
Insights and Issues
1. The absence of the Maze tool meant I had to discover how users interacted with the interface visually. Lacking experience in usability testing may have hindered the revision process
2. Testing on my mobile device meant that I had to take notes, and in that case, I missed many subtle details
3. A share and download option on the confirmation page was added so users could share trip details with those they were traveling with
4. The globe located in the header was confusing; users continued to ask what was its purpose
Affinity map
Time to get things tested
I made numerous iterations while testing both low-fidelity and high-fidelity prototypes. I rounded corners, changed background colors, and made other adjustments. I removed a few counterproductive screens that didn't fit into the user flow. The goal of the two rounds of testing was to understand how the testers interpreted the design and how they proceeded to the next step to accomplish the task.
First-round testing
After the initial round of testing and observation, I made a few necessary aesthetic changes. Although the changes were insignificant, the subtle corrections had a more powerful visual effect.
First change
The initial bottom navigation was white and placed above the calendar/journal entry section so users could add a new entry for the current day. Both sections were white, blending and appearing as one. Despite having lines to divide the two, the distinction was not clear enough. To create a better contrast between the two sections, I changed the color of the bottom navigation bar to a darker shade (a few shades darker than the top navigation bar). The transition from light to dark color for the bottom bar helps users associate it with navigation, as it is similar in color to the top bar.
First change
The original bottom navigation was white and placed above the calendar/journal entry section so users could add a new entry for the current day. Both sections were white, blending and appearing as one. Despite having lines to divide the two, the distinction was not clear enough. To create a better contrast between the two sections, I changed the color of the bottom navigation bar to a darker shade (a few shades darker than the top navigation bar). The transition from light to dark color for the bottom bar helps users associate it with navigation, as it is similar in color to the top bar.
Second round testing
After conducting the second round of testing on a high-fidelity prototype, I made some changes based on the feedback from the first round of usability testing. I noticed consistent struggles and confusion in some flow regions, so I removed the screen that prompted users to sync their bank accounts. Many participants expressed hesitation and mentioned that they would be nervous to do so. Their main concern was security, as they were distrustful due to the app's lack of familiarity and notoriety.
PROJECT REFLECTION
Next steps
Like most projects, lack of time prevents the design from fully flourishing. There is always room for improvement, design polishing, and features for users to love. If given a few more weeks, I would like to:
I have incorporated a money penalizing feature into the design as part of a flow. Initially, I intended to include this feature as one of two or three flows in the overall design. However, after conducting several rounds of testing, potential users appeared disinterested or skeptical about being penalized for engaging in their bad habits. As a result, I decided to remove the screen where users would sync their bank accounts to the app. I soon realized that if users were provided with information on why they should sync their banking information, they would be more inclined to do so
In the research phase, I made productive discoveries about the needs of our target audience, which will contribute to the design's outcome. It would be beneficial to learn more about the psychology and behavior of how habits are formed and how difficult they are to erase. Breaking down the fundamental parts of a habit loop will allow us to better tailor the user experience to their progress during the journey. It's important to note that habits formed from distress are more powerful and deeply rooted than habits formed from boredom.
