Process Book: The Seen, Unseen

04

the process a series in discovery, research, refinement & criticism

MOLLY MAGNELL CAPSTONE I: FORM & FUNCTION

VOLUME IV: THE SEEN, UNSEEN FALL 2017

SAM FOX SCHOOL OF DESIGN & VISUAL ARTS AT WASHINGTON U. IN ST. LOUIS

04

the seen, unseen Molly Magnell

01

the research

Molly Magnell

The bar at The Gramophone

8

04 - the seen, unseen

concept

I was recently at a bar and sandwich shop in Tower Grove called the Gramophone with my old suitemates. One of my recurring problems with going out is never knowing what kind of beer to order. I know a couple of brands I like, but I don’t know categorically what kind of beers they are, so I’m completely lost when it comes to dealing with local craft beers. The Gramophone was particularly confusing because all of their signage was written on a chalkboard at the back of the bar, which I could barely read. I had to ask the bartender for help, and even the consultation was awkward because I wasn’t sure how to describe what I liked. This inspired me to create a navigation app to all the offerings at the Gramophone— from the drinks to their sandwiches to the arcade and board games scattered around the bar.

9

My first idea was to create a sort of thin menu book to categorize everything. The drinks and the sandwiches and some of the game pieces followed this same vertical orientation. I thought one side of the page could be a picture of the item and all the statistics, ingredients, game play instructions, and etc. could be on

10

Initial studies for what this mini guide book could look like

the backside of the card. I thought this could be like a complete pocket guide to the bar. As I started making prototypes, it didn’t feel like much more than a menu. The other struggle was getting photos of all the sandwiches that could fit in the same vertical orientation and be consistent.

11

Molly Magnell

12

04 - the seen, unseen

I scrapped that idea in favor of something someone could interact with. I narrowed down the options to specifically a beer guide in the form of an app. I wanted some sort of system that could tell me what kind of drinks I would like from the Gramophone’s offerings. I thought this could exist as a combination of education and beer matcher, where the app could explain details of the brewing process and how ingredients alter the taste of the brew.

I started by researching all the beers available at the Gramophone (available from their Untappd page). I made spreadsheets thinking of different ways to organize the beers—by name, by type, by ABV, by rating, by IBU, etc. From then, I started to develop questions and categories that would bring me from knowing nothing to making an educated beer choice.

13

Molly Magnell

inspiration

At first, I was unsure of what packaging an experience entailed. I took a lot of inspiration from box subscriptions, which were curated items under some unifying theme. Some boxes, like Birchbox or Dollar Shave Club, come cohesively packaged with extra elements to unify objects under a brand. I also looked at goodie bag collections to see how an event could be represented through just items.

A collection of branded experiences from subscription boxes to museum interactions to technology adapters.

14

04 - the seen, unseen

15

Molly Magnell

Above: Box subscription samples Right: Descriptions of different parties and goodie bag services offered by a high end retailer. I saw these as inspiration to describe the components needed to package a particular experience.

16

04 - the seen, unseen

Al Capone Party Location: Chicago (where else?)

Date: April 15 – (Capone was arrested for tax evasion) Contents: In a cello bag – playing cards, pair of dice, magic handcuffs and Windy City Snack Mix. Client is adding airline size bottle of gin and a chocolate machine gun (provided by Imagination). Finished with gold bow and a custom card which was a replica of the Chicago Tribune with headlines announcing Capone’s capture.

Aruba Incentive Trip Location: Aruba Contents: In a beach bag – 2 Beach towels, 2 visors, 2 t-shirts, 4 stadium plastic cups, 1 pair Oakley Men’s Sunglasses, 1 pair Oakley Ladies’ Sunglasses, Burt’s Bees Lip “Balm, Kite in a tin, 2 flashlights, carabiner watch and a wine stopper. Bag was tied off with a tropical ribbon and the luggage tag was tied onto outside of bag.

Tony Awards Event for Top Executives Location: New York Contents: In a Comedy/Drama Mask Hinged Box which was wrapped with a black suede leather bag – Broadway Coffee Table Book, 4 Playbills, CD from top 4 Musicals. Suede bag was wrapped in antique gold netting and tied off with gold cording and velvet bow

17

02

the discovery

Molly Magnell

20

04 - the seen, unseen

Left: The variety of logos in use currently at the Gramophone Next: A variety of classic game vector patterns I created to represent some of the games I played with my friends during my visit.

From my research I learned a lot about what makes a particular beer special and how the different categories work. I turned my project into a bit of a rebrand for the Gramophone as well. In addition to their confusing and hard to read menu, they had inconsistent logos that weren’t selling the bar’s name or its history as a music venue (although today they’ve scaled down to just hosting live local musicians on weekends).

