top of page

Photo by Aaron Burden at Unsplash

Artybase Cover.jpg

Field: UX | UI

Date: Jun.2019

Time: one week

Individual project

Tools:

Tools.jpg
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:

  1. Be cool and achieve her dreams; 

  2. Read the most influential authors from her time to show off on Instagram; 

  3. Have her first expo soon to start being “someone” in the art scene.

 

Screen Shot 2019-11-30 at 21.21.18.png

Methodology: Design Thinking

Picture1.jpg

 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

Artzine Compet.jpg
Boca.jpg

 THE BRAND 

NEW Brandbook.jpg

The Solution

Develop a Design...
    Clean
      Visual
        Simple
           Smooth
              Straightforward.
Mockup Mobile 2.jpg
Mockup Mobile 1.jpg
Mockup Mobile 3.png
Mockup Mobile 4.jpg

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.
Mobile swipe.jpg
Web 2.jpg
Web swipe.png

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

Screen Shot 2019-12-01 at 21.53.36.png
TEST TEST TEST
Lo-Fidelity prototype
Screen Shot 2019-12-01 at 20.55.41.png
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. 

Pic Moblie Main Screen.jpg
Pic WEB Main Screen.jpg
NEW Style guide.jpg

© Luiza Kuster. Made with love.

bottom of page