slope
Context
The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content.
​
With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and dive into it.
Challenge
Design an online platform for a magazine directed to meet the needs and goals of one of the presented User Personas.
​
Device: mobile
Time: 4 days
Team: 4 members (Elké Wolf, Tatjana Pfennig,
Clotilde Fourrier and myself)
My role
​
• Product Designer
• Survey construction
• Conduct user interviews
• Research analysis
• Wireframing
• Prototyping
• UI Design
• Testing
​
Methods & Tools: Lean Survey Canvas, Quantitative Survey and Qualitative Interview, Competitive Analysis, Empathy Map, Affinity Diagram, User Persona, Journey Map, Moscow Method, Branding, Moodboard, Style Tile, User Flow, Wireframing, Prototyping, User Testing,
Figma, Maze
1. Empathize
Research
Survey
We dived straight into our research, as we wanted to understand our users, their behaviours, needs and pains.
We created a survey and distributed it on various medias (Slack, Facebook and Instagram). For this quantitative research method, we had 18 respondents and 39% were between 36-45 years old.
These were our main findings:
​
​
​
Interviews
Using the survey as a base, we wanted to create a space for discussion where we could study and observe our users more in depth. So we elaborated and opened some questions and we conducted 3 interviews as a qualitative research method.
Our findings revealed that users turn to webzines and print magazines for inspiration, getting informed and also feeling uplifted at times. All 3 interviewees prefer browsing a webzine to spending time on social media — as it leaves them feeling more fulfilled because they get educated or informed on different topics.
​
User persona
For this project we were presented with a variety of user personas and voted in favour of Candice, a 28 year old trendy marketeer.
Competitor analysis
Each member of our team studied a competitor. We analysed their style, colours and layout. We put all our findings in our FigJam file and had a meeting to brief and centralise our information.
Vogue
​
• bold
• black & white
• endless scrolling
Nylon
​
• colorful
• big banners and images
• endless scrolling
Dazed
​
• minimal
• black & white
• endless scrolling
AnOther
​
• minimal
• black & white
• endless scrolling
After identifying our main competitors — Vogue, Nylon, Dazed, Another — we performed an analysis that revealed the following: apart from Nylon (who is more into colours), the style is mostly black and white, they all use big, glossy images, minimal layout and endless scrolling.
User journey map
We imagined and illustrated Candice’s user journey.
​
She is on the train, on her way home after a long day of work and she is browsing Instagram. One influencer that she follows links a pair of sunglasses on Vogue’s website. Candice is interested so she clicks the link, but cannot easily find the glasses. She arrived her destination, so she must put away her phone and get off the train. Since there was no way to bookmark the article, she can no longer find it later. She is frustrated and feels like she wasted her time.
2. Define
Affinity diagram
We centralised our findings into and affinity map and then proceeded analysing the information.
We brainstormed and worked together to develop our problem and hypothesis statements.
​
We set a timer for 10 minutes, and individually wrote down some problem statements, hypothesis and “how might we” questions. We chose the most appropriate ones using a 3 dot voting system — this way, we made sure we are on the same page as a team by using a democratic approach.
How might we?
Hypothesis statement
The Moscow method was very helpful for this part of the process. We decided on one must have: save an article by adding it to favourites and some could haves that we might implement in the future.
Brand attributes
We identified our brands's values: dapper, cultural, easily-readible and bold.
3. Ideate
Lo-fi wireframes
We know it is important to let your creativity flow and don't fall in love with your solutions. We decided to welcome all ideas, so we grabbed paper and a pen and the next step of this sprint was for us to implement our UX findings and bring them to life in the UI part of the process.
We again set a 10 minute timer to individually sketch our lo-fi vision of this project. We then voted for our favourite version, created a site map and used it to build our mid-fi prototype.
Site map
Mid-fi prototype
We voted for our favourite features from each lo-fi wireframe, and put it all together in a mid-fi version.
Mid-fi prototype test results
We wanted to understand if we managed to successfully implement our vision, so we decide to test our mid-fi prototype in Maze.
This is a key step of the sprint, that helps us save time and resources, as we can easily reiterate while we are still in this part of the creation process.
We had 26 testers with a 23% rate of direct success and 47% indirect success. 30% gave up. We collected feedback from our users and our main takeaways were:
​
-
we need to add a back button so users can easily navigate
-
provide visual cue that the page is scrollable (both vertical and horizontal) to prevent a false bottom scenario
-
add a “back to top” button for quick info access
Moodboards
Each of us created a mood board and pitched it to the other members of our team.
We then came up with name suggestions and possible fonts. Using the same democratic process, we voted for our favourites.
Style tile
After deciding on the name and fonts, we created 3 different style tiles and again — voted for the one we thought will appeal to our users the best, based on our research.
We chose our brand colours, icons and text styles.
Design system
4. Prototype and test
Hi-fi prototype
What are we doing next?
Our focus now shifts to observe our users and get more feedback from testing. This way, we can reiterate and therefore improve our webzine according to our findings.
The next step is to implement our “could have” features and keep adding dimension to our product.
Key takeaways
This was an intense 4 day sprint, so prioritising was crucial in order to deliver this MVP.
Good time management skills are also needed and what worked best for us was creating a roadmap during the first day of the sprint and sticking to our schedule.
We’ve come to understand that creative processes and tasks are difficult to divide when working in a team. We successfully managed to make each team member feel seen and heard and we made democratic choices based on voting.
We started with curiosity and an open mind, we learned a lot, we listened and we shared our vision and — most importantly — we came together as a team and brought this project to life!