Editorial design, 5 days design sprint.
Team: Silvia Ivanova and Oscar Well (me)
Tools: Figma
Timing: 5 days
Briefing: Create a responsive editorial site from scratch
Tools: Figma
Timing: 5 days
Briefing: Create a responsive editorial site from scratch
During week 5 of the Ironhack’s bootcamp, my partner for this project Silvia and I got the task of creating from scratch a responsive editorial site, a magazine. Let’s start by the end, the result of the hi-fi prototype and after that, we can dig in the process of how we get there.
Our user persona
We started by getting a user persona along with the briefing
Elaine (35) — The Eco-Friendly Researcher
She reads National Geographic, The New Yorker, Broadly.
She wants to invest more in self-care and self-love while being good to others, seeding a more empathic society.
She volunteers for the community
She reads during work breaks. She often works at home, when she’s not at university or the library.
Goals: be more rational, Discover new passions, achieve a good work-life balance.
After doing the brand positioning and the visual competitive analysis, we realized the tree magazines that our persona uses to read, are quite different in terms of design, the only similarities between them are the content they use, so it seems like for our users the important thing here is the content over the design.
That’s the reason why we started to consider creating a minimalistic site where what prevails is the content but the design still there in a clear and elegant way.
That’s the reason why we started to consider creating a minimalistic site where what prevails is the content but the design still there in a clear and elegant way.
Visual competitive analysis
Moodboard
At this stage, he faced our first blocker as a team in the early stage of our conceptualization. We found out that our initial design style was not the best solution for our user persona. For this reason, we conducted an additional 10 interviews to get the whole team on the same page for the visual design direction.
We knew that we wanted our brand to be natural, elegant, minimal and fresh, so we finally get this moodboard.
During a brainstorming session, we also came up with the name of our brand: Natürlich (which means Naturally in German).
We knew that we wanted our brand to be natural, elegant, minimal and fresh, so we finally get this moodboard.
During a brainstorming session, we also came up with the name of our brand: Natürlich (which means Naturally in German).
Natürlich moodboard
Style tile
Low, mid and hi-fi’s
We created some low-fi wireframes using the crazy 8 sprint technique to get some ideas, and after decide for one, we move into the mid-fi’s and we started our first tests
Low-fi wireframes
Mid-fi wireframes and grid
Hi-fi wireframes
The breakpoint for iPhone X
Learnings
Different people usually have different points of view for the same topics so this week I’ve learned that to get the whole team on the same page, can be sometimes difficult and good communication and keep the mind open is really necessary.
Figma is really useful when working in a team, much more than Sketch.
Animation rocks, but it consumes a lot of time to master that discipline.