Project Materials

Project image viewer
Project Logo image 1 image 2 image 3 image 4 image 5 image 6 image 7 image 8 image 9

Hiker’s Companion – Mobile App & Responsive Webpage

Hiker’s Companion is a hiking support platform I created during my second semester at SAIT's Interactive Design program (June–August 2024). While it began as a group project, I took charge of designing and developing both the mobile app and the responsive webpage. My teammates helped with initial research and the final presentation.

I approached the project as if the client were the Hiker’s Companion brand, a newcomer in the hiking app market. My goal was to launch a competitive product that solved key user issues seen in existing apps like AllTrails.

Problem & Design Solution

AllTrails is popular among hikers, but reviews from the Apple App Store and Google Play Store show common frustrations, especially with its subscription model. Users often feel upset when offline maps become unavailable after the subscription ends.

To solve this, I designed Hiker’s Companion to allow one-time paid downloads of offline maps. These maps remain accessible, no matter the subscription status. The app caters to both novice and experienced hikers, focusing on intuitive navigation, safety tools, and awareness of weather and trail conditions.

Research & Key Insights

The research was conducted through:

  • Benchmarking competitor apps (especially AllTrails)
  • Analyzing app store user reviews
  • Synthesizing user feedback around navigation, offline access, and subscription fatigue

Key insights included:
  • Hikers want ownership over essential resources (like offline maps)
  • Safety and simplicity are more valuable than aesthetic complexity
  • Most users rely on trail apps during high-stress situations (bad weather, poor signal), so clarity and offline performance are non-negotiable

These insights heavily influenced the interface architecture, user flows, and offline accessibility structure.

  • My Role & Tools Used
    I independently executed all technical design and development tasks, including UI design in Figma and coding the webpage using HTML, CSS, JavaScript, and Visual Studio Code. My contributions included:

    • Brand identity design (logo, color palette, typography)
    • UI/UX design using Figma
    • Web development with HTML, CSS, and JavaScript
    • API integration (Google Maps, ChatGPT, OpenStreetMap)
    • Visual mockups using Photoshop and Canva
  • Design Process
    The project followed a comprehensive UX workflow over 2 months:

    1. Ideation & Goal Definition
      Clarified the core value: a hiking companion focused on safety, clarity, and user control over map access

    2. User Research
      Gathered app review data to define pain points
      Segmented users by skill level and connectivity needs

    3. Sketching & Wireframing
      Created low-fidelity wireframes in Figma for both mobile and desktop
      Prioritized legibility, large tap targets, and streamlined flows

    4. Visual Design
      Developed a clean, calming aesthetic using earth tones and simple iconography
      Designed brand elements (logo, badges) to build credibility

    5. Prototyping & Testing
      Peer reviews and instructor feedback focused on usability and clarity
      Iterated layouts based on user flow friction

    6. Development
      Hand-coded a responsive webpage using HTML, CSS, and JavaScript
      Integrated lightweight APIs like Google Maps, ChatGPT, OpenStreetMap
      Designed a high-fidelity mobile app prototype using Figma, aligned with the planned user flow
  • Final Output in Context
    The mobile app includes a simple high-fidelity prototype designed in Figma, based on user flow
    The webpage enables users to explore trails, download maps, and plan hikes in a responsive and accessible interface
    Designs were rendered into mockups across multiple devices (phones, tablets, laptops) to simulate real-world usage

Takeaways

This was a pivotal project in my design journey. Completing it independently taught me:

  • The value of user-centered research in driving impactful features
  • How visual design supports usability (not the other way around)
  • The importance of iterative prototyping and real user feedback

It also significantly leveled up my skills in Figma, HTML/CSS, API integration, and responsive web development — aligning perfectly with my career goals in UI/UX design for practical, outdoor or utility-focused apps.

Project Team

Attributions and References