Travel products and services have needed to find ways to circumvent the effects of COVID-19, and for HipHerd's team, it meant creating a tool solely for the pandemic and shifting their focus to local trips and "staycations."
HipHerd is a travel app that makes planning for travel easier, getting rid of the spreadsheet and making sure you don't miss out on spots that best interest you.
Role: UX/UI/Visual design consultant
FleeCOVID is its companion app that shows you realtime COVID test results by state to help you plan local travel more safely.
Role: Product designer, UX/UI/Visual design consultant
Because of COVID-19, traveling is severely different from what we're used to, and the pandemic has created more problems in the travel space than those that already existed. Travel products and services have needed to find ways to circumvent the effects of COVID-19, and for HipHerd's team, it meant creating a tool solely for the pandemic and shifting their focus to local trips and "staycations."
HipHerd is co-founded by one of my favorite people in the world, Kelvin Nguyen. I have seen this idea of his grow from its infancy to the final product that it is today and have been rooting for its success at every step of the way. It has been a privilege to contribute to this product and to be able to say that I have supported it in every way possible.
HipHerd - Travel planner for your next trip or adventure
The existing problem in the travel space comes before the actual traveling - the planning. Planning a trip can be daunting and overwhelming, and whether you're using a pen and paper or a digital spreadsheet, you're juggling so many tools. When planning with others, scheduling and notes get jumbled. When you do you use an existing planning tool, you get recommendations for locations you're not even interested in and completely miss the ones that you are.
HipHerd aims to solve these problems by using machine learning to make it simple to plan for your perfect trip in minutes!
With HipHerd, you create shareable, embeddable, and collaborative boards with the locations you have visited or plan to visit. See someone's past trip and want to do the exact same things they did? Duplicate the board and it's yours now too! The ultimate tool for your entire travel collection, for past, present, and future trips.
"...but everything changed when the COVID-19 attacked."
After years of fine tuning and iterating the product, 2020 was supposed to be the year for HipHerd's public release. However, the pandemic put that to a halt. Because HipHerd's team wanted to remain on a consistent timeline, they needed to find a way to integrate their product while the world was in its current state.
The team knew that people wanted to leave their homes (because they did too) and wanted to encourage them to do it safely. However, they didn't want to shift their main product to being a standalone COVID-related product. Instead, they wanted to create a companion product to serve as a marketing/SEO funnel to HipHerd. So they posed the question: what is to be expected if a user visits a website about traveling during a pandemic and how could users utilize HipHerd at the same time?
FleeCOVID - Travel responsibly during COVID-19
Quarantine, isolation, and being idle are definitely not most of our natural states. The pandemic has forced us indoors and we have been itching to get out. For those who just can't stay home for prolonged periods of time, FleeCOVID gives them all the information they need in order to travel safely in the United States and even recommends safe staycations for you to take!
I designed an experience similar to a marketplace: the user visits the website looking for COVID-19-safe travel destinations and plans, are able to browse and explore these results, and clicking the results directs them to trip boards on HipHerd.
I know this user flow is a well known process because Facebook uses a similar one for Instagram shopping: an ad will show a product, the user clicks the product for more information or to purchase, and the user is then redirected to the shop's website.
Comparable to Instagram, this website needed to exist on its own as well. The rest of the website was built out to be an information hub for all COVID-19 news in the United States. The user can see the number of cases each state has and what its rules were surrounding mask use.
After releasing to the public by posting on Product Hunt and announcing on LinkedIn, we received constructive feedback from users who wanted to see more information, like where it is relatively safer to travel compared to other states, and to be able to filter out states based on their quarantine and mask rules.
Initially, the states page was barren, as shown below. Because its only purpose was to direct the user to her desired state, this was the best place to display all this info, especially because the user could view it all at a glance.
With all this info, the cards were looking cramped and crowded. I designed a layout with the percentage in the top right corner, and mask and quarantine icons in the bottom left corner. This format is similar to a periodic table element and its chemical properties so it's not an unfamiliar display of information hierarchy.
Lastly, we needed a hero image for the landing page. Using multiple illustrations from Undraw, we were able to create the perfect way to convey what this website is: a place to find out a way to travel safely in the United States.
Been cautious with traveling only to less crowded outdoor places, so this is great you consolidated everything and made it much easier to plan trips! ... Excited to see where FleeCOVID goes!
- Josephine Chan
Shifting focus
By the end of 2020, HipHerd decided to change their direction due to the state of the world. FleeCOVID was the first step of their transition, and the next was to shift HipHerd's focus from showcasing its board experience to showcasing staycations. This required a redesigned landing page and a revised sitemap.
Their team came to me with the following deliverables:
- Update the landing page with a hero that's actionable and a section to explore trips
- Design another page where users can find and browse through staycations
- Find a way to integrate AirBnb Affiliate Program widgets with the new design
Given these requirements, I sketched a landing page that had a call-to-action to explore trip boards in the hero, put HipHerd's board experience at the forefront using "staycation terminology," and finally display a list of example trip boards.
However, HipHerd's team wanted everything above the fold, not just the hero, to be engaging and actionable, resulting in switching board and "tutorial" sections.
The final sketch made before wireframes implemented these changes, added a section for the AirBnb widget, and changed the language in the calls to action to be more engaging and trip related.
The mid-fidelity mockups mirrored the final sketches. After seeing the hero, HipHerd's team noted that the image didn't quite capture the nature (ha!) of the product. I turned to Unsplash to capture the travel and outdoors mood of staycations, using a photo to make it a cover rather than a foreground picture.
There are now two buttons: one that starts planning a trip right away and another that lets you explore all trips, a page that was later created and will be discussed below.
To emphasize the "tutorials," I created a different background color for the section. On their homepage, I created the tutorial videos using iMovie to give the user a real feel for the product.
Lastly, the AirBnb affiliate widget has to be embedded as is; there is no editing what we're given to match our design. In order to work around this, I created mock down versions of board cards and had them scattered behind the widget to try and have the design be consistent.
When navigating to "explore all trips," or "Explore" in the navigation, the user is led to a page that shows recommended trip boards as well as recommended AirBnbs locations. From there, they can then navigate to all curated trips as well as all AirBnb locations.
The "All Trips" page would be the comprehensive collection of all curated trips and be a page of HipHerd boards.
The "All AirBnbs" page would be a curated list of AirBnb locations. It would also give the user a chance to search for AirBnbs right from the page.
Along with the redesign, HipHerd needed a blueprint on which to base and to easily create pages, including components and modules. I mocked up what the "About" page should look like, seen below.
When the mockup was green lit by the team, the handoff from me to the engineering team needed to be as seamless as possible. On top of including the annotations on the mockup, I provided a design system that defined each section and component to be easily definable for future use.
Design systems are thought to be living things and HipHerd's is no exception. While this current system works for their marketing pages, it will need to be added to and iterated on as they grow their app. However, it is a great starting point for the blueprint they need because my system provides their team clarity.
Conclusion
After annotating the designs and providing their team with a design system, the handoff was successful and the designs are now live.
Products are never finished - only improved!
For FleeCOVID, because the method of reporting COVID cases are inconsistent between states, the data may not accurately reflect on FleeCOVID. A disclaimer should be added to explain why some states show "N/A" or "100%" as their daily positive cases, as those numbers can be disconcerting.
For HipHerd, the ability to find and search for AirBnbs directly from their website should be implemented for a more streamlined experience. Trip boards should also be added and updated as the seasons change to consistently be relevant.
What I Learned
Changing the direction of a travel product has certainly been challenging during a global pandemic but HipHerd's team and I have shown that it's definitely doable. Emphasizing staycations allows for travelers to be safe, and at the same, still take adventures.
I'm happy to have helped design the FleeCOVID product and assist in the redesign of HipHerd's shift to staycations. HipHerd and its team are happy with my results and have since pushed the designs.
A big thanks to HipHerd for letting me discuss our partnership for this case study! ❤️
Before and after of HipHerd's redesign