Case Study: Information Architecture in Responsive Editorial Design
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.
Created end to end in 5 days by my partner Akemi and myself.
User research (Qualitative Interviews)
User Flow & Site Mapping
Lo-fi Sketching & Testing
Brand Identity Establishment
Hi-fi prototype in Desktop, Mobile, and Ipad
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."
Tip: Hover to see user expectations based on competitors
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.
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.
Components with Information Architecture
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.
Article image size was used to express hierarchy on the mobile version.
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.