Wander
Tools: Figma, ClickUp, Pen & Paper
Roles: Ali Hacker and Phan Su - UI/UX Design students, Melanie Okamuro - Product Designer and Owner of Wander
Responsibilities: Research, User Testing, UI/UX Design (sketches + medium-fi mockups)
Project Context: Web application 4 ½ week project, 40+ hours, June - July
What is Wander?
Wander is a trip productivity tool to make collaborating on your next adventure easy and fun! This product focuses on the pre-travel planning phase to create a robust tool for people to use to centralize their travel research and collaborate with others. The goal is to position Wander as the leading de facto source in the travel industry.
The challenges we faced
Our challenge was to get users to successfully interact with the cards, the map, and the itinerary features within the Wander website. Our task was to redesign the look and feel of the overall website to make it more user-friendly and aesthetically pleasing. Throughout our design process, we created multiple iterations along with 2 rounds of usability testing.
Our Final Screens
The Playground
After researching for the trip, the user can add the destinations to
create cards that spotlight each place with additional information.The playground creates a collaborative space to plan fun adventures
with friends and family.
The Map
Users can open up the map to see where each location is and
then minimize it when they’re done.Pins on the map will help users see the distances between
locations easier.
The Itinerary
Users can drag each location to the calendar to create
an itinerary.They also have the option to view more information about each location on the calendar by clicking on it
for a modal to pop up.
The planning and scoping for the project...
Before we got to work, we created a scope and timeline detailing the success
criteria, deliverables and tasks, and milestones of the project.
This was our plan:
Project Plan and Research Plan - June 24th
Research Synthesis Report - June 29th & July 8th
Lo-Fi Sketches of Flows - July 6th
Mid Fi to Hi-Fi Wireframes of Flows - July 6th
This was the client’s previous version of Wander
Reviewing the Research
Initial testing with ideal users on the current site
Once we were up to speed with the Product Requirements Document of Wander and understood which type of users we were solving for, we conducted our first round of usability testing on the current website prototype with two users. One user fits the planner persona and the other fits the follower persona.
The goal of this testing session was to find out how participants would feel about the overall usability and look of each component of the website (cards, map, and calendar).
Affinity Mapping
After we conducted usability testing, we synthesized our findings by creating an affinity map in order to categorize the qualitative data so that we could figure out what the main issues were.
The main issues we found after testing
There were three main issues that we discovered through our synthesis:
The cards section was difficult to figure out and was confusing to use overall.
It was hard to distinguish what categories are in the calendar when there are numerous cards.
The search bar feature should be consistent within the entire website.
We then made recommendations to solve these issues and proposed them to our client for the design process.
From Pencil to Pixels
To kick off the design process, we each worked on sketches separately and then combined our ideas to create a final result. Exploring many ideas, we narrowed it down to one solid concept that we took into consideration the feedback we received from usability testing.
We brought these sketches to life on Figma by turning them into medium-fidelity wireframes.
When we presented these wireframes to the client, she wanted to emphasize the cards section on the landing page more and figure out a way for users to see the locations on a map when making edits to their itinerary. The client came up with some layouts of her own for us to incorporate into our existing designs.
The resulting changes we made included
Expanding the cards section to fill up the entire landing page
Having the option for users to open and close the map to view locations
Adding a map to the itinerary page for users to view locations when planning
Taking the New Prototype for a Spin
After implementing the second round of changes to our wireframes, we conducted a second round of usability testing. This time around, we noticed great feedback with the iterated designs. There were significantly more positive insights than pain points from the users compared to the first round of testing, so we wanted to highlight them.
Our main insights from the second round of testing
There were three main insights we discovered through our second round of synthesis:
Overall, users were able to successfully navigate and utilize the card section of the website and enjoyed the functions within it.
The itinerary section was well received by the users. They understood drag and drop within the calendar.
In general, the users thought the website was clean and intuitive.
The Finished Product So Far...
How we helped the client in the end
Overall, we received great feedback from our second round of testers. There weren’t many pain points this round of testing so we decided to record the user's insights on the overall website.
Next steps for the client:
Create subcategories within the left tab.
Refine the calendar to have a little more information.
Have a group chat function to further emphasize the collaboration aspect of the website.
The Lessons We Learned
This was our first time working with a real-world UI/UX Design client with set deadlines and expectations that needed to be met. We got the choice of working on the mobile app or the website platform; we decided to go with the website to challenge ourselves and widen our UI/UX design skills.
Delegating taught us how to divvy up the responsibilities between the three of us and help clearly identify the constraints and boundaries within the project.
We were flexible and adaptable with each other due to our three different time zones in order to appropriately schedule and maximize our working hours.