The Party’s Here On The West Side

P3 Case Study — Hoods Guru ϟ

Hoods Guru is an app focused on helping you discover local indie events based on mood, location and time. Events featured on the app could be anything from concerts, to art exhibits, to karaoke nights.

Let’s Get Crackin’

During the first week, as our UX Designers were doing research and conducting surveys my fellow UI Designer and I started doing research ourselves. In the beginning it was a matter of coordinating with the team and setting mini deadlines for things such as style tiles, mood boards, wireframes etc. We kept ourselves busy by starting an Inception Sheet, to prepping a couple Mood Boards to starting a Style Tile we could use as reference once we’re in the High-Fidelity stages of the project. Going over apps such as Dojo App, Phind and Instagram we wanted to make sure we kept our app current and contemporary while still being simple and easy for the user to navigate.

My No Holds Barred Approach to an Inception Sheet

The Inception Sheet was the first thing I did. Spilling out all my thoughts and ideas onto the sheet, giving myself a direction/approach to the design of an app is one of the best ways to start off a project. What made this inception sheet so special was how much inspiration it gave me in the later stages of the project. After it was written I buried it in my bag which then led to me completely forgetting about it. When I felt very unmotivated I found it in the bottom of my bag buried under a few dirty Tupperware containers and it suddenly began to remind me of the original ideas I had when I started. From there I overcame my Designer’s Block and worked away with my eyes on the prize.

I should really invest in a binder.

Mood Board

It feels so good in my Hood tonight.

Logo Redesign

One of the first things we felt as a team was the logo for Hoods Guru didn’t represent the app’s theme. When we showed it to our friends and family they seemed to feel the same way and a handful of people thought it was a logo for a yoga app. Our client was open to us redesigning it, which then kept me busy for a bit longer than it should have…

One of a dozen sheets covered with ideas..

It all started on the drawing board. Constantly brainstorming, thinking of an idea that would fit the theme of going out and the spirit people have when their out having fun. The goal was make something simple and adaptable that would look great on different platforms. As I was doing some research I came across an article that talked about how the best logos are simple, memorable and timeless which were some things I wanted to remember during the brainstorming process. It was during this time that the UX team informed me that we were changing the name from “Hoods Guru” to “Hoods” which worked in my favour because I was having a bit of a hard time incorporating the term “Guru” into a logo.

I had a handful of people telling me to play with the letter ‘H’ which I personally feel is such a predictable and cliche way of approaching a task like this. I wanted to avoid that and instead design something more unique.. a logo that resembled the energy of our users. The lightning bolt was something we all really liked and agreed on which then became something that my teammates and I found any excuse to use whether it be on the website or app which is a solid sign that it’s a fitting logo.

**Cue the reggae airhorns**

Style Tile

During the High-Fidelity stage of the project my teammates and we faced a pretty huge plot twist that really raised our stress level. By keeping the mood of the app energetic and the style more modern we decided to use vibrant colours with text and buttons and cool gradients as backgrounds on both the app and website. For well over a week we were developing pages with this theme, and as a group we were really digging the work. We then had a chat with a couple instructors who pointed out that it may be best to keep the designs a bit more simple, and to make sure this is a theme that our client over at Hoods Guru was okay with. During our original chat with our client he pointed out his preference to keep orange in the theme, which sadly we didn’t do. With our deadline creeping up we decided to change all the pages we’ve developed to the theme our client preferred, given that this is his app and we as designers should always follow the preference of our client. It was very stressful to say the least, but it was a major learning experience and I feel like we as a team handled it very well.

Sadly being the dork that I am saved the new Style Tile over the original one, which means we’re unable to compare the two. Fortunately for us I have the original mobile screens saved which I will be comparing later on in the study.

Style Tile covering everything from images, text, buttons, map style and icons. Icons made by Iconnice from www.flaticon.com

One thing I must admit is that I am a big fan of the newer colour scheme. As tough as it was going back and redoing all the screens I was happy to see the turnout of the final product.

Style Guide

Prototypes

With our team working in a lean production style we were constantly sharing our prototypes with users, taking their feedback and reworking them. Everybody working on something, some of us paired into sub-groups covering everything from website and app design to site maps. Below are a handful of screens, along with it’s original wireframe and the original design for comparison.

On this screen our user would select a mood that then leads to related events. Instead of following the wireframe’s general “stacked” layout I decided to divide some of the moods into squares, then making it feel a bit more playful and less general and boring. Divided between each mood is 12px of space which is consistent throughout the app. On the original version the moods feel very separated from one another and I find my eye constantly leading through the negative space, but on the final version I find the moods are separated perfectly, which the background colour has a big impact on. As much as I liked the white outline search bar in the original, it was brought to my attention that it could be hard to see at times and it would be ideal and much easier for the user to see by filling the box white.

The approach for the Results screen was very similar to the Home screen. Instead of dividing some of the rows into two we as a group agreed it would be best to have every event displayed alike, given that the client (promotor) would feel that it is unfair that their event isn’t as noticeable or as large as others. It was important that we had a clear map displayed without having too much contrast which would distract the viewer. Like Google Maps and Uber we wanted to keep the map simple and not as intense to the eye. This is one of my favourite screens to share because I like how much information is being shared without overwhelming our users. I also love the concept of a page having both a map and a list of events underneath, with the collapse button below the map. It gives a viewer a strong sense of what’s available in their area and the more they scroll through the map the more events they can find in their hood. An idea given to me by the UX team.

The Event screen was one that was reworked again and again. If it wasn’t the body of text that needed to be fixed it was the location of the map, if it wasn’t the map it was the Share/Save button style. Although it was a tedious process the suggestions and adjustments really helped and I’m happy with its final turnout. With the CTA buttons being so bright in the original version our viewers often pointed out how distracting they were and how we needed to tone it down. With the help of the UX team we figured out a way to show all four buttons without being so distracting to our viewer while still having a brief on the event along with a map showing its location.

The approach to the Invites page was very similar to the Results page. I wanted to prevent this page from looking very structured and dull so I decided to add the “quarter circles” to each of the invites. I feel it has a positive visual impact on the page and sets it apart from the rest of the screens.

Collapse Button Diagram (Shoutout to the Hoods UX Crew!)

Feel free to browse through the Website and Mobile Prototypes ϟ

You gotta get your groove on, before you go get paid

Despite packing most of the UI work into our final week we had everything ready to present to our client first thing in the morning of our deadline. Going over our presentation I became very excited to show my peers, instructors and our client the work. Dividing our presentation into sections covering the UX’s research with the UI’s design process our client was very pleased with end result. As much as I wanted to share everything from the Inception Sheet to logo design process in the presentation we had to keep it within a 15 minute timeframe. Instead I shared my design process while navigating through our prototype on Invision.

There were times throughout the process that I felt very discouraged and and paranoid about meeting our deadline. Fortunately having my Hoods teammates and instructors by my side we worked through it by setting goals for each day, setting a schedule and even finishing things a bit in advance in case of any emergency (which clearly worked in our favour). Working in the lean environment really helped us get all the work done and ready for the deadline while still getting users’ feedback. It was important that we as a team handled these setbacks properly without panicking and freaking out. I believe great designers are not only measured by their skill but also on how well they handle tough situations such as these. I don’t doubt that there will be more stressful situations to come about in the future, but now I can look back on this story in particular and use it as reference on how to work through future hurdles. Big thanks goes out to the Hoods team for their great work and our instructors for their input throughout the three weeks.


Considering how much I love attending local gigs and art shows I’m really looking forward to Hoods Guru launching their app. ‘Til then you can catch me at BMB Karaoke…

ϟ ϟ ϟ