Overview

Problem

Vanilla is a platform that enables home service businesses to activate reviews and messaging features with their customers. They are broken out into two different products and would like to bring everything into a more consistent, streamlined experience.

User

Home service and local businesses looking to easily connect and engage with their customers, increase positive reviews, and grow their business.

Solution

I created an efficient end-to-end user experience by reorganizing the information architecture of the platform, highlighting the value differences between the two products, and establishing set standards for the writing, formatting, and visual design of the site. In addition to the proposed problem, I created a support page where users can find or get help regarding the products.

Duration

6 Weeks (November 2020 – December 2020)

Role

UX / UI Designer

Tools



Design Process

Planning 01

Define Project Scope & Timeline


The first step in the project was a kick-off meeting with the client to align on the following:

-> Purpose of the Project

-> Goals and Expectations

-> Timeline of Milestones and Deliverables

__________________

Purpose of the Project


Their current platform is split up between two products – Vanilla Reviews and Vanilla. Both products are classified as consumer ratings and reviews software. They identify as a simplified, low cost version of existing CRM softwares meant for customers just wanting reviews.


The purpose of the project is to bring both products into a more consistent, streamlined experience.


The key features and differences between the two products are:


Vanilla Reviews


Standard Plan Option

- Send review invitations and web chat via text message

- View recent feedback and track unresolved issues

- Create or purchase drip campaigns

- Track and manage customer list by segmentation



Vanilla


Premium Plan Option

- Same features as Vanilla Reviews

- Includes Vanilla and Google Ratings

Goals and Expectations


Currently, Vanilla's customers are door-to-door sales and home service businesses. They hope to expand their customer base to restaurants, gyms, and other businesses influenced by reviews.


Their mission is to harness the power of texting to help businesses connect with their customers and increase customer engagement with messaging campaigns. Thus, leading to company’s growth from positive reviews, customer retention, and increased online presence.


While keeping the company's mission statement in mind, the goals and expectations are to:

-> Combine the platform products

-> Bring clarity and consistency to the UI

-> Enhance the product experience while keeping existing users in mind


Timeline of Milestones and Deliverables


Our milestones were stretched out over a 6 week period. Touch points were once a week where we reviewed deliverables consisting of synthesized research and design recommendations.


During this time, the client's team was focusing on a separate project so meetings were solely with their CTO.


The only constraints were working around the holidays and accommodating schedules.


Research 02

Design Audit


I started my research by conducting an analysis of the existing UX/UI to identify the most critical areas that need improvement.


Report objectives:

-> Discover any usability issues and rank by severity

-> Ensure visual design and branding is consistent across both products


Key UX issues to address:

  1. -> CSV upload example and description needs to be updated.
  2. -> The separation of products causes confusion and shows redundant information and data.
  3. -> No help or documentation is readily available on the platform or marketing pages.


Key UI Issues to address:

  1. -> Current color palette does not pass WCAG 2.0 AA standards for accessibility.
  2. -> Platform lacks consistency and uses multiple font styles and typefaces.
  3. -> Page layouts are not effectively using negative space causing longer usability time. 
  4. -> UI elements are not vertically aligned and appear disorganized.

Click here to see issues ranked by severity.

Competitive Analysis

Features


Although Vanilla is a simplified version of its competitors, it was important to research and understand where their competitors excel in and where they’re lacking. This way, key recommendations could be suggested to Vanilla to adapt on their own platform.


I chose to review 4 competitors to understand if there are any undeniable needs missing from Vanilla. All products reviewed are consumer rating and review softwares that offer an array of features at different price points.


Key features Vanilla is missing compared to its competitors are:

-> Some form of help and support

-> A dashboard page

__________________

Dashboard and Navigation


Since Vanilla is missing a fully-functioning dashboard, I chose to take a deeper look into the UI of its competitors to gain inspiration.


Key features Vanilla is missing compared to its competitors are:

-> Visuals to their analytics

-> A count for reviews sent

Broadly Dashboard

Birdeye Dashboard

Podium Dashboard

Yext Dashboard

User Interviews

Existing customers were recruited and asked to participate in a user interview lasting about 20-30 minutes with 14 questions. All questions were about their personal history and experience in using the product. Some of the questions asked were:


  2. -> Is there a specific pain point or frustration you have while using this product?

  4. -> What would you say are the benefits to using Vanilla?

  6. -> Is there a feature or tool you wished Vanilla offered its customers?

__________________

"Just trying to make it easier to reach people in a quick way."

User Interview Participant

__________________

Affinity Mapping


I broke out my findings and grouped them into 4 categories:


  • –> Pain Points of Frustrations
  • –> Successes
  • –> Usage & Reasoning
  • –> Wishes & Requests


Based off this research, I already started to see a correlation between the issues discovered in the design audit and the pain points called out in the interviews. Aside from any technical issues, it was clear that users:


–> Do not understand the differences or values between products

–> Felt abandoned having to troubleshoot problems on their own

Design 03

Ideate & Sketch

During this stage, I identified the main features/flows I wanted to address in my design recommendations. I chose these based on the severity of usability issues discovered in my research and findings. These included:


