Nodal — The Competition App. Case Study.

Introduction

Formally called “P3”, this was our first group project with the UX students. Our group was comprised of 3 UX students (Jennifer, Lochlan, and Julian) and 2 UI students (Shirley and I). Our client project that was thoughtfully assigned to us by the instructors at RED was an app called “Nodal”, from a former RED UI student, Sarvhind. The app he proposed was for students to see competition postings, and be able to browse contestants, assemble groups, and find likeminded invdividuals. Currently there is no all-inclusive app in which people can browse competitions and also other students interested in the competitions.

Research

The first question I had was “What sort of competitions?”

Since I don’t participate in competitions, and haven’t since highschool, I had very little idea of 2018 “competitions”. Sarvhind, our clilent, wanted to focus particularly business competitions and first-year-University-of British-Columbia-business-students. Through my research, I found there there were many more categories of competitions including: writing, math, sports, hair, music, art, design, spelling, technology, urban planning, science, you name it!

After grasping that, my next hurdle was that I didn’t understand why people/companies/organizations would host competitions (and give away money?!). It seemed like an expensive and timely endeavour with a lot of work. I’m an artist so I can relate to the act of doing seemingly pointless work, but I’m not outwardly competative (I prefer behind the scenes infiltration). It turns out that hosting competitions is a way to promote companies, and to glean ideas. There is a glory in bringing people together, and creating meaningful experience that would help promote a brand, company, or organization. In design competitions, for example, it would be a good deal for a company to have a reward for a design, because they would be submitted many designs for the project without having to pay a singular designer to come up with different ideas. There are many positive reasons why people would host and participate in competitions. Even I was becoming more receptive to the idea of doing one.

And “Why?”. Which served me in finding “The Why” of the user, short for “Why would someone use this app?”. There are many perks to competing, which I will go into more in “The Why” section below.

Target market

As I mentioned above, the target market is first year UBC Sauder School of Business students, who want to compete in business competitions. These students may be international or local and are looking to connect with likeminded people, under the context of studying. Business students are characterized as being highly competative, so this is a good place to start because there is a market already in place.

Currently, Sauder posts competitions on Facebook and students use the comments to find groups, which is not very effective. For competitions that involve cross-discipline backgrounds, it is hard to find other students to be involved because the sections of the school are segregated. The app is also for students looking for other students that wouldn’t be in business. For example a marketing student might want to work with a design or fine arts student to collaborate on a logo competition.

The Why — Design Inception Sheet

So… Why do people compete? We researched motivations behind people who participate in competitions, and found that they did it to:

•Meet new people and build long lasting friendships
•Find people that can help you complete your ideas
•Inspire you to be creative, and bounce ideas off of each other
•To challenge yourself
•Become better at what you do
•Become the person you want to be
•To have fun, and win prizes
•To have more exposure, and get more recognition

Through that, we found our final “why”:

“Through collaboration, tap into your full potential”, marrying the idea of community and collaboration with self-improvement, which is what occurs when one takes part in a competition, and the deep reasoning within. Although you are there to have fun and win a prize, it’s also to feel fulfilled and to get experience, and ultimately be the best version of yourself.

We came up with two directions, one is “Self-Actualization” and “Connect and Community”. We decided to go with the “Connect and Community” theme because it best reflected the Nodal values, based off of the brand-guide we were given from our client.

Space: Bustling but not cluttered (good busy), negative space (minimal and clean)

Colours: Vibrant, bright, range of colours (fun and warmth)

Shape: round (signifies inclusion), thick (playful), contrast between sleek and illustrative (not too playful)

Movement: connecting, intuitive, active (straightforward and easy to use)

Style Tile

Include mood boards, colour palettes, iconography, logo design, font choices/pairings, etc. Make sure to explain how it relates to your “why”.

Self Actualization

Connect and Community

Based on the brand guide, and talking to Sarvind, direction conveyed the idea of the brand. This direction is based on a sense of community, and trying to convey a welcoming mood.

• Warm inviting feel, to make the target audience (first years) to feel more welcome
• Variety of colours to show diversity, fun, and playfulness
• We also have illustrations in this direction to convey a personable tone of the app

Onboarding Screen Illustrations

We wanted to use illustrations to inspire creativity, and to create a feeling of fun and connection- fun that one might experience while using Nodal. We wanted to convey a personable feel, so these cartoons are like fun friends to welcome you in! By seeing the characters, you can imagine yourself being one of them, thus taking you further into into the app. I included different characters to indicate diverse minds and skill sets, that people bring to the table in collaboration. Nodal fosters diversity, and I wanted to make that part of the visual identity.

Nodal Colours

We chose four bright colours to be used throughout the app. They are a variation of the primary colours to symbolize structure. In our research, we found that community was often represented by lots of colours. The colours are also like a simplified rainbow to symbolize diversity. We named colours for personality and relatability

Here are the pros and cons of the shortlisted fonts, and the one we chose.

Roboto Condensed:

• Sleek, good busy
• But too narrow
• Harder to read on small devices

Lato:

• It’s simple, elegant, sans serif, with a bit of character
• We didn’t go with it, it’s a little too round
• We wanted the roundedness of the visual language to be contrasted with a sleeker font
• Hard to read on small screens

Final: Mission Gothic

• Versatile — had many font faces. We can use it for headings and body
• Easy to read
• It is still sleek but not too serious, not too playful
• So we felt it went with the mood

Logo Ideas

We narrowed it down to 4 themes that we thought represented Nodal the best.

Hexagon

• Drew inspiration from the honeycomb
• Represents collaboration, unity, hardwork
• Too technical and boxy. Wanted something softer and more welcoming

Disconnected N

• The idea that Nodal would help complete the connection
• But also didn’t want to represent the disconnectivity
• Too boring

Lined N

• Abstract lines to represent the 5 digits of a hand
• Shaking hands
• Had potential but wasn’t descriptive enough

Connected N

• Round and organic
• Client really liked logos with dual meanings
• This direction represented both the letter N and two people connecting
• Something that conveys the literal name of Nodal and also the brand values of Noda

Mid-Fi to High-Fi Wireframes

Prototype

https://projects.invisionapp.com/share/MH913369862N65#/screens/279217446

Conclusion

The highlight of the project for me was working with my partner. I learned a lot from her, knowledge passed down from other full-stack design students. It was really nice to be able to bounce ideas of each other and have support, in tough times. It’s good to be able to have a second opinion and also spread out the workload, come up with more ideas, and decide on the best ones. We tried to embody the “community” theme in our work by doing the work together. It was also just nice to be able to ask questions about things I hadn’t quite learned yet, but I felt bad because there was a lot of questions.

I had a big Sketch learning curve, and I now see what is possible in terms of consistency. I learned more about working with the UX team, and now that I know UX terminology, I can be more engaged when making lo-fi wireframes and making other UX decisions.