Outside Featured Image
Outside Mockup

Overview:

The Outside Online interactive feature is an interactive web and mobile article that breathes design and usability into an archived article. This responsive article makes a 10+ page story into a dynamic, interactive and visually appealing feature story.

Roles: UX/UI Designer Tools: Adobe XD

The Challenge:

For my senior interaction design class, our professor gave us long, text-only, archived articles from The New Yorker, LA Times, Outside Magazine etc. and we were to choose one and turn into an interactive feature story. As someone who is used to designing solutions for the tech industry rather than designing for journalism, it proved to be a challenge in the way I approached this project. It was also my first time using Adobe XD.

Sketches for Mobile

Design Process:

I started off with researching the target audience as well as competitors of Outside magazine. I sketched out the initial design on pen and paper and then I designed my wire-frames, created a style tile, gathered site assets and created a high-fidelity prototype on Adobe Xd.

While researching I came across these finds:

  • Median age of Outside’s readers: 42 years
  • Median household income: $91,000
  • Competitors use high quality images of scenery and bold colors

It was important to ask myself questions as I iterated through the design process.

  • How can we design interactive features that complement the article and make it easier to navigate?
  • What assets can we use to draw users into the article?
  • How can we create the optimal visual and informational hierarchy?

I wanted to make the article easy to read, visually appealing and have optimal interaction design. I wanted it to look like an actual feature story on the Outside online site.

mobile wireframes
web wireframes
style tile

The Solution:

My design decisions led me to a full-width splash page with subheading navigation, explore buttons, beautiful full-width images and most importantly, an interactive map to better tell the story. I focused on the logical layout of the story and used various images with subheadings to break content apart. The interactive map served to better illustrate the information in the article about the record-breaking climbs.

By successfully completing this project, I was able to create an interactive piece from a marketing/journalism perspective and successfully learn and become proficient in Adobe Xd. While we weren’t required to design for development or develop the sites ourselves, I was very proud of the final designs that I was able to produce.