As part of my UX/UI bootcamp at Ironhack, we worked in a team of two to create a Responsive Online Magazine.
In this editorial project, the focus was on UI design, so we already have a user persona. We developed the magazine to meet the personas requirements.
Candice, 28 y/o — The Trendy Marketeer
- She reads Vogue, People, Cosmopolitan, Elle.
- She sees herself as a trend-seeker and uses publications as a source of inspiration for work.
- She reads whenever she has a free slot — especially in public transportation, long journeys during work trips or waiting areas.
- Goals: be on top of the latest trends, dress and appear fashionable, get more tech savvy.
Candice’s Brand Attributes
Then we defined 5 Brand Attributes that correspond to Candice:
Trendy, Confident, Up to Date, Inspiring & Open minded.
Visual Competitive Analysis
In this step, we performed a visual competitive analysis to define the brand attributes of VOUGE and COSMOPOLITAN, which are the references of the user personas.
This step helped us identify parallels with the brand attributes of our user persona.
Then we created 2 different Mood boards according to the brand attributes of our user persona and conducted a survey.
We had the participants decide which of the mood boards was more in line with the following brand attributes we had defined at the beginning:
Trendy, Confident, Up to date, Inspiring & Open minded.
The Results of the Survey
Almost 90 percent of participants found that „Mood board A“ corresponded more closely to the attributes.
The keyword we defined for this project is “Inspirational” and so the references for the style of this project were Pinterest and Instagram, for example.
After deciding on “Mood board A”, we went further and created a style tile with more concretely defined UI elements such as font sizes, colors, icons, buttons etc.
We asked 5 users to do a card sort so we could define an intuitive and logical information architecture for our Online Lifestyle Magazine.
We conducted research on topics relevant to our Persona, Candice, and wrote down all these topics and asked users to group the topics in a logical way and name the categories.
after 5 card sorting rounds we defined the Categories for the Website.
The Site map
At this step, we were in the ideation phase.
We had the idea to implement an innovative way of presenting articles in an online magazine by splitting the screen horizontally into two parts.
To do this, we put the article suggestions and the article content on one page.
The article opens on the right side, while the other article suggestions and related articles move to the left side of the screen and are easily accessible for the user.
The Task for the Mid-Fi Testing was to click on the Article: “LOVELY DRIED FLOWERS” and then to click on a suggested article.
All of the users completed the task frictionless. The results showed that the user found the split screen to be very harmonious and described it as “nice to look at”.
In the next step we will iterate the layout and further adapt it to the user’s needs.