MOD — Editorial Design Week 5
A 6-days design sprint at Ironhack featuring Figma, Fashion and Principle.
Week 5: Editorial Design
The Task: Designing an Online Editorial, user-centered of course, and responsive — as nice on Desktop as on Mobile.
Jumping straight into Design Thinking, we went as follows:
Step 1: Empathize.
We went out into the jungle of the WeWork Co-Working Space and bothered a bunch of busy tech-people with our interview. Surprisingly, (almost) all of them we´re very much willing to talk about their reading habits, favorites, and of course frustrations.
Accordingly, our User Persona
- Adam, 27, Business Lead in a Fintech Company
- cares much about looking on point and leaving a neat impression on others
- loves surfing their favorite fashion & lifestyle websites on his Desktop PC, in-between working sessions or while waiting
- surfs interest-driven, clicking on what catches his eye first, always image before text
- wants his online editorial for free (so having others pay for it via advertisements).
Therefore, his major pain point is that the advertisements bother his reading flow. They disturb him popping up/ flying around/ covering up menus and content etc.
Step 2: Define.
Clearly, our job to be done here was to integrate ads in a pleasant way that works for Adam, as well as (on a side note) for the brands paying for Adam´s free experience.
From our Visual Competitive Analysis, we identified a bold common sense among Online Fashion Editorials:
Minimalist Black and White, much space, and heavy emphasis on images. We decided to take that in, but we also wanted to add something to that, be recognizably different at first glance. Because let´s face it, you wouldn´t have guessed that the 3 screens up here are from 3 different magazines, either.
Step 3, 4 and 5: Ideation, Prototype & Test.
We went through several designing stages in this process, featuring more interviews, usability testing, AB testing and a lot of desirability testing.
The most fun part for me personally was testing this clearly fashion-related design on people with an expressed complete disinterest in fashion/ lifestyle.
It was hilarious. And also generated priceless insights.
We designed the Prototypes for Mobile and Desktop in 6 days using Figma (Design) and Principle (Animations).
Reflection
No blood, but sweat and (laughing) tears for sure. We had tons of fun and took away amazing insights.
In the process, we faced 3 major decisions.
Designing from small to big, Mobile First, the transition to Desktop was a challenge we would have dedicated more time — if we had. Instead, we decided to focus on digging into animations, using Principle for the first time on Thursday. So, all you saw in the Prototype was done on half-a-Thursday.
Only having used Sketch to design so far, switching to Figma and teaching ourselves our ways around it was an additional challenge we set ourselves despite how limited time was. However, I wouldn´t want to have missed the experience of designing collaboratively, literally on the same page at all times.
🙏🏽 Thanks y´all for reading/ checking our work!
Make sure to also check 👉🏽 Rony Rom´s Profile 🔥!
