Project Overview

Trekkwire is a B2C travel startup that simplifies the discovery and booking of authentic travel experiences. Its easy-to-use platform connects travelers with local tour guides on demand, making it easier than ever to experience a destination like a local.

Project Type: Client Project (part of educational program)

My role: UX/UI Designer in Team of 5

Timeline: March 2023

The Challenge

Trekkwire came to us with a minimalist website consisting of a "coming soon" landing page and some limited company information. They tasked us with transforming the website using their existing logo colors to create an intuitive, visually appealing, and user-friendly experience that would distinguish Trekkwire from its competitors and highlight its unique value proposition: connecting travelers with local on-demand tour guides.

The Solution

Our team designed an MVP website for Trekkwire, prioritizing user experience and scalability. The engaging homepage highlights the on-demand booking feature, making it easy for users to discover and book tours. A dedicated "Find Your Guide" page facilitates searching for local guides, while informational pages ("About Us," "Become a Guide," and "Careers") educate users about Trekkwire and its services.

Research

Kick-Off

We kicked off the project by reviewing the brief, scope, deadlines, and deliverables, as well as assessing Trekkwire's current website for insights on its strengths and areas for improvement. Key takeaways:

Trekkwire is a new startup aiming to be the Airbnb for booking local tours and experiences.
The product will eventually be available as an app, but we’re focusing on an MVP website first.
The current website is basic, offering limited information, and we’re starting from scratch, apart from the logo.

We gathered the following insights from the client:

They want a modern, distinctive design to stand out from competitors.
They’re open to redesigning everything except the logo.
The homepage should focus on search and feature a clear call to action, encouraging sign-ups and tour searches.
They prefer guide cards to highlight the on-demand connection between guides and travelers.
They’re still refining their vision but trust us with creative freedom, staying in close communication throughout.

Some of the questions we asked the client

Competitive Analysis

To understand the competitive landscape and inform Trekkwire's design, I analyzed four key competitors: Guruwalk, Showaround, Toursbylocals, and Airbnb. This research revealed opportunities for Trekkwire to differentiate itself.

Key weaknesses among competitors include:

Outdated UI: Many have dated designs, presenting an opportunity for Trekkwire to stand out with a modern, user-friendly interface.
Advance booking required: Most competitors require booking in advance, which can be inconvenient for users with flexible schedules or last-minute plans.
Sign-up barrier: Many competitors require users to sign up before accessing guide or tour details, creating friction for users simply browsing.

Ideate

User Stories

The client provided five user stories to guide our design and define essential features:

As a user, I want to learn about Trekkwire from the homepage
As a user (local guide), I want to access information about becoming a local guide.
As a user looking for activities in my city, I want to view sample profiles of guides who can show me around the city.
As a user, I want to be able to download the app.
As a user, I want to access tech-related career opportunities with Trekkwire.

User Flows

We broke down the user stories into user flows to map the journey for each scenario. I focused on User Flow 1, which involved designing the Home and About Us pages. We regularly reviewed and refined the flows to ensure alignment across the team.

Finding Inspiration

For inspiration, we analyzed well-established, successful websites to identify effective design patterns, user interfaces, and user experiences. This analysis provided valuable insights into industry best practices, allowing us to incorporate proven elements into our own design, enhancing both usability and appeal.

Sketches

Before creating wireframes, I quickly sketched my initial ideas to jumpstart the creative process and generate visual concepts for the homepage layout. Since the homepage is crucial for setting the tone and shaping the user's first impression, I focused on it first to ensure our team had a solid foundation before moving on to other pages.

Low Fidelity Wireframes

Building on the user flows, our team created low-fidelity wireframes to quickly explore design ideas. By minimizing visuals, we focused on core functionality and content structure. These wireframes facilitated collaboration, helping us communicate design concepts, spark discussions, and iterate rapidly. I continued to focus on the homepage and "About Us" page, experimenting with different layouts and arrangements, while drawing inspiration from industry best practices and successful websites.

Mid Fidelity Wireframes

Next, our team created mid-fidelity wireframes and I continued to focus on the homepage and "About us" page. Recognizing the homepage's importance in setting the tone for the overall design, I communicated closely with my team to incorporate everyone's unique design ideas.

During this phase, we also collaborated on creating reusable components, such as cards, search bars, and buttons, to be used across multiple pages. This required extensive communication and collaboration, as we needed to ensure alignment on the design direction. We met several times a week to discuss challenges, roadblocks, and alignment.

