NOVA — UX/UI Design Case Study

The UX/ UI journey to designing an app for the Academy of Tomorrow

Introduction

I’m excited to present a behind the scene’s look at the creation of the NOVA app for The Academy of Tomorrow. Follow my journey as I give you a look at my role in the creation of the app, along with my UX and fellow UI counterparts.

I’m going to present a brief overview of the UX process from my own lens and go a bit more in depth when it comes to my area of expertise. However, the two specialties overlap in so many ways, I will do my best to paint an accurate picture of both sides of the story.

Meet Our Team

I worked with the best team imaginable. Mark and Nadia championed the User Experience design and nailed their project objectives with a lot of class. Anoop and I communicated really well as a UI team.

Together, we worked very well and enjoyed a lot of laughter as we sought to bring The Academy of Tomorrow’s vision into a mobile platform. We continue to collaborate on a regular basis.

Meet Our Client — Lital Marom

We were thrilled to partner with Lital Marom, the founder and CEO of The Academy of Tomorrow. Lital has a fascinating history behind her.

Academically, she studied economics and investment banking at NYU; as well as management and transformative strategies and artificial intelligence at MIT. Talk about being starstruck.

She eventually became passionate about reforming education and founded TAoT; a place that empowers young people with the resources they need to get ahead in their respective fields of interest. She want’s to give them the hard skills they need where the traditional education system is lacking.

She does this by linking them up with real world projects.

NOW, she is ready to turn the Academy into something more accessible. An app that connects capable people to these career opportunities and to each other.

So, it was time to start designing an app that could connect young people to opportunities through completing “projects” that corporate organizations would put forth. This allows the organizations to seek out top talent and accelerate the hiring process, and allow young people the chance to be seen and heard for what they bring to the table in and amongst a herd of competition and resumes.

With all this in mind, the UX team took to their user research. The UXer’s are in charge of understanding who our user is. They determined that there were two goals: a business goal for TAoT as well as other corporate partners involved, and the user goal.

Project Objective

To deliver an effective platform that encapsulates both the business goal and user goal.

Here is a brief outline of their process to bring this about.

First things first,

User Research

The UXer’s conduct interviews and surveys to create an accurate persona for us to base our design around. A human with needs, pains and passions. The process goes like this:

  • Contextual Inquiries
  • Journey Map
  • Data Analysis
  • Key Findings

They determined our Target audience to narrow in on.

They were able to collect data from 41 different sources by means of interviews and survey responses. This gave us a good amount of hard data to work with.

Notable Findings

This was notable because it proved the essence of our main pain point. The fact that young people are, in fact, looking for opportunities. Unfortunately, these efforts are not met with results.

Interview Insights

“ I would say that it is a tough fight to get desirable work. There are, however, a lot of jobs out there that are more undesirable. It’s definitely a tough market to break into at a higher level.
“The job market is totally saturated and it is really hard to find a job. It is all going digital, lots of pressure towards tech positions. The job market has become very intimidating, I don’t know where to even start looking”.
Staying competitive is hard because every single year everyone is doing something to fill every single industry gap. It’s even more intimidating when you have those gaps that aren’t filling those gaps.”
“It’s even more challenging to be confident in your abilities when you’re constantly comparing yourself to people, networking is hard as well as staying competitive. Networking with the right people is also a challenge.
“More higher level thinking more programming and creative roles. We will be able to tackle more complex problems instead of the more industrial positions.”
“I feel like a lot of jobs are going to be replaced with automation… tech is only going to become more relevant.”
“There will be more developed countries. Humans will have to be very creative, and demonstrate problem solving capabilities.”
“Everyone is going to be solving for something that is going to push us forward.”

Meet Our User Persona

A tool that UX/UI designers use to bring our user journey to life and keep us in check throughout the process, is to create an actual user persona. We develop this persona, based off the data we gathered in the research period and we’ll keep this persona in our minds as we implement the design and really dive into their emotions and story.

Nav grew up in India and experienced a lot of poverty and hardship as a kid. His parents worked very hard to get their family to Canada and Nav has always desired to work just as hard and reach the potential that he feels he has, especially with all the opportunity that he’s been given by his parent’s and Canadian values.

Getting More Concrete

We are getting more and more concrete as the data starts to formulate our persona and our key features. When designing an app, it is easy to get sidetracked at want to have it function in 10 different ways. It is important for us to narrow down the absolute MUST HAVE features, based on Nav’s needs.

We also formulate user stories with “I” statements. To further bring the user’s needs to life and solidify our MVP.

Time to Design

After all this, the UX team is finally ready to begin creating wireframes, and that starts by channelling all this data into a user flow.

Now for the moment we’ve been waiting for. It’s time to bring all this research to life through the strategic use of user interface design.

The Why

So as UI designers, we start off by investigating into emotional territory.

Not the logistical reason behind why someone would use this app, but the heart reason.

It’s our job to make sure that the visual experience, “the clothes of the project”, are in line with the USER’S NEEDS but also appeals to his HEART.

