TrekTech

UX Design • User Research • Wireframing • Mockup • Prototyping

As part of my Google UX Design certificate, I created TrekTech, a camping supply app designed to provide personalized gear recommendations based on users’ trip details. I developed the full product experience from concept to prototype, including user research, wireframing, UX design, mockups, and interactive prototyping. The resulting design combines a clean, intuitive interface with tailored recommendations, making it easier for campers to plan and pack with confidence.

THE CHALLENGE, PROCESS, & RESULTS

TrekTech: Personalizing Gear Recommendations for Confident Campers

Project Overview

TrekTech is a mobile application designed to eliminate pre-trip packing anxiety by providing campers with highly personalized gear recommendations. Users frequently struggle with knowing exactly what to pack based on weather, elevation, and trip duration; this app solves that uncertainty.

The resulting design combines a clean, intuitive interface with tailored recommendations, making it faster and easier for campers and hikers to plan and pack with confidence.

Understanding the User: Defining the Problem Space

User Research: Summary

Explored websites and online forums to discover common themes and questions that spoke to challenges of individuals taking their first camping trip. Found notable gaps in knowledge surrounding camping basics—choosing the right gear, setting up a campsite, and staying safe outdoors. Identified concerns tied to safety and the unfamiliarity with the outdoors influencing how these individuals approached the decision to camp.

It became clear that some city people were apprehensive with the discomfort that comes with outdoor settings— staying comfortable, sleeping arrangements, maintaining hygiene, or encounters with insects and wildlife. This discomfort played a significant role in shaping their perception of camping. Speaking to the motivations, for some it was a longing for nature, to escape the energy of the city, some sought the thrill of adventure or the chance to develop new connections.

User Research: Pain Points

➊ Pain Point

Not knowing or understanding the basics of camping and outdoor survival.

➋ Pain Point

Difficulty in finding reliable and accessible information on outdoor activities, trails, and equipment.

➌ Pain Point

Apprehensive about encounters with unknown complications.

➍ Pain Point

Lack of knowledge about outdoor activities, equipment, and safety measures, creating limitations.

Defining the Target: The City-Dwelling Novice

Persona: Andrew Ridge

Andrew Ridge is a city-dwelling art student who represents the crucial demographic of first-time campers—motivated to explore nature but lacking the specific knowledge needed to plan and purchase gear. His need for guidance directly validates TrekTech's core function: providing personalized confidence through curated recommendations.

"I paint my canvas of life with the hues of urban energy, fueld by a craving for the unexplored"

Driver

Ⓐ New Experience Seeker

Ⓑ Purchasing Uncertainty

Goal & Motivation

Ⓐ Andrew wants to experience nature outside the urban landscape, specifically for his first time camping in the mountains.

Ⓑ He needs to choose and purchase supplies for his first trip, wanting his adventure to be as comfortable and successful as possible.

Frustration & Pain Point

Ⓐ He is deeply connected to the city and lacks comfort and knowledge regarding outdoor safety and hygiene.

Ⓑ As a first-time camper, he doesn't know what gear he needs, leading to anxiety about buying the wrong (or unnecessary) supplies.

Journey Map: Mapping the Uncertainty of Andrew's Pre-Trip Planning

I mapped Andrew's current experience from the moment he decides to go camping until he is ready to purchase gear. The goal was to identify the most significant emotional lows and information gaps. The map confirmed that Andrew's frustration peaked during the research and synthesis phases, which often require juggling multiple websites and conflicting information.

Starting the Design: Structuring the Confidence

The research defined a primary goal: designing an app experience that mitigates Andrew's anxiety during the complex trip planning and purchasing phases. The goal of this early ideation phase was to rapidly translate the insights from the Journey Map into a functional, low-fidelity structure, focusing entirely on hierarchy and flow before introducing any visual polish.

Paper Wireframes: Rapid Concept Mapping

Paper wireframes were the fastest way to conceptualize the core functionality and user flow. By keeping the fidelity low, I ensured the focus remained on solving the primary UX problems: how to collect trip details and how to present highly personalized gear recommendations

This process allowed me to quickly map out the two critical flows:

Trip Detail Input: The multi-step flow for a user to input essential data required to generate accurate recommendations.
Personalized Packing List: The layout and hierarchy of the main gear-recommendation screen, prioritizing safety and essentials first.

Digital Wireframes: Structuring the Flow

After validating the high-level concepts with paper sketches, I moved to digital wireframing to establish the precise layout, hierarchy, and key interactions for the Minimum Viable Product. This phase allowed me to test accessibility and screen-to-screen flow, ensuring Andrew could complete his core tasks without cognitive overload.

The digital wireframes formalized the solution to the trip-planning anxiety identified in the user journey map, primarily focusing on two critical flows:

Guided Trip Creation: The multi-step input process was refined to ensure users felt guided, not overwhelmed. Each step, from inputting the location to specifying conditions, uses simple forms and clear calls-to-action to maximize completion rates.
Information Hierarchy: The main Recommended Gear List screen was structured to prioritize the most important information first (Safety > Essentials > Comfort). This clear hierarchy combats the "information overload" that Andrew previously experienced.

The prototype's structure walks Andrew through the complete process:

Entry Point: Users land on the homepage and access the gear assistant feature.
Profile Creation: Users create a profile and answer key questions about their specific needs (experience level, preferences).
Trip Detail Input: They input the specifics of their trip (location, dates, weather, elevation).
Recommendation Generation: The feature offers tailored gear recommendations based on the combined profile and trip data.

This testable artifact ensured that the central personalized gear feature was intuitive and effective before moving into high-fidelity mockups.

Low-Fidelity Prototype: Validating the Logic

