UNFOLD — Designing an Online Magazine
UX UI Project in Collaboration with Liliana Sampaio
Brief : Create an online magazine from scratched based on a defined Persona.
Duration: 1 week
Petra: UX Benchmarking, Interviews, UI Decisions, Wireframing, Prototyping, Animation, Selection Photos
Liliana: Typeface selection, Colors, Logo Design, Brandname, UX Writing, UX Benchmarking, Interviews, UI Decisions, Wireframing, Prototyping, Selection Photos
Persona
For this project the Persona was provided as a starting point. Say hello to Paula, a 19 year old young creative that wants to know what is going on in the Art & Design scene of the world and get in contact!
Persona’s can be a way to help empathise with (fictional) Users … to get outside your own head!
Competitor Analysis
Our User persona was reading other magazines like Vice and Rolling Stone. Bold, attention seeking, young and with a wide variety of topics.
Characteristics: Bold, attention seeking, young & a wide variety
The Concept
In our 3 User interviews with young artists & creatives we could confirm that the magazine should have a lot of variety in order to get inspired by different areas. We also found that young artist mostly consume and connect for free… on instagram for example. The magazine “Unfold” is unpaid. Funding could potentially come by submission fees, advanced features or cultural grants to support young artists.
MOMA — Amazing UI example
We looked at maybe 20–30 art websites, portfolio website and magazine websites… especially when we started with the Wireframes for our Web and mobile version we kept coming back to MoMa for reference. It was an amazing example to learn from.
A selection of the websites we looked at for reference & inspiration:
https://www.bakmagazine.com
https://www.amsterdamart.com
http://www.geometricae.com
https://news.artnet.com
http://dufalabrothers.com
http://www.bodegamag.com
https://www.altiba9.com
https://umbigomagazine.com
https://doclisboa.org
https://circaartmagazine.net
Moodboard
Font & Colors
Many of the Art websites & Portfolio’s we analysed had either a black & White theme with mostly big, bold black letters on white background or very bold colors that were balance out with images or artwork. We went here for the bold typeface of Oswald for titles and combined it with Merriweather for the text.
Responsive Design
We knew that we wanted the Web magazine to look great on bigger computer screens as well as mobile screens. Our persona is from generation Z and A LOT on their mobile phones … not on a desktop. To achieve consistency of our Design on Web and Mobile we decided to use a grid structure that is easy adjustable.
Grid Structure: Example Grid structure Malgorzata Studzinska
From Concept to Sketching
After we interviewed, brainstormed, analysed and created a collection of references — we now started to make our OWN!! Still a long way to go. The image in your head is not always easy to get on paper or to work out with Software… so what do we do now?
First we started with Paper Prototypes. What we discovered here was mainly that our choices for navigation were confusing for testers. The word ‘Projects’ cause people to ask what kind of projects… ‘Read’ …- About projects? … So we made it more clear and simple:
Projects |Read |Events |Submit |About … after testing became :
Artists |Articles |Submit |About.
Mid-Fi Prototype
During the Mid-Fi version, the big challenges were alignment and font-size. Mid-Fi without colors, photos and content helped us focus on the structure, spacing and readability only. We iterated based on feedback until we had a solid structure and readable text.
Hi-Fi Prototype
During the move to the Hi-Fi Prototype, the focus was on Color and images. It was very helpful that we could in fact choose the images to match the colors since it is a fictional site with fictional content.
We still put a lot of effort in choosing the right images and changed them many quickly to see which ones matched best. And this was actually great fun. Without having the basic structure right it would have been a mess… and we still found some small 0.5 mm alignment issues that we had to correct.
Mobile Version
The mobile version was even faster since we could build on the decisions we had made in the Web version. We changed one of the colors and the feedback was that it causes inconsistency and confusion for the user… so we changed it back! While we may be bored with a color or find a better match, the user might loose orientation when is looking for the same page on their phone.
For a full video of the interactive Prototype see Portfolio
Next steps
We could proceed with further usability testing and target the potential user of an art website that our persona Paula would use. A web magazine like Unfold would thrive on getting a lot of high quality submissions and great photos. Whether Unfold could actually provide visibility for young artists would very much depend on how many people are using the side and whether people with influence in the industry use the web magazine to look for up and coming artists. Further analysis of the industry and competitors might be helpful to position the brand and develop a brand strategy to pull it off. In this prototype we did not focus on the ‘Submit’ and the ‘About’ of the magazine which we could develop as well. Do you feel inspired by this project? 💡🦋 Let me know!! ✉️ Connect to me on LinkedIN or send me a message!
Reflection
We sure learned a lot during this projects. About how helpful it is to close study your references, how you can see high quality of a website when it works on all screen sizes, how difficult it is to make text and images work together in harmony and how helpful it is to focus on one aspect at a time and build the Design up — to first have vague idea would the product will look like, then gradually plan the visuals and then start drawing, wireframing and testing.
Working together on this project allowed us to complete this project in only one week and helped us make decisions faster. If you can ask someone else or tests, this helps to be productive and to quickly get a fresh perspective! Thank you for your collaboration Liliana Sampaio!
Check out the summary of this project including a video of the interactive Prototype on my Portfolio.
If you feel inspired by the idea, you want to code the website for your developer portfolio or you want to connect for any other reason, reach out!!
Connect to me on LinkedIN or send me a message!
