INDUSTRY:

UX/UI Design & Web Design

CLIENT:

Personal Project

YEAR:

2023- 2024

EXPERIENCE:

UX Research/ Visual Design

Cover

Neon Youth Mx: UX/UI Design Magazine Website

UX Research.
About the Project
Neon Youth is an online media focused on generating diffusion and content about artists, news and emerging cultural events in the city of Toluca, Mexico City and surrounding areas. The goal of this site is to connect more closely with the public follower of the medium.




Team



Methodology



Objective
Highlight the identity of the magazine. In this research we will focus on knowing the interests of users, as well as their tastes and what makes them interested in an online magazine?
Research Instruments
  • Surveys (quantitative research), however in this one there were a couple of open-ended questions to gather more information.
  • Interviews (qualitative research)
  • User persona
Geographic Area
  • Toluca de Lerdo and surroundings


Lean Survey Canva


User Personas

Persona 1
Persona 2


Participant Criteria

Recruitment
  • A survey was applied to people who are enthusiastic about music and culture, as well as to acquaintances and groups that appreciate music, art and design; as well as attendance to events on these topics.
  • As for the interviews, we recruited a select group of people who are fond of music, culture and art and asked them a total of ten open questions so that based on their experience they could provide us with as much information as possible and necessary for the construction of the website.

Key Insights

In the results of the surveys, the most relevant findings for the research were identified.


Costumer Journey Map



Benchmark

A detailed analysis of the media/ magazine inspiration was carried out to evaluate the functionality, usability and graphic material of each brand. This allowed us to identify areas for improvement and optimize the design of the future website.
Functional


Graphic


Information architecture


Sketches

Wireframes Low-Fidelity

Based on the research and the requirements defined through the Information Architecture, the proposed structure and design for the first web page was developed. Low fidelity wireframes are presented below.



Showcase image
UI Design.

Branding


Iconography & Design System



Mockups & Prototype
Prototype
To see the interactive prototype in Figma, click —> Here

Create a free website with Framer, the website builder loved by startups, designers and agencies.