This Lo-Fi Prototype was built to connect the digital wireframes and validate the core user flow: getting personalized gear recommendations. The complexity of the wire flow confirms the necessary branching logic required to deliver highly specific advice.

Round 1 Findings

Complicated Feature Flow

Alerts Not Noticeable

Low Feature Hierarchy

Change Implemented

Simplified and consolidated the feature flow into fewer steps.

Increased the visual prominence of alerts and clarified the messaging.

Adjusted hierarchy to place the feature prominently on top of the home page.

Round 2 Validation

Flow Success: Simplifying the feature made the user flow easier to understand

Alert Success: Making the alerts more noticeable and adding alert messaging was a good solve.

Hierarchy Success: Adjusting the hierarchy was more beneficial to UX than anticipated.

Usability Study & Findings: Validating and Iterating

The goal of the usability studies was to measure how effectively Andrew (and similar users) could navigate the app, comprehend its features, and successfully accomplish the core task of getting personalized gear recommendations. The findings confirmed key pain points and directly informed the final design hierarchy.

Round 1 Findings: Identifying Friction Points

The initial prototype revealed three core areas of friction that undermined user confidence:

Complexity: Users were excited by the personalized feature but found the initial flow "a little complicated".
Alert Visibility: Important alerts and notifications were not noticeable, leading to missed feedback.
Feature Hierarchy: The main feature was buried, and users struggled to find the gear assistant.

Round 2 Findings: The Impact of Iteration

Based on the initial findings, I implemented three key revisions to the digital wireframes and re-tested. The results validated the changes:

The Impact of Usability: Before & After

The most crucial step in refining the TrekTech design came from the Usability Study's findings: users struggled to locate the core "Camping Trip Assistant" because its placement was lower on the homepage.

The final iteration addressed this by immediately adjusting the information hierarchy, placing the "Click Here to Gear Up" feature prominently at the top of the homepage.

This single change significantly improved the UX by simplifying the flow and providing the necessary guide feature immediately, directly combating the user's initial anxiety during the planning stage.

Before

After

Refining the Design: Applying Data to HiFi Mockups

The high-fidelity phase involved applying the final color palette and visual design to the tested wireframes. This stage incorporated the Usability Study findings, ensuring the final product was not only visually appealing but also optimized for the novice camper's journey.

View HiFI Prototype

Before

After

Survey to Integrated Profile

Beyond adjusting the homepage hierarchy, the Usability Study revealed that the initial survey system was complicated and confusing.

I addressed this by:

Simplifying the Questionnaire: The complex survey layout was replaced with a cleaner, more intuitive form.
Integrating into Profile: The knowledge questions were directly integrated into the personal information setup flow.

This change ensured that the process of setting up a profile felt more like a guided conversation rather than a cumbersome test, providing a more intuitive and seamless process for a nervous first-time user like Andrew.

Final Delivery: The High-Fidelity Prototype

The Hi-Fi Prototype represents the final, polished product experience, where the visual design, branding, and interactive components were finalized and connected. This stage synthesized all prior steps—from user research and wireframing to usability study iterations—to deliver a solution that directly meets Andrew Ridge's needs for confidence and clarity.

The prototype showcases the complete, validated user journey:

Confidence-Boosting Homepage: The clear, prominent placement of the "Camping Trip Assistant" immediately guides the novice user.
Intuitive Onboarding: The seamless integration of the knowledge survey into the profile setup reduces anxiety and information overload.
Personalized Recommendation Engine: The final flow generates customized packing lists based on the trip's specific context (location, weather, elevation), providing the essential guidance Andrew lacked.

The entire prototype is a testament to an iterative design process, resulting in a clean, intuitive, and highly functional app designed for a successful first-time camping experience.

Designing for All: Accessibility & Inclusive Practices

Building an inclusive product was a primary goal for TrekTech, ensuring that first-time users, including those with visual impairments or other disabilities, could plan their trips with equal ease and confidence. Key decisions were made during the Hi-Fi phase to ensure a robust and accessible product:

Readability & Resizability: Fonts and typography styles were chosen for maximum legibility and were designed to be resizable. This avoided the use of overly decorative fonts that often complicate reading for users with visual impairments.
Screen Reader Optimization: Hierarchical structures were carefully implemented to enhance accessibility, making the app's flow logical and easy to navigate for individuals using screen readers.
Color Contrast & Vision Testing: Tools were used to simulate how the app appears to people with different types of color blindness. This process ensured that all text, buttons, and indicators maintained sufficient contrast, guaranteeing clarity regardless of a user's color vision.

Going Forward: Key Learnings and Project Impact

This project served as a comprehensive exercise in translating abstract user anxieties into concrete, tested design solutions. The final results—from user feedback to the iterative flow map—validated the importance of a structured, empathy-driven approach.

Impact: The Voice of the User

The most powerful takeaway was the validation from the study participants. The qualitative feedback confirmed that the iterative design changes directly reduced the friction points identified in the user journey map:

"Very cool, I really like this. This would help a lot."
– Study Participant

What I Learned: The Interconnectedness of UX

The single most valuable lesson I gained was understanding the importance of every single step in the process. I learned to recognize not only how user research, wireframing, and usability testing are interconnected but also their cumulative impact on the final product. The success of the final Hi-Fi Prototype was entirely dependent on the meticulous execution and validation of each preceding phase.

Next Steps...

This final phase focuses on moving the validated design from prototype to production-ready status:

Responsiveness & Compatibility: Test the app on various devices and screen sizes to ensure responsiveness and compatibility.
Accessibility Expansion: Implement more advanced accessibility features to ensure the app is truly usable for all users.
Developer Handoff: Collaborate with developers to ensure seamless integration of design elements and functionality.