Week 5 Ironhack— Digital Magazine

The final result showing two viewports: Mobile & Desktop

So how did we get there?

  • Research
  • Design
  • Prototyping
  • Testing
  • Iteration

Elaine (35) — The Eco-Friendly Researcher

  • 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.

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.

Visual analysis of Women’s Health
Visual Analysis of Health
Visual Analysis of Yoga Journal
Where our magazine ‘Ginger’ fits in the landscape of digital magazines
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. Natural
  2. Healthy
  3. Calming
  4. Ecological
Perceived audience age group of mood board

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!

Our Style Tile: With fonts, logo, colours etc
Mid-fi wireframes
The hi-fidelity screens we designed for the prototype (in Figma)
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.

Illustrator & UX/UI designer, Berlin www.davidlymburn.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store