.webp)
Discovery & Research
Brief Analysis
The founder of Accom.ai personally experienced the challenge of struggling to find a specific accommodation. There is a lack of supportive information and user controls to help traveling couples find suitable getaways in France.
Competitors
Airbnb, Booking.com, Expedia
Target Audience
Couples in their 40s with families seeking unique accommodations in France.
Objective & Constraints
The goal was to design a new web application with key sections: Homepage, Search/Booking, My Bookings, Profile Settings, and Authentication. Given this was version 1, I had to be practical and realistic, considering limited listings (as it was a launch), tight timelines, and available resources.
Ideation
Creating a sitemap helped me ensure I fully understood the brief and had a clear picture of the web app. Guided by the job stories given in the brief, I mapped out the structure, including the key pages and how they connect. From this structure, I then created a user flow, representing the paths users take to make a booking based on the job stories. For both I used Figjam.
Design
Wireframes
To create the wireframes in Whimsical, I looked at the sitemap, the user flow, and checked how competitors were doing things. It gave me an idea of what to expect from an accommodation booking platform, and some inspiration.
Mood board (Lean Branding)
For the visual design, I focused on the brand’s identity I wanted to give, the values, and the audience. Here is what I chose:
We are: Authentic, Reliable, Inspiring.
We are not: Inconsiderate, Mediocre, Untrustworthy.
Target audience: Couples in their 40s with families in France who struggle to find suitable accommodations.
I chose dark teal because it combines blue (trust, reliability) and green (growth, balance, authenticity), creating a calm and confident feel.
I created two color palettes:
- Primary palette – Used for navigation, buttons, forms, and key actions.
- Grey palette – Used for text and backgrounds.
Mockups
I created high-fidelity mock-ups with visual design in mind. You can see several pages here.
.png)
Test
Usability Testing
To achieve this, I conducted moderated, in-person usability tests, where participants completed three key tasks while I observed and took notes, gathering insights to improve the design.
Iterations
- Pricing clarity: Displayed both total price and per night price to avoid confusion.
- Activity icon update: Changed the generic person icon to a hiking icon (backpack & stick) for better clarity.
- Filter hierarchy: Adjusted the order from “Occasion, Price, Style, Activities available” to “Occasion, Style, Price, Activities available” as users associated Style with Occasion, which influenced price.
Prototype
