Canopy & Stars
About
The team at Canopy & Stars were looking to revamp their current search feature. Their objective was to create a new version, utilising their existing design system, which would provide an exceptional experience and cater to the user’s expectations.
My Role
For this UI task, I was asked to design an improved search feature and deliver a presentation on the steps I would take as part of the design process.
Company
Canopy & Stars
Team
Solo UI task
Duration
10 hours
Tools used
Adobe XD, Figma, Illustrator, Photoshop
User requirements
“Our users have told us that location isn’t hugely important to them but the type of place they stay in is.”
Challenge
Given the 10 hour limit assigned to the task, I needed to work efficiently to create a superior search feature that would enable users to search by ‘types of places’ available.
Design solutions
Flexibility and user control
The final prototype empowers the user by putting them in control. It gives the user flexibility to choose whether to search by location or by ‘types of places’.
The ‘I’m flexible’ button provides a useful option for users who are yet to decide where they want to stay or what type of accommodation they want to stay in but know which dates they will be travelling on.
UI improvements
Given the limited data and user insight provided for this project, I focused heavily on making UI improvements in line with design and accessibility best practice. Visual affordances (such as drop shadows around selected text fields) were added to improve the intuitiveness of the search tool.
The ‘arrival date’ calendar on the existing site was replaced with a more conventional ‘check-in and check-out’ selection that users are likely to be more familiar with. Unlike the previous version, this ensures that the options shown on the results screen will all be available during the selected date range.
Process
1. Research
Reviewing the existing feature
I started by analysing the effectiveness of the existing search feature against UX heuristics, competitor websites, the company’s KPIs and, most importantly, user requirements (uncovered during Canopy & Star’s existing user research).
The search feature wasn’t as intuitive as it could be and was falling behind on industry conventions. It lacked several necessary features (e.g. the option to enter the number of guests travelling) and was preventing users from searching using non-locational search terms among other UI downfalls.
By comparison, competitors like Airbnb were offering a more comprehensive search tool that provides the option to click ‘I’m flexible’ for location so they can browse accommodation all over the world.
2. Ideation
Low-fi designs
Utilising findings from my initial research and competitor analysis, I sketched out potential solutions using pen and paper. Through an iterative process, these sketches were reviewed, refined and converted to low-fi designs on Adobe XD.
User flows
At this stage, potential user flows were also considered and used to pinpoint steps in the user journey that could be improved.
3. Prototype, develop and deliver
High-fidelity prototypes
Having considered possible user flows and selected the most effective design, I developed a higher fidelity prototype for mobile and desktop. The brand elements (colour scheme, typography and logo) were incorporated into the design and interactions between each screen were added with subtle transitions.
I made sure to document my design decisions so wireframes could be created and handed over to the developers.
Next steps
If this project was commissioned, the next steps would involve presenting the final prototype to key stakeholders to achieve buy-in. I would then work with the developers to build and launch the search feature before deploying to beta, conducting A/B tests and making ongoing improvements. The success of the project could then be measures by analysing Hotjar and Analytics results against Canopy & Stars’ KPIs.
Next steps
If this project was commissioned, the next steps would involve presenting the final prototype to key stakeholders to achieve buy-in. I would then work with the developers to build and launch the search feature before deploying to beta, conducting A/B tests and making ongoing improvements. The success of the project could then be measures by analysing Hotjar and Analytics results against Canopy & Stars’ KPIs.