Unfold | Art magazine GenZ
Responsive Design | UX Benchmarking | Interviews | User Persona | User Story | Wireframing |
Prototyping | Colors | Font | Web | Mobile | Style Tile | Brand Positioning | Prototyping
The Brief:
Create an online magazine from scratch based on a defined Persona.
Context:
Collaborative project during Ironhack Bootcamp 2020 in collaboration with Liliana Sampaio.
Time:
1 Week
1 Week
Tools:
Figma, Keynote
Figma, Keynote
Designing
for GenZ
The design was based on a predefined user persona. The persona is a 19-year old girl, likes reading and is aspiring to be an artist some day. She reads online magazines like Rolling Stone and Vice. To learn more about a person like Paula, we interviewed 3 young artists about the preferences for an online magazine. All three interviewees confirmed an interest in variety for inspirtion and expected a free access since they already can find content for free on instagram. According to our interview results, Instagram is frequently used to share exhibitions, promote artwork and more amongst young artists and creatives (Based on interviews with 3 young artists age 26 -32).
User story
The User story allowed us to focus on who our persona is (identity), what the persona wants to achieve (action) and what the desired outcome is (goal). This allowed us to defined more precisely what the content of the online magazine would need to be and what the bigger goal is (The ‘Why’).
Style Tile
The Design deciscions for bold colors, rich in variety and playful are informed by the user persona, interviews with young artists and by favourite competitors. We focussed on a younger look that still references known art websites like the Museum of Modern Art. Art websites and art portfolio often have a black on white look. On the other hand young art magazines or website like MoMa have strong bold color squares and other abstract forms. In addition the abstract forms were also listed as a new design trend for 2021 in an article of 99desings.
Brand
Positioning
We placed our new brand ‘Unfold’ in relation to competitors like Moma, Rolling Stones and Vice on ascale from specific to variety of topics and unpaid to paid. Young creatives are sharing and consuming content for free on instagram and desire a wide variety in content to gain inspiration according to the user interviews with 3 young artists.
Wireframing
Image: Mid-Fi Wireframes
In this project the Wireframing was curcial. Sizing, spacing and alignment of the grid structure, text and images was important before adding colors and photos into the mix. The image above is a screengrab of the 5 full pages of the Mid-Fi Prototype of the web version. We started out on paper and then moved to Figma to make our black and white Mid-Fi prototype. During each phase we tested... where would the user click? Do they understand what they are looking at?
The feedback was first mainly about the navigation bars. We changed the wording from work, to artwork, to projects and tested out the difference by asking test users. Once this was figured out it was mainly about adjusting the fontsize and the balance of word and image.
Hi-Fi
Prototype
After the structure, the font and the balance between text and images had been figured out, we could move on to adding color and images. We choose the photos carefully since the colors had to match the surrounding colors. Adding photos and colors came together like a big painting. We realised however that in a real-life situation, we may not have such an easy time matching the photos and the colors since the photos taken of artwork or artists will not be based on the colors of the magazine. In our case we could just replace an image, but for a magazine that is life this might be tricky. A photographer would have to provide several solutions or the photo could have a color overlay to balance it out.
Video Prototype Web
Video Prototype Web
Next steps
- Target Gen Z creatives for testing since testing was only done with young millenials.
- Testing on bigger scale.
- Develop a strategy to receive high quality submission and content in collaboration with other professionals since the magazine’s quality would rely heavily on high quality content.
- Find a solution of how to handel matching images and colors of real submissions since the photos could now be selected based on how well they match the squares of color. Photos were now from Unsplash.com. A royalty-free platform for photos.
- Additional analysis of industry and competitors to develop a more targetted brand strategy.
- Work out additional user flows of the ‘Submit’ and ‘About’ section of the prototype.
Reflection
We sure learned a lot during this projects. This project was more focussed on UI than UX. So we focussed a lot on the visuals: Colors, Typeface, Spacing, Alignment, etc. Learning from competitors what kind of visual language users are used to and what visuals might be attractive for young creatives was helping us with our own design as well. A visual language does not exist in a bubble and it is important to understand the context. It was very helpful to closely study UI references. It was challenging to balance the text with the images and adjust the fontsize on the Web and the mobile version. Whenever we were stuck we would go back to UI references or ask for feedback. In each phase from sketching to Mid-Fi and Hi-Fi we iterated and iterated and iterated... and it showed that each phase can bring a different focus on what is unclear or what needs improvement. The choice of words, the alignment, the font size etc. Working together on this project allowed us to complete this project in only one week (!) and helped to make decisions by bouncing ideas and choices off each other. We got inspired by each others ideas and brought different knowledge and skills to the table.
Feedback we received on the project:
● “Your project is very well designed. Both desktop and mobile are clearly very well adapted versions of the same thing.”
● “Your ideas for the hover/overlay was very interesting.”
● “Great communication skills, as usual.”
● “Your prototype is amazing! You hardly could have done it better in terms of giving your persona the magazine that she didn’t know she needed.”
● “Nicely done User Stories (we will see more of that next week)
● Amazing style guide! We loved the variations! “
● “Details are everything: great touch with the newsletter animation.”
Thank you for your collaboration Liliana Sampaio!
︎︎︎ More on Medium● “Your project is very well designed. Both desktop and mobile are clearly very well adapted versions of the same thing.”
● “Your ideas for the hover/overlay was very interesting.”
● “Great communication skills, as usual.”
● “Your prototype is amazing! You hardly could have done it better in terms of giving your persona the magazine that she didn’t know she needed.”
● “Nicely done User Stories (we will see more of that next week)
● Amazing style guide! We loved the variations! “
● “Details are everything: great touch with the newsletter animation.”
Thank you for your collaboration Liliana Sampaio!