Challenge: Five days of a design sprint, UI design from scratch, partner-work
Designing  a responsive online platform for a magazine, newspaper or blog for already given persona directed to meet her needs and goals from scratch. Keep in mind that micro-interactions are very important (animation on Principle.)
The Persona
As the first step, we started our research by conducting some interviews and online surveys. Elaine (35) is an Eco-Friendly Researcher. She loves to read during her lunch breaks. She reads non-fictional, long articles usually.
Goals: be more rational, Discover new passions, achieve a good work-life balance. She wants to invest more in self-care and self-love while being good to others, seeding a more empathic society.
“I’d like to read more…but I don’t have time. I read on my way to work on the bus or s-Bahn. It helps me clear my head before work. I have what…15–20 min of a ride so I like to read something quick and interesting.“
We were very lucky that this time we had the entire weekend to interview and talk to the potential users. Honestly, my friends are very helpful in this process.
Visual Competitor Analysis

​​​​​​​National Geographic, Broadly by Vice, New Yorker, and Harper

We have collected some information about responsive editorial design trends. Visually we have touched upon two different categories that Elaine likes to read the most.
The first one is catching the reader with a strong visual:
1. Communication through photography vs illustrations
2. Serif font vs sans serif
The second category is focusing more on the article while leaving big spaces for the text:
1. Long stories
2. White space
3. Visually illustrated text.
Research gave us the opportunity to reach a combination of these two, which was a very time-saving choice that helped us to focus. Several iterations and card sorting, we chose 4 menu themes:
Inspiration, Mind & Body, Nature, Social Good.
Mid-Fi
Our research already gave us the hint that the editorial should offer a nice combination of articles and illustrations as well as a weekly updated podcast for the busy ones. After the ideation process, we came up with so many different solutions. Mid-Fi wireframes helped us a lot to focus on one. Here is how our editorial might look like
​​​​​​​Moodboard​​​​​​​

When it came to mood-board, I could not imagine how important it can be. That was a great learning. 👀
Our brand attributes are:
➛ feminine,
➛ humble,
➛ sustainable,
➛but never arrogant.
Having these attributes in mind, we ideated and came up with our brand name as OFFWAY.
​​​​​​​Hi-Fi
As the next step, our final hi-fi wireframes offer 3 different pages for the landing page, one of the themes and the article:

Responsive Editorial Hi-Fi for Web and Mobile

​​​​​​​Interactive Prototype
Here is proudly the interactive prototype. My favourite part of the entire sprint. I always wanted to learn animation and here we go:
Learnings
During this work, I have learned the importance of time management. I guess my previous experience as a project manager was really useful. The partner work can be very fruitful. I developed my communication skills during this work even better. And of course my partner’s reminder: Never to forget to have fun!
My biggest proud, joy and fulfillments were animation this week. 🎉
Back to Top