Travel Recommendations Website Re-Design
My team was brought on to assist a client apply the UX research and design process to their existing prototype for an upcoming travel recommendations websites. Our task was to evaluate the current designs and provide new design with user needs in mind. Our end goal was to provide a prototype for an MVP that could be sent off to developers in the near future.
Disclaimer: As this is an ongoing project many of the designs possess proprietary information. With permission from my client, I have been allowed to share some of the preliminary mid and high fidelity designs for my portfolio. It’s important to note these designs have been adjusted and tweaked to protect sensitive and proprietary materials. As a result, much of the design process will be omitted but I will still share as much as I can. This page will only include work done by me. While there were 6 designers on the team, due to a range of commitment overlaps, I was one of a few primary designers. I was primarily responsible for the design aspect, including creating wireframes, a mid fidelity and high fidelity prototype, and a standardised design library.
Timeframe: 3 weeks
Team: 6 Designers + 1 Product Manager
Tools: Figma, Excel, Trello
My responsibilities:
Design and Interaction Lead
UI Design Lead
Prototyping Lead
Discovery
While our client had already told use there was a solid use case for their concept, we wanted to conduct our own research to validate the use case. Along with a few other team members, I designed a survey in order to gauge the travel habits of those who enjoy to travel. Our survey included questions surrounding what people prioritized when choosing destinations, how people planned their trips, and what people generally enjoyed to do when travelling. While the results from this survey cannot be shared, this portion of discovery was crucial in helping us identify which features needed to be prioritized in our design.
After our survey, we also conducted a contextual inquiry into the current prototype. We identified common tasks that could be performed in the prototype and asked participants to try and complete them. The results from these tests told use several things:
People were confused by the prototype as it wasn’t clear how it’s functions differentiated from the competition
The design was difficult to understand and labels needed to be more clear as to what they were for
Overall, the design overhaul was needed to introduce a most consistent and cohesive design language with a more minimalist UI.
Mid Fidelity Wireframes
The existing prototype was clunky, hard to navigate, and inconsistent with no sense of cohesive style. I sought to update the UI with a cleaner more modern look with the ultimate goal of increasing the intuitiveness of the design while reducing cognitive load. Unfortunately I cannot provide much more context for these designs at this moment, other than included below are designs for a landing page, results page, restaurant page and a travel planner.
Design Library
As lead designer, I was responsible for creating a design library for my team that would be used to help standardize our design practices as the team moved into high-fidelity. The original designs had inconsistent styling and typography. This design library was intended to help build consistency throughout the design. I designed the design system itself to be modular and easy to edit as the project matured. This version of the design library had been edited for public viewing.
It was my intention for this design library to be modular and easily edited. I utilized Figma’s autolayout function so whoever was making changes could easily remove or make editions to any columns without risk of items becoming unorganized. My hope with this design library is that as the project matures, this would slowly become a design system that future designers could turn to in order to maintain consistency even after I am no longer involved with the project.
High Fidelity Wireframes
After testing out mid-fidelity prototype it was apparent that we had succeeded in updating the UI and design of the website to be more clear, simple and clean. There was still some confusion with some of the writing and language used. While this meant that we could keep the design for high-fidelity relatively similar, it did mean considering how we might edit the copy to be more clear and leave less room for interpretation from our users. Once we arrived at a solution I, along with another team member, adapted the designs into high-fidelity using the design library that I created.
Summary and Reflective Statement
While there is still much work to be done with this project, I believe my team and I were successful in showing the value of the UX process to the client. We were able to demonstrate the value in UX research for validating the use case for this particular travel website concept - something that had been only superficially done by the client through a limited and homogenous population taken from within the client’s personal network. I was able to successfully update the design and UI of the website to address some of the pain points found through our contextual inquiry by streamlining and simplifying the design to present a more consistent style and language. By creating and establishing a design library that conveys said design style, I hope to lay the foundation of consistency and continuity for this project moving forward, even after I am no longer involved in the project.
While regretfully I have only been able to showcase a limited amount of work done for this project, I am thankful for this experience as it pushed me to understand the impact that creating a design library early on positively impacted the efficiency at which we were able to create our high-fidelity designs after the fact. This project was also a challenge and lesson in understanding client needs and designing a product that addressed both the goals of the client, as well as considering the needs of the users who would be using this product. I hope that in the future this case study will be able to become a more comprehensive look at this project as this was an experience that required me to go above and beyond the expectations of myself as a team member in a group of 5 and take one more tasks than what were originally required of me.