Hubb Case study

Project Overview.

Hobb is an online social platform. The essence of this project is to provide individuals a dedicated means of getting to know and meet other people that have similar interests and hobbies as they do. This provides the opportunity to chat, plan hobby specific hangouts, see hangouts created by other people and have access to news and articles regarding preffered interests.

Problem Statement

In a world of diverse individuals, finding people who share the same interests/hobbies with one isnt exactly a walk in the park. This is especially hard for introverts who find it hard to strike up conversations with strangers

Solution

After having conducted some interviews and brainstorming sessions, i came to conclusion of having an online social networking platform where people can explicitly choose their hobbies/interests so its easier and fasterfor them to come accross like personalities and make friends. This was the birth of Hobb.

Hubb provides users the ability to swipe across thousands of individual cards representing people's interests/ hobbies so they can choose who is more suited to their personalities.

Apart from that, upon mutual likes, individuals are moved to the chat section where automated phrases are provided so its less awkward and easier to start up conversations. Users can also create hangout groups where memebers can all plan a hangout to do what they love.

User Research

The main mode of user Research was via interviews. The primary goal was to learn about users problems and experiences with meeting people with similar hobbies. The summary of the interviews were mapped into two main stories represented by personas.

Personas

User Flow Chart

The journey of the user through the app is quite intuitive. it makes use of a bottom navigation bar which is quite common in most mobile applications, thus users would be fairly familiar with this. Futhermore, the flow of the user is heavily dependent on their consent. There are no forced interactions.

Hi-Fi Wireframes

Below are randomely selected wireframe screens of Hobb. I used the wireframes to set out the basic structure and how each screen would be linked to each other

Color choices

I followed the 60-30-10 color pallette rule in Hobb, with green being the primary color, white being the secondary color and orange being the accent color.

I chose green as the primary color because, it is easy on the eyes and induces relaxation and a sense of security. White sympolizes purity, goodness and simplicity amongst other virtues. It also serves as a neutral color that combines very well with green and gives off an aura of elegance. Orange is a bold and vibrant color that conveys warmth and excitment. It is eye-catchy and stands out hence the use of it as an accent color. I used it on the call to action buttons to draw the users attention to them and influence them to take action.

Hobb is an app where people should come to, to feel relaxed and at peace as they swipe through individul cards, with just the right amount of eagerness to take action and socialise with other people, hence the color choices.

Splash and Registration Screens

These screens were done in accordance with the aesthetic and minimalist usability heuristic of Jakob Nielson. Only absolutely needed elements are placed for users to immediadly see and interact with such as the input fields, call to action buttons and password toggle.

On the Signup page, as soon as the user starts interacting with the password input field, a number of prerequisites for making up the password will be visible for them and each of those prerequisites will form into a checkmark once fulfilled. The Reason for the delayed visibility is to reduce the number of elements on the screen thereby reducing the cognitive load in the users

Password Reset Screens

The process of password reset is very straightforward and easy for the user. Firstly, i empathised with them and assured them the situation can be resolved. This was followed by instructions on every step of the way so they dont feel lost

Upon interaction with the call to action button on the second screen, an animated loading spinner is shown to inform the user of the code verification in accordance with The visibility of system status heuristic. At the end of the process, a success message as well as gif is provided to show the user has completed the proccess of Password reset. A button to continue the Login process is also provided.

Design System

Ofcourse there is the design system to ensure consistency of elements and colors across the whole of hobb.