For my fifth student project at the Ironhack UX/UI Design bootcamp, my teammate and I had to create a website for an online magazine with curated content, during a 5-day design sprint.
From the available personas to work with, we chose to design for Candice, a trendy 28 year old marketer.
Once we chose the persona we were designing for, we proceeded to conduct User Research, by interviewing people who read fashion magazines or worked in the fashion industry.
Among other things, we asked which magazines they read, what they like and dislike about them, what their goals are when reading fashion magazines, which sections they enjoy, and in which context and device they read.
From our research, we discovered that there is an unexplored niche of magazines presenting high-street fashion combined with practical advice and a smart outlook that avoids the gossipy tone of many fashion magazines. However, the horoscope section that most major fashion magazines have proved very popular among our interviewees.
Branding and Information Architecture
With these insights in mind, we looked more closely at what our main competitors do, what their visual style is, and how they organize their content, and from that, we created a market positioning matrix, where we identified the niche we wanted to fill with our digital magazine.
Once we had a clearer design direction, we started working on the brand attributes, and decided it should be modern and casual, but never gossipy. To get a consistent visual look that communicates these attributes, we made a moodboard, which we submitted to qualitative desirability testing by showing it to participants and asking them to describe their feelings and their impressions.
The results made it clear that our first moodboard didn’t really communicate our brand attributes, so we iterated on it and did another desirability test, this time with more positive results.
We followed a similar process to choose the name Tresque: we came up with several alternatives and asked participants about their preferred ones and how they made them feel.
Based on what we learned from our User Research, we decided upon the content our magazine should have, and performed card sorting to help us build our site’s Information Architecture.
We decided to add skin care and make up sections, as practicality and useful advice were some of the things mentioned by our interviewees as important, and we wanted to add a section delving into important personalities from the industry in order to provide interesting insights into the fashion world as an alternative to the celebrity section seen in many fashion magazines.
Hi-fi wireframes and prototyping
My teammate and I collaborated on Figma to create hi-fi wireframes, putting together pictures and visual elements that were coherent with the brand identity. We decided to rely strongly on large pictures and keep text to a minimum, as that’s what users expect from fashion magazines, and the interview participants mentioned they prefer it that way. In the home page, headlines appear when the user hovers over the images.
We exported the hi-fi wireframes to Principle in order to make an animated prototype, which you can check out in the following video