Zero

A mobile app for designers and creatives designed to reduce number anxiety

Project

Zero provides creatives and designers with an interactive mobile app. In addition, the numbers that each user has comes from their personal data – name and birthday. Essentially creating a unique and custom number set for the user.

As a result, my project focused on ‘The Significance of Numbers’ in an effort to reduce number anxiety. Selected from the 2020 International Society of Typographic Designers (ISTD) Student Brief Competition.

The brief requires research from the philosophical and factual elements of numbers in order to create an engaging experience for the user. In addition, the outcome should work to develop ideas that are not obvious and shine a new light on how numbers intertwine with our lives and give narratives to our experiences, both culturally and theoretically.

01

Challenge

Change the way we think about numbers and fire your audience's imagination to see the world with fresh eyes ⁠— make them fall in love with numbers.

02

Goal

To create an app that generates a number set (0-9) based on the users’ identity and personality.

03

Outcome

The Zero app provides a tool for designers and creatives to create their own number set that can be used on a day-to-day basis.

Problem Statement

A young, female creative who is entering the workforce needs to use and calculate numbers on a day-to-day basis.

The user fears numbers due to childhood education departments where all students were forced to identify as “maths students”. She connects to certain objects and people she can see herself within. It’s also important to know the user only connects with numbers through philosophical meanings because they guide and promote direction into find her identity and personality.

logos

Applied through research and the factual elements of numbers, logos is implemented through the use of text, numbers, layout, elements and interactive mathematical tools.​

Pathos

Using emotions, pathos builds connection between the user and personification of numbers. This rhetorical trope uses the users’ personal data to create an emotional connection to numbers.

Ethos

To promote the credibility of numbers, ethos aims to reduce the users’ anxiety through mathematical tools using personal number sets unique to the user.

rhetorical tropes

Research

I began with creating identities for each number from 1-9, this created a type system that would generate the custom number set, based on the users’ data. 

Each number from 1 to 9 underwent intensive research and development to identify 9 overarching core identities. The visual strategy focused on creating a series of typographic animations that placed personified numbers within a creative space.

To entice the user to numbers, the projects’ context is created to exist within the art and design environments that creatives belong to, such as music events, festivals and exhibitions. With the main product being an app, it was found that initial interest had to be created elsewhere. This introduced the concept of digital signage to engage viewers and appeal to their interest in finding their own number set through the app.

The steps below outline how the research came to create the 9 core numbers and type system to determine your own number set. 

Step 1

Understand the core characteristics of a number

With the influence of the users’ interest in philosophy and astrology, each number was given characteristics to make up the numbers identity. Characteristics included heart, personality, strengths, impression, life path and attitude. Additionally, an art or design movement was allocated to the life path to connect to the users’ creative side.

Step 2

Assign typographic traits

The next stage assigned typographic traits to the 6 characteristics. This would help to form the numbers’ overall look and feel.

  • Heart influenced the cap height.
  • Personality influenced the counter space.
  • Strengths influenced the contrast.
  • Impression influenced the stress.
  • Life path influenced the classification.
  • Attitude influenced the shape.
Step 3

Add texture and motion

The process then involved sketching thumbnails and storyboards to further enhance the numbers identity. This was created through motion by animating each number based on the personality. All animations were created in After Effects or Cinema 4D.

  1. A neon texture and futuristic effect 
  2. A floral texture and 70s effect 
  3. A playdoh texture and childlike effect 
  4. An embroidered texture and stop motion effect 
  5. A balloon texture and comic effect 
  6. 6 a quilted texture and caring effect
  7. A book-like texture and reading effect 
  8. A shiny texture and sophisticated effect 
  9. A new wave texture and inclusive effect 
Step 4

Create the number personas

Each of the core numbers formed a persona outlining their characteristics and typographic traits in which dictate their identity.

Step 5

Generate your number set

During the onboarding process into the ZERO app, a number set is automatically generated using a number portrait. A number portrait is what is used to determine your number set. 

 

How does a number portrait work?

A number portrait is 6 numbers each with a unique position that reveals an individual’s strengths, desires, personality, impressions, attitude and life path. With the research and 9 core number personas, the user can calculate their portrait and set using their name and date of birth. The first 3 numbers reflect the date of birth and the last 3 reflect the name.

  • Position 1 (heart) influenced the cap height.
  • Position 2 (personality) influenced the counter space.
  • Position 3 (strengths) influenced the contrast.
  • Position 4 (impression) influenced the stress.
  • Position 5 (life path) influenced the classification.
  • Position 6 (attitude) influenced the shape.
Example

Number set

Write down your name and date of birth on a piece of paper. Using the table, calculate the heart, personality and strength for your set. For example, Maddy Mengel and 26/12/1996.

  1. Heart: Match each vowel to its corresponding number and add them up until it becomes a single digit. This number is position 1 and dictates your sets’ cap height.
    (A = 1) + (E x 2 = 10) = 11 = 2
  2. Personality: Match each consonant to its corresponding number and add them up until it becomes a single digit. This number is position 2 and dictates your sets’ counter space. (M x 2 = 8) + (D x 2 = 8) + (Y = 7) + (N = 5) + (G = 7) + (L = 3) = 38 = 11 = 2
  3. Strength: Add the heart and personality number until it is a single digit. This number is position 3 and dictates your sets’ contrast. (2 + 2) = 4
  4. Impression: Add up your birthday date (DD) until it becomes a single digit. This number is position 4 and dictates your sets’ stress. (2 + 6) = 8
  5. Life Path: Add up each number in your birth date (DDMMYYYY) until it becomes a single digit. This number is position 5 and dictates your sets’ classification and art/design movement. (2 + 6 + 1 + 2 + 1 + 9 + 9 + 6) = 36 = 9
  6. Attitude: Add up your birth day and month (DDMM) until it becomes a single digit. This number is position 6 and dictates your sets’ shape. (2 + 6 + 1 + 2) = 11 = 2

 

With each number in its position 224892, use the personas to determine the typographic trait.

  • Position 1 (heart) is number 2 (persona 2) has a mid-cap height.
  • Position 2 (personality) is number 2 (persona 2) has an open counter.
  • Position 3 (strength) is number 4 (persona 4) has a mid-contrast.
  • Position 4 (impression) is number 8 (persona 8) has a vertical stress.
  • Position 5 (life path) is number 9 (persona 9) is a sans serif and influenced by the New Wave movement.
  • Position 6 (attitude) is number 2 (persona 2) has an organic shape.

Animations

From the research, each number was assigned a typographic trait. These traits were used to create a short animation that represented the number. Each animation has a distinct identity that uses a particular effect. All animations were digitally completed in after effects or Cinema 4D. 

Branding

Zero is a digital brand that engages with its users through motion graphics, digital typography, playful mathematical elements and bright colours. The brand utilises organic lines to create elements and chooses colours that resonate with modern maths. The typography and fonts used throughout the brand are all largely used within the digital space and work well together in creating seamless, clean design for on-screen usage.

The brand mark is influenced by the 1973 Anita calculators. The mark is a modular, display typeface that creates metonymy using animation to transform from ZERO to 2380. The typeface is designed using one shape to form a digital, yet imperfect assemble.

Zero Mobile App UX-UI Maddy Mengel Design

Outcome

The end-product is an app that speaks to its users’ who fear using numbers on a day-to-day basis.

The app allows the user to generate a number set based on their identity, creating an abstract embodiment of who they are. Within the product, features include mathematical tools for design specific tasks and further analysis into understanding their number set. 

Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design
Zero Mobile App UX-UI Maddy Mengel Design

zero, Mobile app and animations 2020