Hangtight
Role: Product Designer | Team: Four Designers
How might we help people effortlessly build more meaningful relationships?
Hangtight is a start-up company developing an application to help facilitate social connections. Their AI-powered engine combines the features of social planning marketplace and scheduling platform technology to provide users with a highly customized, seamless and efficient social planning experience wherever they go.
Hangtight recently acquired an app called GoPlanIt which was its direct competitor. I was brought on board at the beginning of the alpha testing, along with three other UX designers, to review and improve the existing application design over a period of six weeks. I played a leadership role in redesigning the Hangtight app, which will be going into beta testing and rolled out to thousands of users.
Introduction:
The Solution:
Redesign the application to create an ultimate social planning platform that makes users’ lives easier and more enjoyable through a user-friendly and highly personalized experience.
The client's objective was a complete redesign of the application. The design team's challenge was to determine the usability of the existing application and prioritize improvements based on time and budget.
The Challenge:
Heuristic Analysis, Screener Survey, Usability Testing, Affinity Mapping, Competitive Analysis, Sketches, User Flows, Iterations of Mock-Ups, High-Fidelity Prototypes, Highlight Reel and Design Presentation.
Deliverables:
Hangtight’s Unique Features:
Research Process
Heuristic Analysis:
To begin, a heuristic analysis of the existing application was conducted to determine its usability and prioritize improvements. This process included:
Analyzing the onboarding flow and the general user interface (UI) based on the ten usability heuristic principles for user interface design.
Providing examples of what could be implemented to improve each heuristic.
I was responsible for evaluating the following three heuristic principles: consistency and standards, error prevention and recognition rather than recall. Below are two examples of issues that I found with Hangtight’s application.
Usability Testing:
Usability testing was conducted to identify user pain points with Hangtight’s most crucial features. For this process I was involved in:
Writing three script scenarios for the user flows to be tested.
Conducting 16 moderated remote usability tests over Zoom, 30 minutes each.
Synthesis of data and insights.
Analysis of findings and recommendations report.
I led the initiative to create an affinity map that allowed us to synthesize all of the data gathered during testing. This was done by organizing data points into four main colour-coded categories which were matched to the images on the app screens that they were relevant to. This process gave us insight into what was and wasn't working for the app's users. Three key issues we found were:
Onboarding was too long and taxing for users. The app also asked for too much personal information too soon.
Guidance and inspiration could have been improved overall.
Critical features of the app were unknown to users or hard to find.
What People Had to Say:
Competitive Analysis:
Since one of the major pain points for users was the onboarding process, a competitor analysis of apps that we felt had onboarding flows that we could learn from was conducted. I was responsible for analysing two applications: Mighty Networks and Pinterest.
The full competitive analysis can be found here.
Design Process
Sketches:
A sketching workshop session was held with the client to understand what they envision for the application’s key screens.
Style Guide:
Since Hangtight had acquired the application from GoPlanIt and the application was designed by their developers, there were no existing figma files or style guides to work from. I therefore created a high level design guide to ensure the graphics are consistent throughout.
User Flows:
Our team’s focus during usability testing was on the following three user flows:
Onboarding
Create a Plan
Create a Circle
Although we worked as a team, we were each responsible for a specific feature. I was responsible for the circle and chat feature.
Current User Flow: Create a Circle
Key Issues:
Currently there are three ways of creating a circle, one way through the chat feature and two ways through the user’s profile. The irony is that during user testing, most users struggled to create a circle. After discussions with the client, it was decided that the circle feature was one of the most important aspects of the application. It should have its own identity and not be nested within the chat and profile features.
Not enough information is requested from the user to make the circle landing pages engaging for their invitees.
There is no clear exit strategy. If the user wants to finish creating the circle later there is no option to save a draft.
No visual confirmation that the circle has been made once the process is complete.
Updated User Flow: Create a Circle
The updated user flow resolves these issues by:
Consolidating and simplifying the circle creation process by giving users just one means in which to create a circle. This was achieved by adding the circle icon to the navigation bar and giving the feature a landing page where an icon to ‘create a circle’ is located. As per the clients' wants, this decision gives the feature its own identity and brings it to the forefront of the application so that users do not miss it.
Breaking down the circle creation process into two steps to ensure enough content is added to make the pages engaging, as well as, ease the process for users by avoiding the need to scroll.
Making a clear exit strategy with the option to save a draft always available to the user.
Creating a confirmation page that the circle has been made and adding simple prompts that encourage the user to engage with their circle.
Mockups:
I created the first iteration of mockups for the application’s key screens. The client loved the new direction that I came up with for the look and feel of the app. They expressed that it was very on-brand and even better then what they envisioned. My initial design was used as the baseline UI for the entire application.
Below are mockups of critical screens that I created for the circle feature. I included before and after images of the circle creation flow so you can see a clear comparison between the old and updated designs.
Current Screens: Create a Circle
Updated Screens: Create a Circle
Circle Home Screen: For the next iteration of this screen, the clients would like to play with the idea of adding advertised places and events the user could join based on their interests.
Circle Landing Page: I would break this screen down into a two-step process for the next iteration. The first is an empty state screen that prompts the user to join. Once joined, the user would unlock more information on the circle. One should note that there would be various iterations of the circle landing page based on the user’s administrative rights.
Next Iterations: Create a Circle
Iterations of Mockups:
Navigation Bar:
My coworker and I collaborated on iterations of the navigation bar. In the end, the team decided to move forward with option 4. We felt the icons should have text below for the beta release to familiarize users with Hangtight’s terminology (i.e. circles). We also decided to replace the profile icon with the saved icon in the navigation bar to encourage people to save circles, events and locations. We felt this was an important feature to bring to the forefront of the app to help improve Hangtight’s algorithm and, ultimately, the user’s experience.
Chat Home Screen:
I created different iterations of the chat home screen. The first iteration used colour coding to differentiate between private circles, public circles and events. The second iteration uses shapes to distinguish between circles and events. An orange dot identifies when a circle or event is private.
Home Screen:
In the iterations of the home screen, first-time users are prompted to interact with the unique features that Hangtight offers. Regular users are engaged through live streams and the ability to browse upcoming events and featured ones.
Prototypes:
The following are preliminary prototypes that we created for Hangtight.
Highlight Reel:
I created a 40-second highlight reel of the combined user flows for Hangtight to show investors to secure funding.
Presentation:
A presentation, highlighting the work contained in this case study was given to the clients and the product design advisor. I took the initiative to create the skeleton of the presentation, which outlines the narrative of how we got to where we are now in the design process.
Next Steps:
Based on feedback received during the presentation a number of modifications will be made to the designs contained in this case study. Once these adjustments have been made further user testing will be conducted.
Hangtight used my design work to showcase the application's next iteration and secure funding from investors. They were so happy with the result that they offered me a position as a Product Designer at Hangtight!
I had the best time re-imagining Hangtight's application to create a better user experience. I am over the moon that they are using my work for the new design direction of the application. I can't wait to get involved in more projects like this one. I’m always open to new opportunities, so please reach out if you know of anything where I might be a good fit!