During this part of the process, our focus was establishing the main sections for each page to create a cohesive and user-centric experience.

Design

Style Guide

Our team maintained a high-quality style guide throughout the project, starting with collaborative definitions of key components like buttons and search bars. We chose a color palette inspired by the logo and a modern sans-serif font for a clean, contemporary look. The guide evolved through several iterations, ultimately ensuring a consistent and unified design approach.

UI Iterations

After creating mid-fidelity wireframes, we focused on creating high-fidelity UI iterations for the homepage. To ensure alignment with our client's design preferences, we recognized the importance of presenting a range of UI styles. Each team member crafted their own high-fidelity homepage design, exploring diverse styles and color palettes. I designed the UI iteration below, which aimed to seamlessly incorporate the client's logo colors while establishing a clean and contemporary visual aesthetic aligned with the client's vision.

Redesigning the guide cards

In the UI iteration phase, I also spent some time and effort refining the guide cards that had been previously designed. I found that the original design had become cluttered with excess elements. I drew inspiration from user-friendly and visually appealing designs on platforms like Airbnb and Booking.com to address this, aiming to create a more modern, clean, and user-centric card design. Ultimately, the team preferred the updated card design, and we implemented it going forward.

Here are some of the specific changes I made:

Enlarged the image size to fill the card border.
Removed unnecessary elements such as "activities," the divider line, and the location icon.
Removed the drop shadow and introduced a white border around the green status icon to enhance its visibility.

Here are some of the specific changes I made:

Enlarged the image size to fill the card border.
Removed unnecessary elements such as "activities," the divider line, and the location icon.
Removed the drop shadow and introduced a white border around the green status icon to enhance its visibility.

Here are some of the specific changes I made:

Enlarged the image size to fill the card border.
Removed unnecessary elements such as "activities," the divider line, and the location icon.
Removed the drop shadow and introduced a white border around the green status icon to enhance its visibility.

Designing Tour Cards

I believe a visually appealing user interface is essential for delivering a great user experience. With this in mind, I invested considerable time and effort in creating UI designs that would be enjoyable for users to interact with. The groundwork I laid in the wireframing phase paid off significantly during this phase, as I retained the majority of the structure and layout without any changes. This enabled me to focus fully on the creative aspects, such as choosing colors, fonts, and imagery. Overall, I found this part of the process to be highly rewarding, as it provided me with the opportunity to explore my creative vision and bring it to life.

High-fidelity wireframes

The client chose the UI iteration design below, expressing particular fondness for its unique arches, which resonated with their vision of a unique and modern website. Once we understood the client's desired look and feel, I streamlined and decluttered the design, making it more professional and user-friendly. I removed unnecessary elements and reorganized the content in a more logical and scannable way. The team agreed that these changes improved the overall design quality, and we decided to move forward with the changes. The result was a unique, functional design that perfectly met the client's needs.

About Us Page

Working closely together, our team continued developing high-fidelity designs, with each member specializing in different pages. In addition to my contributions to the homepage, I designed of the "About Us" page, adeptly incorporating the client's chosen style. I also supported my teammates in their design work, ensuring that our efforts were aligned and focused on producing the highest quality designs possible.

Developer Handoff

In order to facilitate a seamless implementation for the developer, we prepared a comprehensive set of resources, including detailed annotations, measurements, and specifications.

Reflect

Final Thoughts

This project has been a valuable journey of growth as a UX designer. Collaborating with a diverse team was both enjoyable and insightful. While initially challenging to find a unified design style, this process ultimately led to a stronger outcome that surpassed our individual concepts. I learned the importance of letting go of personal design attachments and embracing the client’s vision, even when it differs from my own.

The project also strengthened my collaboration, communication, and problem-solving skills. Navigating differing viewpoints and effectively sharing my ideas were key to our success. I now approach design with more confidence, focused on aligning solutions with client goals rather than personal preferences. This experience has reinforced that client satisfaction is the true measure of success in UX design.

I’m grateful for the opportunity and excited to apply these lessons in future projects.

Let's work together

If you have a project in mind, or would like to chat, shoot me an email

at stineswalle@gmail.com. I'd love to hear from you.

Let's work together

If you have a project in mind, or would like to chat, shoot me an email

at stineswalle@gmail.com. I'd love to hear from you.

Let's work together

If you have a project in mind, or would like to chat, shoot me an email

at stineswalle@gmail.com. I'd love to hear from you.