After a lot of discussion between ourselves and with Lital, we came up with this WHY as an emotional base for the design.

There’s a push towards his dreams of wanting these opportunities — being hopeful and even a bit aggressive. But also this desire to be seen for who he really is. As a human, not a number. As someone with potential and skills, not a resume that lacks experience.

Gut Testing

So HOW do we go from something so emotional, to something more concrete?

A trick UI designers often do is something called GUT TESTS.

I like to think of them almost like an eye exam for aesthetics. We ask the viewer to rate the image they see on the screen on a scale of 1 to 6 in 20 seconds or less. To reveal a pattern in that persons visual preferences.

We performed this with Lital at our first meeting and got a clear sense of her own visual leanings.

The Mood

Through the gut test and conversation with Lital, we developed a list of Key words that we gleaned from our meeting.

We narrowed our key words down to these three.

Hopeful being perhaps the most important. The future is bright for Nav.

Even though he might have certain fears and frustrations with his job search, we want the emphasis to be optimistic.

We want him to find a SPARK of HOPE through (what we’d eventually come to call) Nova.

User Gut Testing

But we were still curious. We weren’t confident that we had a grasp yet on the USER’S visual preferences?

Our own opinion’s as two designers, isn’t enough in UI. Everything must be based on the user.

So, as well as gut testing our client, we gut tested the user demographic to make sure we were understanding their visual needs as well.

It was a good balance as Lital in a way, represents the corporate user and we were able to see what both parties tended towards visually.

Findings

We also wanted to keep in mind that, this app isn’t only an app that helps you connect to job opportunities but it’s a SOCIAL app as well.

We were realizing more and more, these marriages between two dichotomies. Both corporate and youth users. Both a test taking (anxiety) and a social app (relaxing). Serious but exciting. Clean but not scared of colour.

We decided that this had to be our aesthetic mantra.

Brand Identity

In terms of branding, something we needed to distinguish was where the app existed in relationship to the Academy of Tomorrow.

Were the two platforms the same or distinct in terms of their branding?

We determined that the app needed its own identity.

But shouldn’t feel foreign to its mother organization.

The branding of the Academy exemplifies their values of modernity and ingenuity when it comes to rethinking education so we wanted to keep that central in creating a new identity for the app.

Name Exploration

We recognized then, that the app needed its own name to accompany its own identity.

Our team brainstormed around a hundred names, each taking the app in a slightly different visual direction.

We were looking for something short and sweet that encapsulated the academy’s vision.

And also something that could maybe give us a metaphor to work with.

SO from here, we set about developing two very different design directions to present to Lital.

Design Direction 1

I spearheaded this first design direction. It started off with explorations in colour palates and mood boards.

Palate Number One
Mood Board

I spearheaded this first direction. Deciding to focus a lot on the mood and quality of the word “unique”. I wanted to emphasize the user’s unique experience in their journey towards their own dreams and success.

I also wanted to tie it back to our WHY and Persona.

Nav wants to be seen for all that he is and all his potential without bias.

He’s unique and he struggles to have employers see beyond his lack of experience.

This was the emotion I was building off for this first design direction.

I was hoping to take the data from the gut test and blend a friendly, colourful, yellow with colder greys and blues to capture the Academy of Tomorrow’s DNA for this project and meet the user where they are.

The research eventually lead to this final design direction:

Direction 1: Sample Wireframes

I came up with a design that I called “The Young Entrepreneur”.

I was inspired to insert a thread of the Academy of Tomorrow’s branding concept into this design direction. Something that resembled higher learning but with a modern edge.

I used the metaphor of a TELESCOPE; an instrument that uses the convergence of light to aid you in observing remote objects. Suggesting that this app is a modern telescope that aids you in getting closer to far away stars of opportunity.

Design Direction 2

My fellow UI partner, Anoop, lead the second design direction and came up with a concept called The Inspired Adventurer.

He wanted to focus on the “hopefulness”. Using warm colours and names like Nova and Rise to emote positivity.

Nova, by definition, is a star at it’s brightest point.

Screen Examples

Client Chose Direction 2!

Lital was decisive and chose direction number two (above). She gave us a few edits such as making the coral/orange colour, more masculine.

I ended up refining direction number 2 by adding start whites and blacks into the mix. This achieved a more masculine look.

Lacking Consistency in Design Elements

We wanted to tighten up the design and make sure we were tying everything back to the research, the user (Nav), and the Why.

Here is where our visual language and inception diagram comes into play.

Something we have been refining from the our first meeting.

Through this design inception practice, we were able to tighten up our design and firm up our logo.

Logo Design

From here, things began to fall into place.

Choosing clean, minimal forms with sharp 90 degree angles

We wanted to hint at the meaning of the name NOVA through the app without being too on the nose.

The N letterform, naturally has an amazing shape that can tell a story of two forms coming coming together.

This CONNECTIVITY metaphor is important. And can be seen and experienced all throughout the app.

Without further ado, allow me to present, NOVA.

Please click here to view the final app in Invision.

Thank you!