what is to & fro?

Establishing a digital brand presence for a new travel brand

I. Project overview

timeline
March 2023 - October 2023
Role
UX/UI Designer, Visual Designer, Brand Designer - helped to create distinct brand and 5 custom website pages
tools
Figma, Figjam, Webflow, Google Forms, Google Slides, Loom, Slack, Notion

How To & Fro found its voice

Problem
Lacking any digital presence, To & Fro faces a significant challenge in building brand awareness among potential users, investors, and donors. As a startup, establishing an effective brand and website is essential to initiate brand recognition within the competitive travel industry.
goal
The objective is to establish a favorable brand image for To & Fro during the first interaction many visitors will have with the brand. The website serves as a tool to establish credibility, convey brand values, highlight value proposition, stimulate interest, foster brand loyalty, and secure financial support both before and after the app launch.

Solution: Engaging website and distinct brand

Brand identity
Given To & Fro's absence from the digital world, the UX design team assumed a significant role in defining the website's visual identity and, consequently, shaping the brand. We collaborated closely with the CEOs to develop a comprehensive design system, promoting alignment across various teams, and initiated the creation of the website's initial wireframes and mockups.
value proposition
Leveraging insights and concepts from mobile app development, we integrated a compelling value proposition into our designs, explaining how the brand can enhance the travel experience through the utilization of their mobile app.
credibility
Establishing To & Fro as a reputable brand to inspire confidence among users, investors, and donors proved to be a challenging endeavor. Our design approach prioritized key elements and information about the CEOs and team that would effectively instill trust in every visitor.

II. Research

What is To & Fro?

background
To & Fro is an innovative travel planning tool designed to streamline the collaborative trip-building process for travelers. This platform not only emphasizes the communal aspect of travel but also offers a "shareable card" for detailed trip documentation. It aims to create an inclusive travel community that allows users to discover destination insights from trusted sources, share and collect comprehensive itineraries, and organize trips with groups. To & Fro's core values include an obsession with detail, fostering curiosity, promoting personal ownership, addressing edge cases, and preserving the authenticity of travel destinations.

Recognizing the challenges faced by group and solo travelers

review existing research
Upon my arrival at To & Fro, I integrated into an ongoing UX research initiative. My onboarding process involved reviewing the existing research into the problem and opportunity space that was conducted by the pre-existing UX research team.
competitor analysis
To gain insights into the elements to incorporate on the website, I conducted a competitor analysis by examining existing startup websites. This research encompassed direct competitors within the travel industry and also extended to indirect competitors beyond this domain, serving as a source of inspiration for best practices.
user interviews
Improving our grasp of our user base, the UX research team commenced a series of user interviews. I played an active role in this research to gain more insights into our target audience. These insights were pivotal in creating a website design centered on user-centric principles.
wrap up insights
We reviewed all interview transcripts, subsequently constructing an affinity diagram, creating personas, and conducting a task analysis to generate key themes.

Design principles

qualitative metrics
To ensure that we uphold a positive brand image and create a lasting impression, we recognized the need to set measurable standards. We chose to evaluate our success through qualitative metrics such as delight, value, trust, and brand understanding. These metrics were later tested with users through interviews and testing, employing a Likert scale for assessment.
delight
Design should appeal to a broad audience while delivering a delightful user experience that leaves a lasting imprint on the brand.
Value
Design should articulate a compelling value proposition, ensuring that users recognize and appreciate the value inherent in the product offered by To & Fro.
trust
Design should establish credibility to inspire user trust, fostering their confidence in following the brand and utilizing it as a platform for planning their upcoming journeys.
insight
Design should ignite and uncover insightful revelations about the brand and the information it conveys.

III. Design

Sketching the architecture and identity

sitemap
The development of a sitemap provided a clear visual representation of the site's structure, facilitating informed decisions concerning layout and page prioritization. It offered insights into user navigation patterns and anticipated interactions with the website. Furthermore, it served as an essential tool for tracking our progress in building specific pages, guiding our future direction, and ensuring the website's evolutionary growth.
brainstorming and concepts
Our wireframing methodology went as follows: we started with a broad exploration of ideas, then progressively refined them into efficient designs. Through a consensus-driven process, we selected elements from each idea that adhered to best UX practices. This approach culminated in the creation of a definitive wireframe that resonated with our collective comfort and confidence in addressing user needs.
feedback and iterations
We scheduled weekly meetings with our product managers to provide updates on our project's progress and receive their feedback. We continually refined our wireframes, visual representations, and interactions and incorporated elements they deemed essential for the website, such as sections dedicated to donations, investments, and crowdfunding.

