Mobile Experience

Preliminary considerations

  • Content distribution — to what extent should the booklet be modified to fit the mobile experience?
  • What qualities of my booklet are appropriate for an interactive experience?
in-progress booklet spreads

Because I had little experience designing for an interactive experience, these questions were hard to answer at first. I was, however, excited to include recurring elements such as color, artifacts, and (grid) lines.

Site Map

To gain more clarity on how I would incorporate these visions into my mobile experience, I went through many attempts to plan out a user flow via site maps.

Iteration 1 & 2

After a few attempts to abbreviate Aicher’s work into a few sections, I decided to stay with the “life journey” approach I did with my booklet.

Final Iteration (mainly just an outline of what content I wanted in each section)

Wireframe Sketches

Home and Nav sketches
Balancing cohesion and uniqueness of each page

Everything in between

To give a sense of cohesion with my booklet, I decided to keep the home screen monochromatic, with the emphasis on the grid lines that are fundamental to Aicher’s design philosophy.

Onboarding/home screen experience iterations

To offset the plainness of the monochrome, I leveraged color for the navigation bar. The rectangle forms are inspired by the folios in my booklet! After experimenting with some strictly horizontal/vertical treatments of the rectangular form, I decided to play with angles to offset the rigidity of the grid background.

I intend to animate the nav bar so it looks like the rectangles file out like cards — this would be a nod to the tactility of the artifacts that make up a lot of Aicher’s work in the mid to late 20th century.

Folios → Nav bar
Navigation iterations

The rest of my mobile experience was a guided walkthrough of Aicher’s life journey.

Some elements I carried through from my booklet:

  • limited but distinct color scheme per section
  • playing with fill vs. line
  • playing with dark vs. light
  • typefaces (Univers Condensed + Rotis Semi Sans)
  • educational/informational approach
First attempt to layout guided tour
Soft Deadline

Final Mobile Experience

For final submission, I added more interactive elements such as the ability for users to flip through 1972 Olympics artifacts and see pictograms in motion. I also cleaned up the transitions and tweaked compositions in all screens.

--

--

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