Hollabox
Hollabox is the world's first video review platform, allowing a transparent look inside some of the best social venues and experiences around the world. During my time as Head of UX, I cultivated a full redesign of the app with the goal of increasing the userbase, improving user retention, and preparing the product for scaling.
The Challenge
I was tasked with reimagining the existing product in order to increase retention. The app had a solid concept, using videos to give honest reviews of inside venues, but no real way of encouraging to keep users coming back to the platform. It was during user interviews and testing that we discovered a solution – a social mechanism to the product.
The approach
- Competitive Analysis
- User Testing / Interviews
- User Personas
- Customer Journey Mapping
- User Stories
- Sitemap Creation
- Wireframing
- Prototyping
- High Fidelity Designs
The Process
Competitive Analysis
User Testing & Interviews
User Personas
Customer Journey Mapping
User Stories
Sitemap Creation
Wireframing
Prototyping
High Fidelity Designs
Personalised interactive dashboard
I joined Mirza after their pre-seed funding round. They had a prototype product that had been built by an agency, and it was clear from the data that there was a problem with retention. This was also discovered in the analytics – our users logged in once, then never returned to the product again. A further pain point was the “one-size-fits-all” approach, with a lack of customisation according to a person’s stage in the journey to parenthood.
Our solution was to create to this was creating an personalised dashboard, which would act as the hub for financial planning for parenthood. Based on the information given during onboarding (what family stage a user was at), users were offered custom content specific to that user persona. The core features would remain the same for all user types.
Gamified plan creator
Our algorithm calculates the parenthood penalty and other costs associated with parenthood. As inputs the product team were required to collect a lot of information from our users. How do we do this without inducing cognitive load, and inevitably increasing drop-off? The outcome was a gamified process of entering in data in a step-by step wizard, while the bar graph updated live. The gamified approach improved completion rate, while the bar graph was proven to offer users positive feedback during data entry.
Educational content
The world of financial planning for parenthood can be overwhelming. Not everyone is already equipped with the knowledge of tax credits, parent-targeted investment vehicles, fertility treatment, and school selection. The answer to our users’ feelings of confusion were education cards. In each section of the flow, we implemented these cards to offer unbiased content. This helps users make informed choices that are right for their personal situation.
User personas at the heart of decision making
There were a vast number of different parent user types we identified during user interviews and research. As the core features of the product relied heavily on the product team to deeply understand each user’s motivations and needs, we spent a considerable amount of time running interviews and testing sessions, while constantly iterating on our core user personas.
Although it was important for us to consider these different user types, during the build of our beta product we identified early adopters as working women and men who are actively planning for parenthood. These were the target of the first version of our product, and from there we expanded our reach to wider subgroups.
Wireframe prototyping and testing
At all points in the product process, I ensured that my team championed fast prototyping to validate ideas and new concepts. We created pools of user testers who we frequently tested with, making sure that recurring issues or feedback were iterated on before handing over to build.
High fidelity design (and more testing!)
Once we had our wireframe prototypes validated through user testing, we then expanded on the designs to make them high fidelity in compliance with our design system. Once this process was complete, in some cases we then conducted further user testing. This was to ensure the core function of the feature was not lost when branding and colours were applied.
Creating a Mirza design system
As part of a wider project to improve efficiency in my team, I oversaw the creation of a full design system for Mirza. This went hand-in-hand with a full brand redesign including logo and colour palette. This design system was created ahead of the expansion of the product team began, which would require a source of truth for styling and re-useable components. The system ensured that the design would remain consistent as the company scaled.
Discovery process
When I first joined Hollabox, the current live app was underperforming. There was a serious lack of retention amongst the existing users, and many of the user journeys seemed to be unintuitive.
In order to identify the pain points with the current product, and to also get to know the Hollabox userbase, my UX team and I set out on a discovery phase. This discovery process included conducing user interviews, creating user personas, drafting/editing user stories, creating customer journey maps, and reimagining the sitemap and information architecture.
Wireframe prototyping and testing
Once my UX team and I had completed our discovery phase, we then started to prioritise what action to take first.
We used our new-and-improved personas and customer journey maps to draft up user stories for the new features.
Video player redesign
The previous Hollabox video player was a recurring point of friction during our user testing. The previous player design had no progress bar, so users had no concept of where they were in the flow of content. The videos were also cropped in order to fit in information, which meant many of the video content and captions were being missed.
To resolve these issues, we added a progress bar at the top of the screen, intentionally using a similar design to Instagram in order to ensure intuitive and familiar feeling amongst our users. We also increased the size of the video section, making sure that the filmed content was the focus of the interactions.
Swipe up to view venue information
To view venue information and access CTAs – get directions, book and share – users would previously have to click to open a model over the video content. This interrupted the natural flow of video, and produced friction to accessing the CTAs.
The reimagining of how to view venue information resulted in a swiping function to reveal venue details, in a similar way that users use Google Maps. This meant that users could access CTAs without stopping their stream of video, and made the experience of viewing venue information less clunky.
Save to collection feature
Another pain point we discovered during our testing was that users would find venues in our product, but then have no idea to access them again when they next logged in. To combat this, we prototyped then implemented a 'save to collection' feature, which allowed users to save venues within their own collections.
Venue tag system
In the world of user-generated content, it's common to get users to help you in organising and categorising the content before they post. This is something that didn't exist within the upload process, and the addition of tags was being implemented manually by a team member.
To address this, we automated tags by adding a step to the upload function that allowed users to search for and add new tags related to each venue. These tags were then reviewed periodically by a team member, which massively reduced their time spent on the task.
.jpg)