Peak&Pine

A platform to purchase all your outdoor needs

Peak&Pine Preview

Peak&Pine

March 2024

2 month

Role: UX/UI Designer

Introduction

Outdoor Shopping Made Easy

As outdoor adventures grow in popularity, finding the right gear can feel overwhelming. This camping e-commerce platform simplifies shopping for campers of all experience levels, making it easy to discover, compare, and purchase essentials with an intuitive, streamlined design.

Peak&Pine Preview Hero Image

Problems

Learn. Test. Improve.

Through interviews and testing, we identified the main pain points users experience with existing camping e-commerce sites.
Overwhelming Product Choices
Too many options can make it hard for users to find what they need quickly, leading to decision fatigue.
Poor Navigation
Confusing categories, unclear filters, or complicated search functions can make it difficult for users to browse efficiently.
Overloaded Blog Content
Conflicting or generic blog advice overwhelms users, hindering clear purchase decisions.

Challenge

Create an intuitive camping e-commerce site that simplifies product discovery, enhances navigation, and provides clear, helpful content

Design process

Design Principles

Design principles applied throughout the design process.

User-Centered Navigation

Design navigation around user needs, using clear categories and intuitive filtering to minimize friction and guide exploration.

Streamlined Shopping Experience

Create a fast, easy, and simple shopping experience to help users quickly find, compare, and purchase gear without frustration.

Accessibility Through Simplicity


Prioritize accessibility by ensuring clear readability, strong visual contrast, and intuitive interactions to create a more inclusive experience for all users.

Platform Consistency 


Ensure consistency through various platforms by language, icons, responsiveness across sections to reduce cognitive load and build user confidence while browsing.

Project timeline

Project Timeline
SketchesLow-Fidelity PlanHigh-Fidelity Shots

Growing PAINS

Discovery Through Testing

The early design iterations focused on building the app’s core functionality and visual identity. At this stage, the priority was speed and simplicity — creating a foundation to test ideas before the experience expanded.

Peak&Pine First Iteration

Home (OLD)

Key Pain Points —

After rounds of testing and increasing project complexity, it became clear the issues and flaws users encountered with the platforms navigation and features.

Lack of Visual Hierarchy

Without clear sizing, spacing, or emphasis differences between elements, users struggle to know where to focus first.

Weak Contrast

Insufficient contrast reduces readability and makes it harder for users to quickly find important information.

Navigation Bar Feels Disconnected

The bottom navigation bar has a very minimalistic design, but it feels visually disconnected from the rest of the page.

Redundant Visual Elements

The repeated full-width imagery might fatigue users by offering too many large visuals in a row without functional breaks.

Introducing

Peak&Pine

User feedback and usability testing insights guided a complete
redesign that improved clarity and navigation, while also elevating the platform’s overall look and feel.

home (New)

search (new)

Product (new)

Key Updates —

Focused updates addressed usability issues, streamlined user flows, and improved visual consistency, creating a more intuitive, cohesive experience.

Strong Visual Hierarchy

Content is now clearly grouped and tiered — from the hero banner and category filters to product listings and guides. Users can easily scan and understand the layout.

Improved Accessibility

Text stands out clearly against backgrounds, with solid contrast between type, icons, and UI elements, improving accessibility and visual clarity.

Unified Navigation Bar Design

The navigation bar feels clean and cohesive with the rest of the UI. Icon styles and spacing are consistent with labeling, and the selected tab (Home) is clearly highlighted for better orientation.

Consistent and Balanced Layout

Spacing, margins, and image sizing are uniform across sections. This creates a smoother scroll experience and a more polished look overall.

The Little Things —

Key elements contributing to a seamless user flow include clearly structured sections, and easy item comparison features—all enhanced by soft, rounded corners that add a friendly, approachable touch to the interface.
Ui Component 1 Ui Component 2 Ui Component 3

Clearer Categorization and Filtering

The tabs for "New Arrivals," "Best Sellers," and "Recommended" offer intuitive sorting options right beneath the hero banner, helping users quickly find relevant products.

Increased Scannability and Flow

By breaking the interface into digestible sections with consistent spacing and section titles, the screen flows better — users can skim or focus depending on their intent.

Keep It Responsive —

The site’s responsive layout ensures a consistent and intuitive experience across devices — from desktops to smartphones. Whether users are browsing at home or on the move, content remains accessible, visually balanced, and easy to navigate.

Responsive by Design

The interface adapts seamlessly across screen sizes, ensuring a consistent, accessible experience whether users browse at home or on the go.

Considerations

Designing For Everyone

Here are a few accessibility-focused improvements that were explored and applied to help make the platform more usable for everyone.
High Contrast
Text and icons contrast well against their backgrounds, improving legibility for users with low vision or color blindness.
Large Tap Targets
Buttons and tabs are spacious and easy to tap, which benefits users with limited motor control or those on touch devices
Alt Text
Ensures that all visual elements are accessible and understandable for users relying on screen readers.

Reflection

Project Takeaways

Finding Our Bearings


Early on, the direction was unclear features were there, but the experience felt off. User feedback and visual tweaks made it more cohesive and intuitive.

Real Talk, Real Needs

Talking to a diverse range of users revealed needs I hadn’t considered—and showed me just how important it is to design with real voices in mind.

Speaking Up

Each interview built my confidence in connecting with users, asking with less bias, and championing accessibility in thoughtful design.

Final Notes

Lessons Learned

While this project evolved significantly from its initial concept, that evolution became its greatest strength. The user insights I gathered challenged my assumptions and fundamentally improved the design. This experience reinforced that effective design isn't about rigidly adhering to plans, but rather thoughtfully adapting to user needs while maintaining intentionality. Most importantly, it deepened my commitment to creating inclusive solutions that serve diverse audience.

HomeWorkAboutContact
Behance linkInstagram LinkDribbble Link
yolkycreative logo
Location