Olesia Fisun - UX Designer

PROCESS

PROJECT OVERVIEW

Let's meet the client!

JuiceBox Hero offers you to explore perfect places for your kiddo's needs. With JuiceBox Hero, you can search, select, and share daycare, preschool, and after-school programs. Our personalized search will help you narrow down your search and make your choice faster.

This website is currently serving Central Texas and has thousands of providers in its database. Their goal is to help parents to make a confident decision without juggling between multiple websites and being overwhelmed by the amount of information out there.

The current website allows users to start searching for childcare providers, personalize their search by applying filters, save search criteria, view provider pages, and then save your favorite providers to the created account.

While the colors, fonts and overall style may seem consistent, stakeholders told us that they get a lot of feedback that users don’t see the value of their website, have a hard time finding all the features and are overwhelmed by the amount of information they see on the provider pages. All of these troubles lead to low conversion and high bounce rates.

Let’s analyze some data!

Our team started the work by reviewing and analyzing some of the following documents:

- Initial problem statement;
- Target audience description;
- User scenarios;
- Value prop;
- Customer journey maps;
- Personas;
- Style guide;
- Voice and tone of the brand;
- Etc.

Our task was to analyze these documents, confirm or confront this data after performing another round of research. It was decided to perform Usability testing of the current platform to find out user’s pain points, build customer empathy, and narrow down the scope of the project.

We talked to specific groups of people:

Performing an additional round of Usability testing and interviews with current and future parents helped us to understand our customers better and build empathy for each different type of users. We have summarized our findings in two different User Personas.

Before going into user interface design, I’ve worked on thinking about possible steps a user might take and ensure a seamless flow of each interaction.

The following charts describe the content strategy and user flow through the website, listing potential features users may use. The creation of flowcharts is the basis for discovering potential issues behind the product in a quick and time-efficient way.

To make our ideation quick and collaborative we have decided to conduct a Design Studio workshop. I was moderating the session and participating as well.

In order to start this session we needed:

- to review all previous research to make sure we are keeping our users in mind;
- review our user flow to remind ourselves about the context for each page;
- where did the user come from and what do we want them to do next;
- a list of all screens that are being redesigned;
- lots of paper and pencils;
- a stopwatch;

It’s time vote now!

When all the options were on the table - our team had discussed each page separately and explained why particular design decisions might be beneficial to our users. Then each of us could vote for a particular section or the whole page to be chosen for the first round of wireframes.

But since our stakeholders couldn’t join the session - we’ve decided to leave some controversial points up to them. We wanted to make sure that by voting for what our users need we are not implementing something that current the business model couldn’t afford implementing. That's why when we narrowed down our designs for each page - we ended up having two designs for some pages, and our stakeholders were voting on those during the team meeting later.

During the prototyping session, we have iterated our low-fidelity wireframes 3 times. First, we needed to make sure that our stakeholders are satisfied with what we will be showing to the users. We tried to highlight all the features that will make the most money to the business while making the website easy to use. As a project manager, I kept reminding my team about the goals of our Personas and making sure we are not just trying to “sell” them the new features but will present the needed content at the right place and time.

The most challenging part - we need to find the balance between “not enough information” and “way too much”!

Our users, especially the first-time parents need a lot of support and access to the tools that will keep them on the right track. At the same time - we don’t want to overwhelm them. We will be validating the priority of the offered features as well as the clarity of the presented information during the usability testing with our current and potential users.

Goals of the Usability testing:

Let’s see what we can improve

Mockups were updated after the usability testing, and we are now preparing our handoff to the developer. My teammate was responsible for creating detailed specs and annotations based on the mockups and interactive prototype that I’ve created. We were collaborating daily to make sure that all the design ideas are communicated clearly to the developer who will be implementing it.

Originally, the JuiceBox Hero website had even more colors and very inconsistent button styles. We have narrowed down the color palette, where one should use primary colors only unless you need to create a higher contrast between multiple elements or differentiate a multitude of items from one another.

Buttons were assigned a specific style based on the actions they will perform - primary buttons will call to make a strong action, like “Sign up”, “Subscribe”, etc. While other buttons highlight hyperlinks, allow show/hide information, and much more.

Interactive prototype

This prototype will show you:

- Home page experience;
- Search results page with filter options;
- Provider’s Page;
- Account page;
- Subscription options;

After the project was handed off to the development team and all the deliverables were presented and shared with stakeholders - our team got together to reflect on the flow of the project and things that could’ve gone better.

If we had more resources we would work on…

We would love to work on the Provider’s side of the website and make improvements to the flow where a business owner would add/edit the information for their page and promote it.

From the user’s side, we would recommend to continue research and testing multiple points, like completing a search, leaving and reading reviews for the providers, booking a tour, setting up notifications for updates from a current provider, or Waitlist updates from their Favorites.

Thank you for being interested in this case study!

Home Page

Next Project