21

Molly Magnell

22

04 - the seen, unseen

23

Molly Magnell

Golden Yellow HEX: FFB511

Dark Grey HEX: 161719

NATIONAL 2 TEST BOLD ITALIC, 25 PT. Akzidenz Grotesk BQ Medium, 18 pt.

Akzidenz Grotesk BQ Medium Italic, 13 pt.

24

04 - the seen, unseen

Left: Some of the elements I resused as part of my brand guidelines Next: One of my spreadsheets categorzing the beers available at the Gramophone

Part of the discovery portion came down to figuring out what kind of information is important and deciding how much information a consumer needed before being overwhelmed with options. I started by doing some of the leg work thinking about what beers would pair best with what sandwiches. But I decided that might be too much information and possibly limiting to customers.

I then decided the app should just show beer information because it was knowledge that could be applicable and scaled to other businesses—especially the quiz portion.

Fellow classmates have told me that they would appreciate a beer quiz because they don’t know what to order.

25

Molly Magnell

26

04 - the seen, unseen

27

Molly Magnell

28

04 - the seen, unseen

29

04

the refinement

Molly Magnell

Mockups of three of the available beers

32

04 - the seen, unseen

I had never designed an app before, so I spent a long time generating wireframes of the interactions and buttons to move between screens. My map also showed me how many screens I needed to form a complete app, and it was way more than I had initially considered.

I started designing screens in Illustrator, and then gave Adobe XD a shot, since it was designed for website and app mockups. I wasn’t comfortable with the interface, so I went back to Illustrator to finish the designs with the intention of importing the vectors into After Effects to simulate navigations through the app.

I took my designs into After Effects, and manipulated panel directions, moving backgrounds, and adding thumb taps and swipes. I didn’t have the skills or resources to code my own working app, so a simulated mockup was my next best option. I created mockups of several of the drinks too, as I imagined in my initial book plan. I mocked up draft beers in their proper cups with the label printed on the glass.

33

Molly Magnell

34

04 - the seen, unseen

Second draft of screens.

This version was designed for truly inexperienced drinkers, and users had to go through all the explanations before they could make a decision.

35

Molly Magnell

36

04 - the seen, unseen

Wireframe for the flow through the app and guide for what information falls on what screen

37

Molly Magnell

For a while I was hung up on photography choices, where a lot of stock images felt wrong for capturing the experience of the Gramophone. I took a chance by swinging in the opposite direction and using vintage photographs of people drinking and having fun to mirror the old-time aesthetic of gramophones.

Ultimately, I wanted photographs that captured the experience of a good time rather than showing generic pictures of beer.

38

04 - the seen, unseen

39

Molly Magnell

40

04 - the seen, unseen

41

Molly Magnell

42

04 - the seen, unseen

43

Molly Magnell

This spread: Original picture against digital coloring manipulations I made.

Next Spread: Illustrator workspace from the third round of revisions.

44

04 - the seen, unseen

45

Molly Magnell

46

04 - the seen, unseen

47

Molly Magnell

48

04 - the seen, unseen

49

Molly Magnell

50

04 - the seen, unseen

51

04

the criticism

Molly Magnell

Given time constraints, I couldn’t flesh out all the interactions I wanted to in After Effects, and not all of my transitions were as tight as I wished. I also wanted to redesign some of the screens because classmates commented that everything was too black and yellow and could have benefitted from more photographs, which are only seen in the beginning screens.

There were a few other display issues, such as screens not perfectly fitting in the phone frame. In the end, not all of my screens made it into the final prototype, and I don’t think my work was properly displayed.

Epilogue I gave Adobe XD another shot by recreating my panels in the app. The program definitely had its merits when it came to creating fast grids and replicating elements. The main benefit for me was being able to quickly link elements that would trigger transitions to other screens and options. The downside is that I couldn’t animate elements or incorporate moving backgrounds like I could in After Effects.

I did refine different elements, however, and added more photographs and a wider color palette into the design. I’m happy with the navigation of the app, despite not being able to program toggles for buttons.

54

04 - the seen, unseen

55

Molly Magnell

56

This book was written and designed by Molly Magnell during the Fall semester of her senior year in 2017 at Washington University in St. Louis. These five books exist as a catalog of the process and design thinking that went into the work she made during her design capstone titled Form and Function taught by Professor Chrissi Cowhey.

This book was typeset in: Diversa Soft Serif, 35 pt./ 42.5 pt. leading for the cover; 24 pt./ 28 pt. leading for the chapter headings; 118 pt. for the chapter numbers Quadraat Regular, 9.5 pt./ 12 pt. leading for the body copy; 8 pt./ 9.75 pt. leading for the captions with a 1pt. rule.