Inès Yessad
UX/UI Designer

Overview

Wide is an art magazine. It celebrate diversity and inclusion expressed in various types of art. It connects users through competitions every month.

Challenge

Design a responsive online platform for a magazine directed to meet the needs and goals of one of the presented User Personas and add value to their experience. In this project the goal is to focus on the user interface design.

Role

Role: UX Designer, UI Designer

Timeline: 5 days

Platform: Responsive Desktop + Mobile

Tool: Figma

Team: In pairs with Kayla

Approach

Project plan 

Empathy map

User persona

Visual competitive analysis

Site map & User flow

Sketching & Wireframing

Usability Testing

Iterations

Prototyping

Results

A responsive online magazine with short and concise articles to respond to user needs always on the move seeking for a wide range of informations.

Research

User Persona

To begin the project We started our project with a user persona we chose we did a guerrilla research to refine it. We used an empathy map to understand the user feeling and pain points. We referred to her throughout the entire product development process.

Based on the design thinking method we worked on HMW statements, the goal was to turn this challenges into design opportunities.

How Might We offer a wide range of art work that expresses cultural diversity for young creatives who want to be part of global art community?
WIDE
Design
WIDE

Branding

Following the initial research we work on branding.

Starting with our moodboard, we gathered all images, textures and colors that inspired us to create our magazine.

WIDE

Style Guide

We first created a logo : Wide, the choice of the name refers to the large definition of ART. 

Our user persona is young and loves all type of art. This magazine has all kind of art with one commun point : Cultural Diversity. 

All our design choices are based on our research we wanted to have an elegant and modern feel with a trust to build a community around art.

Wireframes

At the beginning of the design process we created wireframes for testing purposes. In order to reveal possible usability problems, we used Maze to test our mid-fidelity wireframes.

Final Design
WIDE