Visual design direction

Defining a new brand
Developing a brand identity for a new brand was both rewarding and challenging. The challenge lay in giving the brand a unique and resonant visual identity while upholding its core values. Our mission was clear: create a distinctive and compelling brand that would not only captivate our target audience but also communicate our vision effectively. Through a collaborative effort, we successfully navigated the complexities of brand identity development, emerging with a cohesive, engaging, and impactful brand identity for To & Fro.
Brand Personality
Our journey to define To & Fro's brand personality began with a deep dive into the brand's core values and mission. We carefully selected key traits that encapsulated the essence of To & Fro, aiming to create a brand deeply resonant with our target audience while distinguishing it in the competitive travel industry. These traits served as the foundational pillars upon which we constructed the brand's identity.
Brand style
To visually translate these traits and infuse them into the brand's style, we explored four distinct stylistic directions. Among these, two emerged as the most compelling and aligned with our brand's vision. The first, referred to as "Bold and Simple," features standout elements that rely on simplicity and focused design to convey messages in a direct, straightforward tone. The second, known as "Mixed Messages," introduces textured elements that reflect humanity and storytelling through tangible mementos and movement. These two stylistic directions, "Bold and Simple" and "Mixed Messages," now serve as the foundation for our brand's personality and style, ensuring each interaction with To & Fro leaves a lasting impact.

IV. Evaluate

Testing with group and solo travelers

results
To gauge the effectiveness of our designs in meeting user needs, we executed task-based usability testing, encompassing a designated website-related task in conjunction with the think-aloud method. After users fulfilled their designated tasks, they proceeded to complete a quantitative questionnaire founded on the four design principles we had established earlier. The score presents the average ratings from fifteen participants, assessed on a Likert scale from 1 to 7.

6.4

Delight
Does the design give you a delightful and positive experience?

5.34

Value
How helpful is the website in communicating the worth of the product?

6.67

Trust
Does the website establish credibility and inspire trust?

5.86

Insight
Does the website reveal insightful news about the brand?

V. Final designs

Landing Page

Joining the waitlist
We require a swift and user-friendly method to encourage app downloads. By prominently featuring a Call to Action, we aim to prompt users to join the app's waitlist. They can opt to join the waitlist by scanning a QR code or providing their phone number or email to receive a link for app release waitlisting.
Value proposition
We delineate the proposed travel journey, emphasizing four pivotal steps with a focus on itinerary-related functionalities. This summary encapsulates the app's value proposition and the advantages it provides to travelers.

About Us

who we are
This page provides insights into the inception of To & Fro, tracing the journey from a mutual love for travel to the fulfillment of a dream. It showcases the committed team behind the transformation of this vision into reality, thereby enhancing credibility.
the founders
Concise yet informative biographies of each CEO add a personal touch to the narrative. Their showcased travel destinations align with To & Fro's brand identity, reflecting their unique style and personal flair.

FAQs

we're here to help
The FAQs page is a one-stop resource covering a wide range of travel-related topics. It offers insights on the brand, general navigation, activity discovery, information access, and family-friendly planning. It also addresses questions around group travel, cultural experiences, memory preservation, budgeting, and self-discovery. This comprehensive guide caters to diverse traveler needs, ensuring a seamless and enriching journey.

Alternate versions, development, and takeaways

Responsive design, app release, and development
In addition to the brand release version of the site, our task involved crafting a new landing page for the app release version of the website. This landing page featured new sections dedicated to showcasing the app's forthcoming features. Simultaneously, we designed a mobile-responsive website to provide users with convenient access to the website's full functionality on their mobile devices.

As the sole team member with experience in Webflow, I initiated the website development. However, I couldn't complete the project due to my involvement in app development. I did make significant progress, enabling another team member to take over and finish the development in the near future.
Key takeaways
User testing unveiled the initial impressions of our product, providing insights into the perceived value. All participants expressed interest in a mobile app that addresses the concerns outlined in our value proposition. They acknowledged the site as credible, visually appealing, and possessing a unique identity. We informed them about upcoming usability tests for the app and extended invitations for their participation in the testing phase.

Want to see more of my work?

Choose a project
Choose the next project or navigate back to the projects page.
View all projects
conceptual
app
b2c
accomodations

Airbnb

Adding a feature to Airbnb to help group travelers split payments for large reservations.