Neon Lights Within Sight
A case study for the unified work of UI and UX teams developing a potential mobile app for Good Night Out, an anti-harassment organization.
__TASK
Collaboratively design between UI and UX teams at Red Academy for a potentially developed app for iOS.
__TEAM
Nicolle Colada, UI, currently reading her case study.
Vivian Lin, UI, to read Vivian’s case study; here.
Kevin Tam, UX, to read Kevin’s case study; here.
Ali Saai, UX, to read Ali’s case study; here.
__TOOLS
Hand-drawings, Photoshop, Illustrator, Sketch, Crystal (Android version of Mirror), InVision, Keynote
__OVERVIEW
- Brief
- Client Kick-Off
- Setting Up & Initial Research
- Research Summary
- Ideation
- Closing Coalescence
__Brief
The Problem
Harassment is a real issue that exists in Vancouver nightlife and there’s sometimes no real way to gauge where one would go to ensure that one or a group could have a good night out. Feeling comfortable and safe is key, though it may not be the first things that comes to mind when doing so.
“We need an app that adventurers of the night can use to navigate where to go, share their experiences and take action in making everyone’s night’s better.”
Design Opportunity
The first GNO chapter in Vancouver has asked the students at RED Academy to help in visualizing an app that would help the process in selecting where to go. By using a rating system on a geo-tagged map it shows reviews on how safe or knowledgable a venue and it’s staff are in dealing with harassment. One of the main goals is to have a peer review system citing incidents and mapping out GNO certified and trained establishments.
Key Functionality
- Go Explore — allows users to browse venues nearby with a safety rating sourced through reviews from users.
- Write Review — is a platform for users to share their experiences.
- Write Audit — is a detailed inspection of the venue, where GNO pulls data from.
Target Audience
- Age: 19–31
- Females & LGBTQ
- Everyone can use this application
Timeline
3 weeks
__Client Kick-Off
Sitting in the quiet board room, we met with Ashtyn one of the co-founders of the Vancouver GNO chapter. We got to know her and asked some general questions that let us get to know her what she envisioned from this app. We asked about the type of impact she was looking for and what she needed from us to achieve that.
We did something called a 20 second gut test, where she was shown images with a time limit of 20 seconds to decide on a scale of one to five how much she liked or disliked it. Then we broke it down and arranged her top six images and asked her to explain what she liked about it and why. This allowed us a closer look into what she might expect for the GNO app.
__Setting Up & Initial Research
One of our goals as a team was to keep organized and stay on the same page. With large task set at our feet we started with the building blocks. A tree of management branches that would allow for our whole team to access all parts any individual’s process and notes.
Google drive is your best friend.
As a group we met and agreed upon a certain filing system, naming convention and an outline of how we would start each day with a morning stand-up. Unification in how we conducted ourselves would reflect in how much we wanted to succeed in designing Good Night Out’s app.
As Scrum Master, I created a sheet that would mark a tracking sheet for each individual’s progress. It’s a good motivator to see that check mark and 100%. We used Google docs, sheets, forms and keynote for presentation and interviews. Keeping all of our progress in one hub space.
Initial Research
Starting with interviews! UX had a survey and 1–1’s, for UI we blasted a twelve question survey. Here were some of our findings:
Collecting our notes into an affinity board (seen below) Vivian and I made a rough inception sheet to serve as the basis for our image hunting.
Using a shared collaborator board on Pinterest we gathered pictures using keywords such as fresh, purple palettes, party, confetti, colourful, playful, contemporary, neon lights, nostalgic, protected, and others.
__Research Summary
There were definitely two directions our survey’s resulted in: “fun, playful, flashing lights and active” versus this “slow, dreamy reverie, light swaying and nostalgic” feeling.
__Ideation
Mood Boards
(Moodboards are a collection of images, words, texture, etc that help describe a feeling or general look — the visualization of the keywords.)
Sadly, there was something that was missing in both of these mood boards. They needed refinement. They required an anchor that spoke confidently as the identity of the app. The left (Let Them Eat Cake) was too abstract and the right (Moody Banana) was slightly disconnected.
The common thread was the idea of neon lights and using colour pops possibly as confetti, to give a distinct power to buzz words that would be isolated by those colours.
Ireally resonated with the diversity of colours that neon lights were showcased. This lead me to do some research about Vancouver’s illustrious history of neon lights and about them in general.
Research Highlights: Made using electrified gas and several hundred thousand volts to ionize the gas they emit light (some combinations):
- Hydrogen emits red.
- Neon emits orange.
- Helium emits yellow.
- Carbon Dioxide emits white.
- Mercury emits blue.
STYLE TILE
Before meeting with the client, Vivian and I further synthesized our mood boards into pages that would have a better description of how we would utilized aspects such as colour and space to express our intent.
Meeting with Ashtyn and Stacey we conducted a quick test where we chose 1 image from the “neon” and the “confetti” to go side by side to see which direction they leaned towards more. As luck would have it, of course it was a combination of both.
Moving forward, we kept these few key ideas that would summarize the art direction “Dusk to Dawn”. The very concept of going out should be seen as a celebration of your time and wasn’t just isolated moments of getting ready, being at the venue or the morning after. It was that entire timespan; the grains of time that slipped from the blanket of the night to soft dewy morning sky.
Style Summary
- Glow effects on “Shorelines” font, can be found here. | Built for iOS, native app font was San Francisco, SF UI Display.
- Rounded buttons, set at 25 radius.
- CTA’s, user interactions should be round and soft; non-intrusive.
- Confetti shapes are uses as a celebratory pop that describes one of a kind and unique.
Wireframes
As the UX team worked out the flows of the app itself, we lent a hand in deciphering the current optimal way to communicate the information and statistics.
Issues we would have to resolve were iconography would be included or if infographic scales would be introduced, such as sliders (explored later).
Visual Identity
Although we were unable to change the official Good Night Out logo, I spent some time working with possible variations for logos that could be used with the standalone app.
A stylized script was used as the filling content for the app’s icon.
Style Summary
- Accent glowing lines were used as directional illusions for movement.
- Glow effect used for continuity throughout the application.
- Form fields would have a soft rounded corner and not a full capped end.
Inside the app, we had a free range playground to create a unique geotag. I spent quite a bit of time conceptualizing how to interpret neon tubing and confetti. A very thorough discovery attempting to maintain clarity in shape without losing the familiarity of a geo tag was a struggle. Using the geotag’s uniqueness would subsequently effect the look of the other unique objects.
Below are some onboarding screens that showcase the unique tags and how the confetti was used on all of the “reward/completion” pages, as the progression bar below snd influential to the shape of the tag. Several icons were native iPhone elements to not overwhelm users as there are several new and specific features within the GNO app.
__Production
We established that specific colours would correlate a position, for example:
- orange was CTA’s and user interactions
- the mint was GNO related
- dark brown was background and body text
- white for form fields and body text
- yellow was for non gno certified tags and confetti
Purple had found no purpose currently and felt like a design flaw. When creating the confetti pages, a light blue and hot pink were added for diversity as to dissolve too much colour repetition or staleness.
Moving from mid-fi and applying our colour palette, I was the prime designer for the REVIEW and AUDIT section, while Vivian handled EXPLORE and PROFILE.
Key Changes in Audit Development
- Further wording refinement of questions and redistribution of bolded text.
- Rounded field forms regressed back to a soft round form — Specifically to the audit and review the fields were purple.
- Titles that separated sections into chunks became a break themselves for space saving, design detail that is observed to mimic breaks in neon tubing and a direct pull to read the central information that was embedded between.
- Numerical page counter versus the confetti progression bar that was confusing and already associated with swiping in the onboarding.
- Save, Next and Previous were features included based off UX testing.
- Keywords in the question were bold and colourized to stand out,
The review and audit were originally orange, but after the realization of the slider tool the scheme shifted to a white, violet an lavender colour palette. Ironically this palette was something Ashtyn had envisioned in the beginning and did not particularly come up again during heavy construction phases. It was a happy moment where gut instincts made in the end won.
Key Changes in Review Development
- Space added to compensate for phone’s status bar.
- Language for CTA’s, question hierarchy revisited
The reason the review and audit are set on different colours is in consideration of when these two forms would be completed. The review is one page where the audit is four.
- Reviews completed in a venue would be dark and don’t call attention to a bright screen in the dim area, allows for covert operation.
- Audits may be done the next day and over a longer period of time, so a light background which is easier to read on is meant to strain eyes less.
- Conceptual connection is the night to morning — dusk to dawn concept that the use of these communicative tools reflect your night.
- The existing colour dark background and white were better for familiarity.
- The purple slider did not read well on orange background.
- We were sick of orange.
SLIDERS
As a key interaction on the forms it was imperative that we get this part right as the user would be using these for an extended period of time.
Initials ideas were gradients using a 5 point scale. It became hard to read and colours weren’t sticking. The second set were abstract confetti shapes refines into diamonds that focused on the new 4-point scale ranging from red, orange, yellow green (bad to good). We experimented with gradients, solid progression and then solid segments (25, 50, 75 and 100% translated from 1, 2, 3, 4 being low to high.
Tried a circular shape to avoid the hostility of the diamond and keep familiarity as it stemmed from Apple watches progression tracker. It evolved from a quartered circle, to a snaking fill with gradient, then without for readability.
__ Closing Coalescence
Ashtyn and Stacey have asked us to continue as their primary design team in the development of the GNO app.
Check back for updates on this project’s progress!
If you wish to view and interact with this design, hop over to InVision.
