The Design Process

Creating an approachable brand across multiple mediums

Shout Your Worth is a toolkit to help you communicate your value. This is an article in a series about the development of the kit, done as part of the Interaction Design capstone at Northeastern University in 2018–19.

When people think about a tool to help reflect on person and professional experiences, it tends to be boring and less exciting. When strategizing about designing our visual identity, we wanted our brand to be fun, approachable and enthusiastic to the player. We wanted it to communicate a strong sense of purpose and direction thats not intimidating.

Personality Levers

We began our branding process by outlining our thoughts on personality and characteristics of the toolkit based on various adjectives. Based on the nature of the game, we wanted it to be approachable and conversational, we wanted our players to celebrate each other and embrace friendship. While we are targeting women, we welcome male counterparts to engage in the experience.

Building Brand Elements

Based on the personality levers, we had each member bring in mood boards with directions they thought would be approachable and fun. Narrowing down some key concepts, we were drawn to patterns and hand-drawn illustrations that would evoke a sense of approachability. We began experimenting with different textures such as crayon, ink and watercolor to gain an idea of how these elements could be used.

An example mood board.

We then narrowed down on water-color as our main texture, and started experimenting with painting out various patterns on paper. As we experimented, we scanned our designs and added various color palettes to determine our direction. Simultaneously, we chose a primary color palette that had distinct colors to differentiate between different cards; blue, green, yellow and a coral pink.

Our color palette.

As we continued experimenting with various patterns we emerged these patterns with our color palette, mocked it up on our card template and brought it in for critique during our class sessions.

Through trial and error of matching colors and with patterns we locked down on a few concepts that we really liked. We decided to keep the outside of the cards bold and colorful while the inside would be simple and elegant to balance the tones.

The final card designs

Logo Design

Along with the designs for the cards, we explored logotypes and having typography that complimented our values of fun and approachability. We began by drawing out some logo ideas, initially we wanted to bring out the bold and strong aspect so we chose to include an exclamation mark as part of our logo. As we put our logo in context with our card designs, we came to the conclusion that the exclamation was unnecessary and the brand elements speak for themselves. Through feedback and iteration we decided on a simple logotype with the typeface Avenir, that would also be used as our title font for the card names. To further experiment with the approachability within typography, we wanted a serif font that would compliment our strong sans-serif font, we decided Prospectus Pro M would be a suitable typeface.

Logo design evolution

Keeping our user experience in mind, we designed the content of the cards to be reversible to ensure that people can read the cards both ways. We decided that a play-mat was best to give guidance and directions on how to format value statements and direct the game.

The final play-mat design

Rulebook

We originally chose to format our rulebook as a booklet, using the size for the medium booklet from the manufacturer we chose. However, we soon decided to change the format to an accordion with the same dimensions, since this gave us greater freedom to add pages as needed. Unfortunately, it also made it difficult to print the rulebook, since we we discovered that many print shops could not print such a long document in one piece! We plan to revisit the format of the rulebook in order to smooth production going forward.

In writing the copy for the rulebook, we looked at other rulebooks for games like Catan, Cards Against Humanity, and others. This helped identify what we didn’t want — giant blocks of text — and what was helpful — images of the game components, clearly-labeled sections, and examples for instructions. There was no way to get around being text-heavy within the rulebook, but splitting them up into sections across separate pages helped keep the content digestible, and gave us room to add some decorative elements.

The copy of the rules evolved a lot thanks to feedback from play tests. Thanks to all our friends who tested out our toolkit, and special thanks to Elin Carstensdottir for generously sharing her expertise in game user experience and play testing, which helped make the rulebook phrasing a lot clearer.

We decided to use the extra real estate on the back of the rulebook to add a banner saying “You’re Worth It!” as a fun bonus.

Packaging

Once we locked down our card and play mat designs, we designed our packaging around similar elements. “How do we create eye-catching packaging that balances with the use of patterns on the cards?” We had each member bring in ideas, which we then picked out elements that stood out and narrowed our concept. We didn’t want it to be identical to the card designs, we wanted to integrate patterns from the cards with more textures, colors and shapes. We initially experimented with bold packaging by using strong colors only to find that it was overwhelming, which is an aspect we didn’t want our users to feel. We iterated on the busyness of the integrated pattern and settled on allow the logo and text to breathe with more white space and play with emerging patterns. We then designed the information on the packaging, such as requirements for the game, content for the blurb and a barcode that takes the user to the website!

Iterations on the packaging design

The Marketing Website

One of our goals was to increase the accessibility of information that could help women advocate for themselves. To maximize accessibility, we planned to distribute our toolkit online via free PDF download. To achieve this, this we needed a marketing website that would make people want to play the game. We took inspiration from other card game marketing sites, such as Cards Against Humanity, Monikers, and Spaceteam.

Based on our research, we identified the key information we wanted our site to include:

• What our toolkit is
• What a download gets you
• What people say about the toolkit
• A sliver of what went into the development process

We iterated on some low-fidelity wireframes and then moved on to high-fidelity designs, making sure to keep the look and feel of the game consistent with the box and rulebook designs. We used Gatsby.js to develop our site, the final version of which can be viewed at shoutyourworth.com.

Wireframes for shoutyourworth.com