Brainstorming For All, UI Case Study

Quartz Responsive Web App

RED Academy, March 2018

Back in August of 2016, before I started my first ever class at RED Academy, I wanted to see if I could get some practice designing some sort of App or Website before going into the program.

So I went onto sites like Reddit and Yahoo Answers looking for a representation of how people create ideas for this sort of thing. What I found was rather frustrating; the final result of a creative process, the finish line of an idea. Which is great if you are looking for that, but I was looking for how someone came up with the idea.

After almost giving up on all of this together, stopped for a while. For months I was stuck in this place of confusion.

But then I took a look at my problem from a different angle, the viewpoint of a web user, and I was hit with something I call “The lightning bolt”.

It was an idea of my own;

Yes! What if there was a way to visualize how people collectively think and work together digitally? An online brainstorming app! Ambitious I know, but definitely a unique and interesting idea.

This idea stayed with me for about a year and a half without being fully fleshed out until I started a UI class. I was given the project to create a branding identity to some sort of service or website the did not have existing branding. I saw the opportunity to explore my idea that I have named, “Quartz”.

Project Brief

My mission was to create a visual brand identity and a responsive landing page creating an engaging, impactful, predictable and well-designed experience for the users and optimized to meet business goals.

How do you brand “ideas”?

Inception.

My first step was to identify why someone would choose to use this and why it would exist in the first place. By doing so I can then create value for a user in this brand.

Rather than a few fancy colours and fonts strapped together, my goal was to create something that will create confidence and resonate with the user.

These why’s where the foundation of everything else that came after. The why of a brand can change its entire identity, so getting it correct for the user group early on is pivotal in the creation of a brand.

I could then address the mood of my brand, what the user would feel when experiencing the platform. Most importantly, I knew that I would have to encapsulate the ‘Lightning Bolt” feeling, for it sparked the idea of this whole platform, and it is the backbone of every great brainstorming session.

In turn, that “Mood” can be conceptualized into a “Language”. A visual representation of what that mood portrays. For Quartz the most important aspect is creativity and connection.

There was one motif I eventually did end up creating that I will explain further. It was that the user would be creating these visual representations or mind maps, how could I allow these maps be as unique as the ideas within them? To answer I had to put it on hold until I had a definitive creative direction, so I created two to test.

Creative Direction One — Inspire

The goal of this direction is to incubate and facilitate a mood of collective creation. A motif of sharp lines will be used to connect and attach ideas to one another in fractal polygon shapes to show groupings. The bright and diverse colours create a secure and welcoming place to share ideas.

Creative Direction Two — Cosmos

This direction is focused on the exploration and discovery of a community of ideas. Using the contrast between a dark night sky and a radiant star imagines the moment of a new idea being born, while the constellation motif links the ideas together creating the mindmap.

The initial 10-second gut tests I did with both directions yielded similar results. Many testers were saying that the “Inspire” direction was more inline with a web app or service and not an art piece, like what the “Cosmos” direction was portraying.

Additionally, they could already see that with the “Inspire” direction, there was a more focused sense of contemporary aesthetics and connectivity, while still keeping a light, clean and vibrant emotion. So it was settled, the “Inspire” direction was in line with the brand’s why’s and mood.

Mood board

Which lead to the creation of the Inspire mood board. Taking what I learned from the gut testing and what was in my disorganized Pinterest board and condensed the best ideas that would fit the brand’s design inception.

This was a very exciting for me for I hadn’t yet had the faintest clue on what my web app may end up look like, or how I could even create a branding for such a vague and omniscient idea.

With this mood board now encompassing everything I could muster from the design inception, I felt confident looking into what I could create when it came to applying this mood board into a style guide with some UI elements.

Styleguide

Remember how I was talking about this idea of the users creating the majority of the visual identity? Here is a great place to show how the branding accomplishes that.

I chose the keep the majority of the intractable elements either as an outline of negative space or with considerable areas of openness. The idea here is that by keeping these elements simple and achromic the users could then use the coloured topics to add the unique factor to the mind maps.

By doing so, the main coloured elements on the screen are what the users have created (topics, thread connections, mind maps, etc.), and not what the brand had created (fonts, buttons, icons, etc.).

There was another key aspect I had to remember when creating this prototype, How can the wireframes and branding work together to solve the initial problems a user would have? It was narrowed down into three elements;

Paper Sketches

Now the nitty-gritty stuff I love. With all my planning a research done I was excited to start drawing wireframes to help compliment this very ambitious brand.

I started by drawing up a classic looking brainstorm/mindmap, you know a web of connected dots. From there I knew the users would need a familiar working thread format to converse and create the content of the mind map.

Digital Wireframes

With those looking great it was time digitize them and see if they translated into a digital format. This was a bit tricky to get right and took a few rounds of minor tweaks of pushing and pulling pixels.

Another tricky thing was allowing the interface to encourage cooperation and the iteration of the initial idea. The way the platform adapts for this is that regardless of the user device, an always present “Add to thread” element is always in visual to the user.

Mobile Map View

The transition from medium to high fidelity wasn’t without its tribulations either. You’d think,

“Oh come on, just slap some paint on it and call it a day!”

No no, my good friend. Creating a high fidelity mockup is much more than colours and fancy icons.

There is a definitive black magic to making a wireframe properly making elements spaced, kerned, aligned, eye-catching and hidden all at once.

The tests of my medium-fidelity wireframes prove this every time. Things such as having buttons large enough for users to use on their mobile devices, and a clearer definition of comments in a thread.

Aswell the use of different Icons in the threads to represent the possibility of interaction. What was initially the vertical “kebab” turned into the tried and true, plus sign.

Desktop Map View
Desktop Browse View

In the final wireframes, you can see very vibrant, exciting and unique colours to which would have all been user-generated, not brand generated. This is a standout and unique feature of the Quartz brand that not only is in line with my initial design inception it also helps bring a sense of excitement and inspires “The Lightning Bolt” emotion.

Want to see more of Quartz?

https://invis.io/P2GMLVNMJWY

In summary, by merging these wireframes and branding together, Quartz will help solve those problems many people and I have had in the past when it comes to community idea creation.

It feels fantastic to finally put a face on this project after so long, even though it is just conceptual I feel it is still a very solid and creative idea. I hope one day to take this concept to the next level and fully design both sides of the platform and get it developed.

Want More?

Visit my portfolio!