Photo by Aaron Burden at Unsplash

Field: UX | UI
Date: Jun.2019
Time: one week
Individual project
Tools:

The Challenge
Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one pre-defined User Personas.
The User:
Paula (19) — The Laid-Back Creative
-
She reads Vice, Rolling Stone, Man Repeller and other webzines;
-
She wants to be an artist and connect with people around the world;
-
She reads voraciously, everywhere, anywhere;
-
Goals:
-
Be cool and achieve her dreams;
-
Read the most influential authors from her time to show off on Instagram;
-
Have her first expo soon to start being “someone” in the art scene.

Methodology: Design Thinking

THE RESEARCH
Qualitative Interview
Target audience:
Millennials involved or very interested in the art scene.
Focus:
Understand their behavior patterns related to consumption and read art information to define their preferences and find their real pains.
Note: reduce number of interviews due to the short time and because the main goal of the project was to develop UI methodologies.
Total number of interviews: 6
Interviews Main Insights
"Art for me needs to be super visual, it's all about images and the emotions they create." - Marina
"Other articles on the side makes me start surfing through them and getting lost." - Laura
"I like to read about the art scenes so I can schedule the events I want to attend and plan my week". - Juliana
"On new's website I like to see first a resume so I can be sure if I really want to read it or not." - Gustavo
Visual Competitive Analysis


THE BRAND

The Solution
Develop a Design...
Clean
Visual
Simple
Smooth
Straightforward.




Based on the interview insights the main feature developed was:
Swipe bar on the side of which picture that allows the user to click and read a the content of pop up with the article resume so he can choose if he wants to go deeper in that content or just keep browsing on the page.
Main outcomes:
-
Less text which keeps the focus on the images;
-
Reduces visual pollution;
-
Small bits of information;
-
More power to the user to select relevant content.



Also keep the footer fixed on the article page with 'Share on social media' to solve one of the pains of the User Persona.
- Show off on Instagram

TEST TEST TEST
Lo-Fidelity prototype

Lo-Fidelity prototype
Tools:
Sketch
InVision
Usability tests
Total number of tests: 8
Hi-Fidelity prototype
Hi-Fi Mobile Prototype demo video using InVision:
Hi-Fi Web Prototype demo video:
Responsive Design
The page was designed creating the elements mainly based on a card system and using the 'symbols' tool in Sketch. This technique combined with the 'mobile-first' concept made the whole process of building a responsive mobile version way easier and made it possible to smoothly adapted it to the web version.


