Moove agency asked me to design a new case study for one of our global clients with the headquarter in the USA. I have been given the case study copy text in a Google doc and the freedom to explore and produce a creative user interface.
I love this kind of challenge! :-)
The Golden Ratio always inspired me. It appears in some patterns in nature, architecture, paintings... as it is aesthetically pleasing.
The Golden Ratio (also known as the Golden Section, Golden Mean, Divine Proportion or Greek letter Phi) exists when a line is divided into two parts and the longer part (a) divided by the smaller part (b) is equal to the sum of (a) + (b) divided by (a), which both equal 1.618.
So I decided to use a Golden Ration grid as a starting point to design the new case study. I reviewed the copy given in a google document and split into sections.
After a few low fidelity sketches, then I mockup up a final prototype in Axure to test it with the marketing team to check if the storytelling flow was working as intended.
Once the copy was signed-off, I was able to start working on the interface layout.
The site has 8 screens and it includes the following content:
After a few iterations, I have identified the maximum width and height of the safe area. This is the space where the graphics and the copy will appear. I set it up also the global padding of the active slide to guarantee white space around the content.
Global elements of the web user interface:
Top area
Bottom area
To improve the user experience, I add the possibility to control the interface through the arrows keys and the mouse scroll feature.
To ensure consistency across the user interface when switching between the sections, I decided to apply the same movement to the diagonal stripes and headlines for all the slides. The headline and the colourful stripes move from right to left.
The idea was to create a bespoke visual for each slide and add a subtle animation (on load) to give more context to the copy.
Lastly, I have created the style guide, technical documentation and UI animation docs for the front-end developers.
Lastly, I have created the style guide, technical documentation and UI animation docs for the front-end developers.
The mobile version of the case study works only with the portrait view and it use a vertical scroll to enhance better and smooth user experience.
⋮
⋮