–> Updating the navigation

–> Improving the CSV upload page

–> Streamlining steps to send review invites


Before moving on to hand sketching, I brainstormed different ways to set up the information architecture of the platform. I used post-it page markers to visualize my thoughts as I worked through possible solutions.

__________________

Hand Sketches


After ideating solutions for the usability issues, I began hand sketching all my screens. I tried to reflect the new layout as accurately as possible so I could review and align with the client on a clear direction for the new navigation and proposed features. In some cases, I created multiple screen layouts for back-up options to encourage deeper discussions on finding the best solution.













Updated Navigation


The sketches show the full end-to-end experience of moving through the navigation and viewing the dropdown menus on each page.


The biggest challenge was figuring out how to consolidate the excess amount of pages currently available on the platform and group them into a clean, organized navigation.


The new pages represented within the navigation are:

–> Dashboard – Standard and Premium View

–> Help & Support



Flow I – CSV Upload


This flow walks through adding new customers to your account by uploading a CSV file with new customers' information.


The CSV upload page has new copy explaining the page and a CSV format example to help prevent user error.

Flow II – Send Review Invitations


This user flow was chosen because it is the most critical and frequently actioned flow on the platform.


The sketches show how the new layout affects the flow by reducing the amount of clicks needed to complete the task, and combining steps where possible.


Style Guide


Shown here is the proposed Style Guide for the future state of the platform. One of the biggest call-outs was the lack of consistency and standards set for the platform. The purpose of this guide is for the internal and external developers to have the same point of reference while continuing to develop and expand the users' experience.


The style stays true to the original UI by keeping the same font, logo, and overall feel of the site, but with newly proposed colors that pass accessibility standards, unified icons, and consistent components.

High Fidelity Mockups


While creating the high fidelity mockups, I chose to fix the navigation above the fold so my desired layout would stay consistent with my sketches. However, I did change a few aspects of my design that are represented in my mockups. These changes were:


–> Reorganizing the navigation and treating campaigns separate from reviews

–> Changing the 'Reviews' page title to 'Feedback'

–> Adding a 'Custom Message' option to templates

–> Removing having to select a 'Batch Message' or 'Single Message' prior to sending a review invitation


See below for side-by-side comparisons of how the current state compares to the new recommended designs.

Other New Features and Elements

Test 04

Usability Tests

Usability testing was moderated and conducted remotely with 4 participants interacting with the clickable high fidelity prototype. The test session lasted about 20-30 minutes with each participant. The participants were selected based on being a potential future customer to Vanilla. They all work in industries driven by consumer reviews and feedback.


The primary goals were to:

  • –> Discover any usability issues and provide opportunities for improvement
  • –> Receive feedback on overall impression of the interface, layout, and features
  • –> Determine if the creative solutions improve the experience from adding new customers to sending review invitations
  • –> Learn if users understand the terminology and work flow of the software


The participants were given scenarios that completed the following tasks:

  • –> Navigate through the platform
  • –> View your Google rating
  • –> Add new customers by uploading a CSV file
  • –> Send a review invitation
  • –> Check on your messages
  • –> Update account settings
  • –> Troubleshoot a problem

Key Findings


Overall, the testing went fairly well with no big surprises and only a few usability issues – primarily with excessive screens. As I watched the participants navigate through the prototype, opportunities to combine screens became more evident.


However, it was not evident if the participants completely understood the terminology and full scope of the software. My next step would be to build out the remaining flows of the platform and conduct an unmoderated testing session with new participants to ensure user proficiency.


Other than that, participants had no critical issues and were able to complete all the tasks.

Design Revisions

Issues Ranked by Priority


Once testing was complete, I ranked the usability issues by priority and provided recommended solutions.

Priority – Major


Issue – Selecting customers to send review invitations was confusing.

Recommendation – Clean up user flow by reducing or combining screens where possible.

Priority – Minor


Issue – Feedback page felt cluttered with multiple CTAs.

Recommendation – Reorganize the UI to have a clear CTA for each tab.

Priority – Normal


Issue – Slight hesitation on what to do after finishing a task with a success message.

Recommendation – Redirect the user to the original page after completing a task successfully.

Click here to interact with the latest prototype.

Conclusion

Lessons Learned


For this project, I faced the unique challenge of being the first UX/UI Designer to evaluate and work on Vanilla. I had the opportunity to give my opinions and feedback on core features that make up the foundation of the platform. The experience was exciting as much as it was daunting. While there were easy wins with improving basic UI issues, there were also complex information architecture problems that felt unsolvable.


I learned that sometimes you have to go backwards before you can move forward. Vanilla's platform is made up of multiple outsourced developers' work with minimal alignment on business objectives, product terminology, or set standards. By going backwards and establishing this foundation for the platform, I was able to move forward and provide solutions that improved the overall experience.

Next Steps



–> Design screens for mobile view of the platform.

–> Conduct unmoderated testing to ensure user's knowledge of terminology and task completion.

–> Continue to develop the additional screens for the platform.

–> Build out a more robust help feature for troubleshooting on specific pages.

–> Test additional feature options – such as a quick send button or PDF export of page views.