Case Study: Information Architecture in Responsive Editorial Design

Background:

In Ironhack UX/UI bootcamp I created a modern travel news publication tailored to an assigned user persona. Tasked with making a responsive desktop and mobile version I learned Information Architecture and the use of a grid system on Figma were key to the success of this endeavor. Gamification and interactivity gave it that lovable touch.

Scope:

Created end to end in 5 days by my partner Akemi and myself.

Tools Used:

  • User research (Qualitative Interviews)

  • Card Sorting

  • User Flow & Site Mapping

  • Competitor Analysis

  • Lo-fi Sketching & Testing

  • Mid-fi Testing

  • Brand Identity Establishment

  • Mood board

  • Style Tile

  • Hi-fi prototype in Desktop, Mobile, and Ipad

Image by Norbert Kundrak

USER PERSONA

Eric, 21

  • Decided to drop uni to invest in traveling, working abroad, and trying different careers.

  • Doesn’t read much, or at least that’s what he thinks. He’s disperse and wants to-the-point and amusing information.

  • Goals: travel around the world, learn parkour, make friends everywhere.

User Research: Qualitative Insights Gained Through User Interviews

"I'm sick of over commercialized, cliche travel websites. "

"Publications keep my loyalty with customizability, and fun interactive elements."

"While images catch my eye, I need some visual way to understand the importance of some articles over others."

Competitor Analysis

Tip: Hover to see user expectations based on competitors

Competition Attributes:

  • Ranged from mainstream & ordinary, to very niche. We knew we wanted fall somewhere between these identities. 

  • Use lots of white space, quality imagery, and sans serif fonts.

Lo-fi & Mid-Fi Testing

Tip: Hover to see quick iterations made through testing.

Screen Shot 2021-01-14 at 9.15.42 PM.png
Screen Shot 2021-01-14 at 9.16.04 PM.png

Early iterations tested well, but some users thought the amount we wanted to achieve would be too ambitious for the scope of this project.

Mid-fi improvements included more white space and consistency in component sizing, but our information architecture made sense to users which was key.

Brand Identity & Moodboard

With a functioning skeleton assembled it was time to bring our publication to life with brand attributes and a visual culture.

Brand Book.png
Pastel Themed Natural Plants Mood Board

Components with Information Architecture

Screen Shot 2021-01-14 at 10.12.48 PM.pn

The use of creating component cards for the different articles was vital in establishing their importance based on size. Users associated size of the piece with importance, as well as using a unique size layout to distinguish us from competitors.

Reaching Not Just an MVP, but the MVLP

Our High Fidelity Prototype was complete with an interactive hover map, and a quiz to send users to articles customized to their travel taste.

Untitled design.gif

Article image size was used to express hierarchy on the mobile version.

Takeaways

  • Experimenting with different forms of hierarchy makes for unique interface, but also can subconsciously influence user view of information architecture.

  • Interactive interfaces and gamification is what brings a product to the next level.

  • Figma grids are your best friend!

  • When others say you are overambitious they're not always right.

Thanks for exploring Novaturient!

See also:

E-Commerce Case Study

Mobile Redesign