Ux/Ui Design

Rocky MountainAdventures

July 2019

The Project

Rocky Mountain Adventures is a new lifestyle magazine for outdoor adventure seekers. They publish high-quality, long-form, magazine-style adventure writing that weaves storytelling and rich media (e.g. gopro footage, HD photos, GPS log maps).

Outdoor enthusiasts love gear: clothing, equipment, and gadgets. They publish well-researched reviews of equipment for every adventure sport.

Finally, they are offering real-life guided adventures. We have dozens of awesome, pro guides with tons of outdoor experience who will be leading multi-day trips. This is a premium service: food, lodging, and itinerary are all handled by us. They'll offer different Rocky Mountain activities such as rafting, backpacking, cycling, and a unique hang gliding experience. These activities are based throughout the rocky mountain region and cater to a range of physical ability and experience.

They plan on revenue from three sources: affiliate sales of reviewed equipment, profit from guided adventure signups, and display advertising. They need to have at least one banner ad and one medium rectangle ad on every pageview. They were open to other ideas for display ads — certainly additional revenue — but don’t want our site to be too cluttered.

Foundational Architecture

Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software.

Information architecture aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort.

Kickoff Meeting



A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.

The Value of Wireframes

  • Connect the site’s information architecture to its visual design by showing paths between pages
  • Clarify consistent ways for displaying particular types of information on the user interface
  • Determine intended functionality in the interface
  • Prioritize content through the determination of how much space to allocate to a given item and where that item is located
Rocky Mountain Wireframes


Annotated WireFrame

Wireframe annotations are important because they give clients clear explanations to your design decisions. If you don’t annotate your wireframes, your clients have the power to assert their biased judgement on your design. Unless they understand user experience, it’s hard for most clients to see the value of your design without annotations.

Annotated WireFrame

Annotated WireFrame

Low-Fidelity Mockups

Focus on design and concepts: Without the pressure of making every page linked, clickable, and interactive, you can worry less about the more technical parts of prototyping and spend more energy on ideation.

Real-time iteration: Let’s say you’re gathering customer feedback on your sketched prototype. During this test, you can quickly redo part of the design based on customer comments in real time, in just a few minutes.

Accessible to everyone: Everyone can doodle. With low-fidelity prototyping, even non-designers can participate in the design process and think through content, menus, and flow.

Rocky Mountain Low-Fidelity

Low-Fidelity Mockup

High-Fidelity Mockup

More familiar to users: High-fidelity prototypes look like live software to customers, meaning participants would be more likely to behave naturally during testing.

Pinpoint specific components to test: You can dive deep into a single component (like flow, visuals, engagement, or navigation) during user testing. This allows you to get detailed feedback on certain elements of the design that would not be possible with pen and paper.

More presentable to stakeholders: Clients and team members will get a clear idea of how the product will look and work before it ever goes live. You can also set clear expectations with developers in the early stages on how much time will be needed to build your prototype and have a finished product.

High Fidelity Mockup

High Fidelity Mockups

Previous Case Study Next Case Study