PradoDesigns

Outdoor Experience

A digital platform to simplify outdoor planning. Focusing on user personas and mobile-first, the app delivers tailored experiences across devices. It helps users discover and engage with outdoor options that fit their lifestyle, all within an intuitive interface.

Responsive Design

User Personas

Ecommerce

Wireframing & Prototyping

Accessibility Principles

Role

Designer

Duration

~6 Weeks

(Part-Time)

Tools

Figma

Unsplash

Freeform

TL;DR

Designed a responsive website for a modern outdoor gear and experience brand
Used client-provided assets and personas to guide decisions
Delivered 9 screens across desktop, tablet, and mobile
Built a working prototype and integrated feedback from a design instructor
Gained key lessons in balancing user needs with business goals

Designed a responsive website for a modern outdoor gear and experience brand
Used client-provided assets and personas to guide decisions
Delivered 9 screens across desktop, tablet, and mobile
Built a working prototype and integrated feedback from a design instructor
Gained key lessons in balancing user needs with business goals

Designed a responsive website for a modern outdoor gear and experience brand
Used client-provided assets and personas to guide decisions
Delivered 9 screens across desktop, tablet, and mobile
Built a working prototype and integrated feedback from a design instructor
Gained key lessons in balancing user needs with business goals

Designed a responsive website for a modern outdoor gear and experience brand
Used client-provided assets and personas to guide decisions
Delivered 9 screens across desktop, tablet, and mobile
Built a working prototype and integrated feedback from a design instructor
Gained key lessons in balancing user needs with business goals

Project Goal

Design a responsive digital experience that encourages outdoor activity, tailored to user personas across desktop, tablet and mobile.

Key Insight

Users seek quick access to relevant activities, clear navigation, and minimal distractions. Mobile first design proved essential.

Core Solution

A clean and responsive website that encourages outdoor exploration through product discovery, educational content and immersive design.

Results/ Expected Results

Delivered a responsive website experience that supports business goals by serving as a digital gateway to modern outdoor exploration.

The Problem

How do you create a website that feels modern and inspiring while also selling gear?
Planning outdoor adventures often involves too many tabs, too much scrolling, and a disjointed experience. OutdoorXperience wanted to create a space that was more than a shop, a hub for adventurers of all kinds to explore gear, ideas, and the outdoors.

How do you create a website that feels modern and inspiring while also selling gear?

Planning outdoor adventures often involves too many tabs, too much scrolling, and a disjointed experience. OutdoorXperience wanted to create a space that was more than a shop, a hub for adventurers of all kinds to explore gear, ideas, and the outdoors.

How do you create a website that feels modern and inspiring while also selling gear?

🔍

Problem

🔍

Problem

🔍

Problem

👥

Research

👥

Research

👥

Research

🧠

Explore

🧠

Explore

🧠

Explore

🎨

Design

🎨

Design

🎨

Design

Research & Insights

I started off by creating low-fidelity sketches in Freeform, drawing inspiration from sites such as MEC, Patagonia, and North Face. I utilised the user personas provided to grasp the diverse range of outdoor enthusiasts, from novices seeking advice to seasoned hikers in need of quick resources.

Key insights:

Experienced users want quick access to planning tools
Less experienced users need inspiration and education
Content overload can derail the experience if the layout isn’t clear
Navigation should feel like a spiderweb — branching from the homepage in multiple directions

Design Exploration

From sketches, I created wireframes and then high-fidelity mockups in Figma. My layout focused on striking a balance between modern elegance and rugged outdoor tone, with clean sections and high-contrast typography for readability.

Key design decisions:

Responsive layouts to support planning and browsing across devices
Visual hierarchy to reduce overload and surface key actions
Integrated client assets (logos, product photos, theme colors)
Color palette: grounded in the brand’s blue and earthy tones (#40B4F2, #98CAE1, #001834, etc.)

Early low-fidelity wireframes exploring layout and content blocks.

Colour palette/

Typography

Hex #40B4F2

Hex #FCFEFB

Outfit

High-fidelity mockups designed for desktop, tablet, and mobile to ensure a consistent and responsive user experience.

Solution & Validation

While I didn’t run peer tests, I incorporated feedback from my supervisor throughout the process. They provided input on layout clarity, responsiveness, and branding consistency. I also self-tested the prototype for navigation and usability across devices.

Results & Reflection

What I delivered:

3 responsive pages: homepage, experience content, and blog
9 screens total (desktop, tablet, mobile)
Clickable interactive prototype
Visual system built on provided branding assets

What I learned:

Design needs to serve both user experience and business goals
Polished visuals mean little if they don’t support usability
A homepage should act like a hub, giving users multiple entry points without clutter

What I’d Improve

What I would Improve

Conduct extensive user testing to gather valuable usability insights.
Refine interactions and transitions to enhance overall polish.
Develop deeper content linking that connects gear to experiences, boosting the site's commercial value while preserving inspiration and trust.
Ensure all content is accessible with appropriate colour contrasts for better visibility.

Role

Duration