Oyster is a travel guide that fits in your pocket.
Research, plan and organise your trip all in one place, with trusted recommendation, user’s reviews, destination information, inspiration and a trip planner. All in one app so the world can really be your Oyster!
It is a concept app and a passion project that I was working on to practice various UX/UI skills.
I like to plan travels, trips and ideas of itineraries, whether I’m actually going or not. I struggled with finding good recommendations and then keeping notes of them. It was scattered across Google docs, Maps, saved items on Instagram etc. I started wondering if there was a better way.
So was it just me or could a solution to my problem could help others too?
I reached out to some friends with a survey to understand their travel habits, talked to a few of them, to see what kind of research they were doing before going on a trip, and how they kept record of it.
From the survey responses, I made a recap of their behaviours, pain points and what these potential users were looking for when planning travels. I used all of this to determine opportunities and solutions that a product could help with.
It appeared that all of the respondents were planning their travels beforehand in some kind of way, looking for trusted recommendations and keeping notes in their phones or some kind of device. They also traveled with friends and/or family mostly, so I could also find a way to share travel plans between users.
After gathering these insights, I decided that I could build an app: a digital travel guide that would provide trusted recommendations, itineraries suggestions for those who don’t like to plan everything themselves, coupled with a trip planner where you could save those recommendations.
I also used the responses to create 3 personas, to regroup the users’ into main profiles and better understand their needs and pain points and build a solution from these.
Using the personas and the survey analysis, I was able to flesh out the main functionalities of the app and then put them together in a user flow that explains how a user would use the app to plan a trip.
Users would be able to :
And to better see the pages and screens I would need in the end, I regrouped all the functionalities into a site map.
Using the user flow and site map, I was able to build the wireframes, to better flesh out what the app would look like, how the content fit and how the functionalities work together. Here are some wireframes examples that I designed:
I used the wireframes to do usability testing as well. I asked a few users to perform some specific tasks, such as « Show me how you would plan a trip to Ireland » or ask them to comment on whether what they thought was unclear to them in the interface or in terms of functionalities.
Using notes on what they commented on, I rephrased titles, simplified some content and reworked some of the pages. For example:
It was valuable feedback to get at the wireframe stage so I could rework the structure of the pages more easily.
The visual design had to induce a feeling of escape, freedom and simplicity. The logo is minimalist, simple and typeface based, with a swirl replacing the O. It symbolises a body of water in reference of the name Oyster, and the fact that our planet is majorly composed of water. I opened the lines of the O and the R to make it lighter, and made the space between letters wider to accentuate the sense of escapism, openness and possibility.
The colour palette is based on the colour of the sky and water with blue being the main colour. Yellow and orange are the accents, representing shades of a sunset. I chose 2 typefaces: a serif yet modern one to emulate an old-school printed travel guide, and a sans-serif one for longer paragraph for better on-screen readability.
And for the screens I wanted to keep it simple and light to again induce the feeling of escapism, but also to put the importance on the pictures, since travellers (and potential users interviewed) want to see the most beautiful places.
I started by designing the Log in screen, the Homepage and the screens relative to the research part, enough to build a prototype and be able to do usability testing before going any further.
After creating the clickable protoype, I designed a usability test and did live interviews with potential users to gain their feedback. The test included :
After conducting a few usability interviews, I made a summary of some of the issues users encountered while using the prototype and how they could be addressed.
For each of them, I estimated how impactful the changes would be in the final product, as well as the amount of work they would take. I used these two factors to prioritize what to work on next to improve the prototype.
Below are some of the improvements made on the prototype to alleviate some of the users’ pain points:
Although it is a passion project and not a shipped product, I used this project to practice various UX skills to apply them on an existing problem space.
I practiced creating user flows and site maps, as well as designing the UI and visual style, but I especially wanted to take this project as an opportunity to talk to real users (in survey or during usability interviews) to gain insights and feedback and integrate these to my work, and create a user-centric product that wasn't just based on my personal experience.