A magazine to bring women closer to green technology.
As students of the Ironhack UX/UI Design Bootcamp we had to create something in our 4th Design Challenge Editorial Design. The following case study serves for educational purposes and should demonstrate our design process from scratch, including our first steps towards responsive design. If you want to join the journey with us, then read on!
Introduction to our User Research
This time we had been assigned a specific user and we decided for the eco-friendly researcher who reads magazines like National Geographic and New Yorker and whose needs and interests should be met in the magazine. This gave us a rough direction in which to go, but would it be interesting for most people and if so, what exactly would they really want to read? Also, more to the point, are people still reading magazines? We wanted to delve deeper and find out everything we could about the current situation.
By conducting surveys we tried to find out about general trends and reading interests. We received many diverse replies that made it a little complicated for us to choose which direction to go in. So, from this we learned that it is always good to be even more specific with the questions, and not to give so many options to reply to in order to filter out faster, more meaningful results. But to sum up, most respondents wanted to read about technology and science, mindfulness and lifestyle but not so much about nature.
This result produced a little dilemma for us because actually, we fell in love with the layout of the National Geographic (which was in fact also the user personas favourite) the content being mostly about nature and nature photography.
But we had always learned: listen to the voice of your user — a good designer always empathises with their user, no matter what their personal preferences might be. We listen and feel what a user says, hears and does.
The survey greatly helped us in finding out what people read and it contained a number of newspaper and magazine questions to do with a competitive analysis. From this we figured out what the main topics are in technology and we discovered something important: that there were hardly any tech magazines for women, nor were there even any women’s magazines focused on green technology!
The idea of “Tecologue” was born!
The idea was birthed in our heads and after some valuable, visual competitive analysis we created our first own moodboard! This process was extremely important. A mixed collection of colours, photos, typography that you want to use and attributes that should define what you want to transmit takes your digital product to a much higher level.
Endless flowing creativity, but hey…let’s hurry up! We need to implement the UI foundations we just learned!
The most important rule: Create a design system!
Designers are often seen as chaotic, creative individuals. Indeed they are, but great designers are also well organised in every single “stone” they build. Organising your design system well is very hard work at the beginning and as a complete newbee like me, you can sometimes lose track.
But once you’ve figured it out, things really speed up! We experienced this recently while working on our High-Fi.
Step-by-step guide for beginners
As we worked with Figma you have to distinguish between organising the layer panel and the design panel. Make sure you organise all your rectangles well and
- Styles are colors and typestyles (font, size, weight, etc.) that are defined in one place and can be applied to many objects.
- Components are things like buttons
First build a colour palette, colours and grid systems on the design. Identify your chosen shades
First try our high-fi of the mobile version:
