Mobile Experience

OTL AICHER (1922–1991)

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.