Sociavore Website Redesign —

Redesigning the company website to increase conversation rates

Team: Thusenth Dhavaloganathan (Project Lead), Arman Duggal (Content Strategist), Sergey Zharkov (Developer), Me (Product Design Intern)

Role: Product Designer

Duration: Jun 2020 - Sep 2020

What I did:

As the only designer on the team, my responsibilities were intertwined with every portion of the project:

    • Researched and conducted competitive analysis to identify trends and best practices
    • Established a new company-wide brand identity and design system
    • Reorganized the information architecture for the marketing website
    • Ideated and designed user flows, wireframes, low and hi-fidelity mockups
    • Collaborated with content strategist and developer for a seamless design handoff

Problem Statement

How might we make the Sociavore website more appealing, and easier to navigate?

Results

A few months after launch (Nov 2020), we recorded:

     • 91% increase in conversion rates
     • 150% increase in website traffic
     • 72% reduction in page bounce rate
     • 65% increase in average session duration

View Live Website

Why Redesign?

First-time site visitors and existing Sociavore customers were interviewed about their experience with Sociavore’s current website to help identify key usability problems.

Website's Purpose

Attract restaurant owners looking to establish a digital commerce experience for their restaurant.

Design Goal

Modernize the company branding and make it easier for users to find information on product features.

Business Goal

Raise awareness about the product features and convert website visitors into potential customers

Information Architecture

The user navigation was mapped out using a user flow diagram to help visualize the IA. Sociavore’s core features were fleshed out and organized into three main categories: Build, Grow, and Connect.

In addition, each category had its own page to house its own set of features. Each set of features also had its own respective pages for more in-depth information. 

Why: Content organized into their respective categories made it easier for users to understand different product features effectively and improved the overall user journey. The respective category and feature pages also aid in the site’s overall SEO.

Ideation and Wireframing

After establishing the IA of the new site, I created multiple iterations for the new landing page of our site. This page is the first and most important touchpoint as it is where the user will get introduced to the company.

Iteration #1

Pros: Key product features above the fold for visibility
Cons: Hero section feels too boring and generic

Iteration #2

Pros: Simple headline with visuals to catch the user’s attention
Cons: Visual is too overwhelming to the point where it’s negatively impacting the user experience

Iteration #3

Pros: Simple headline paired with strong visuals and distinct CTA for better conversion rates.
Cons: Visuals are under the fold, reducing initial visual appeal of site

Style Guide

Sociavore’s brand identity was revisited and redesigned into something more vibrant and inviting. The brand colour was changed to yellow, to symbolize and evoke feelings of positivity.

Visual Design

After establishing the design system, different types of content cards were made.

Why: Cards are more visually appealing and help the user digest information more effectively. They also work well with different screen sizes and are easily customizable.

Shipped Design

After establishing the new design system, wireframes were converted to high-fidelity mockups on Figma and handed off to the developer.

View Live Website

Key Takeaways

This project was one of the biggest projects during my internship, and I can confidently say it contributed to a lot of my learnings throughout the summer.

Voicing your Opinion

Despite me being the company first and only designer at that time, I am grateful to have gained the confidence to stand up for the right design decisions to help benefit the company and the user.

Establishing a Design System

Creating an entirely new design system for Sociavore was definitely exciting but also super intimidating at first. Along the way, I learned to focus on the scalability of the system and how it can keep growing even after my internship.

Team Collaboration

This was my first internship and I felt that my relationship with my colleagues is really what made it so great. Working with individuals from diverse backgrounds helped me understand the end-to-end process for a project and taught me how to effectively apply design feedback.