Week 5 Ironhack— Digital Magazine

The final result showing two viewports: Mobile & Desktop

This week we worked in pairs to develop a hi-fidelity prototype of an editorial digital magazine. We had to think of the responsive design i.e. how the design will work across more than one device (viewport).

We designed a desktop and mobile interface of the digital magazine which you can see above.

So how did we get there?

• Research
• Design
• Prototyping
• Testing
• Iteration

As this project was primarily focused on the UI, we already had user personas to work from. Daria (my team mate this week) and I chose:

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.

The points above in bold are what we focused on when we started brainstorming magazine ideas. It’s important not to design for yourself so we did a lot of research on current digital magazines that our user Elaine might read aside from what is listed above.

Research and Analysis

Pinterest was really helpful this week for curating images and for giving us ideas on content that could be included in our digital magazine. The magazine, ‘Ginger’, formed almost organically from the research as we referred back to our persona any time we got lost.

We also found the Visual Competitive Analysis especially useful for this project. Essentially you analyse and dissect the competitor’s brand and it’s visual components. They give insights into layout styles, colour usage and font combinations which would guide our design later.

Below you can see an example of 3 magazines we selected to analyse.

Visual analysis of Women’s Health

Visual Analysis of Health

Visual Analysis of Yoga Journal

We also did a brand positioning map which helped us visualise where our magazine fits in the ocean of online digital magazines. We focused on magazine genres as opposed to specific brands to give ourselves a broader perspective.

Where our magazine ‘Ginger’ fits in the landscape of digital magazines

At the same time we were defining what brand adjectives describe our new magazine’s brand. We condensed it to a few descriptive words of what the brand is and what it should never be. Again this helped keep us on the right track for the design.

We created a mood board to help ensure our brand attributes were being communicated visually. This was much more difficult than I first thought because it is not just picking nice photos that work well together. It is about manufacturing feelings and associations — and if the feelings don’t test how you set out, then you have to change it. The brand is not what you want it to be — it is what other people perceive it as!

Our mood board

Testing

So we tested the mood board by asking participants to select 5 words they associated most with the mood board. You can see the results below:

Words associated with the mood board

1. Spiritual
2. Natural
3. Healthy
4. Calming
5. Ecological

We also asked participants to give their opinion on what age group the mood board was directed at. You can see the results below:

Perceived audience age group of mood board

39.1% : 32–44 years old

45.7% : 26–31 years old

So in general, the mood board testing went well. There were a few changes we could make when considering the design, but it was a good reference point.

Style Tiles

We created several style tiles which are used to inform the design by making choices on e.g. colours, fonts, layouts and so on so you can see, roughly, how the combinations look before committing to the final hi-fidelity finish. This was really difficult for me because I kept changing small elements of the tiles and spent way too long on it. I could easily have spent the whole project length (4 days) on fixing the style tiles!

This time wasted meant that we didn’t have time to test the style tiles so we had to make the decision and went with the style tile below:

Our Style Tile: With fonts, logo, colours etc

From there we built the mid-fi wireframes together in Figma to guide us. As we were 2, we needed a strong foundation to work on the hi-fidelity screens or else they may have ended up looking different from each other.

Mid-fi wireframes

We made the hi-fidelity then smoothed out the inconsistencies between our work before prototyping it in Figma.

We then tested the hi-fidelity prototype with classmates and got some feedback to iterate. Luckily there weren’t too many drastic changes and, honestly, if there were we wouldn’t have had time to fix it.

The hi-fidelity screens we designed for the prototype (in Figma)

I was really keen to sink my teeth into Principle, which is a powerful animation software used to create more complicated and visually appealing transitions, than say Figma — but our prototype didn’t really require any complicated transitions or animations, and in any case I didn’t have much time to play around with it. I learned the hard way the importance of organising my layers as I had a nightmare of a time trying to tidy up the files for seamless movement between screens. In retrospect Figma prototyping would have been more than sufficient.

Final Desktop Prototype

Considerations

I spent too long on style tiles — specifically I spent too long on one style tile trying to make it perfect, when I should have spent that time trying different fonts and different combinations of shapes and colours to test. I have to remind myself that each part of the process is a tool that informs the end result, it is not in itself the end result and everything can be tweaked, changed and iterated as you go along the design process.

Next Steps

I’d like to spend more time on the animation of the prototype to include hover animation to better guide the user through the website, especially in the burger menu.

I’d also like to test the navigation because we did get feedback that the burger menu is packed. This was actually intentional: our reasoning was that the user goes on the home page and browses by scrolling — just like flicking through pages of a magazine. The user doesn’t necessary have a specific article in mind or even a specific topic; but if they do have a specific topic in mind they can go to the burger menu and see all the article topics or use the search bar to go to something specific in very few clicks.

However, it’s true that there were changes and many decisions taken throughout that were made quite spontaneously under the time pressure that weren’t tested. So in conclusion: Test, Test, Test!