sociavore pages

Sociavore Rebrand

In Summer 2020, I worked as a Product Design Intern at Sociavore, a start-up focused on helping restaurants establish an online presence and improve their online experience.


WHAT I DID

As the only designer on the team, I was in charge of redesigning Sociavore’s current website in order to make it more approachable and visually appealing to attract more customers to the platform.

This was my biggest project with Sociavore during my internship and was successfully launched in November 2020.

View the Website

DURATION

June 2020 - September 2020

TOOLS

Figma, Prismic, Adobe Illustrator

TEAM

Me + 2 Project Managers & Developer

BEFORE & AFTER

My Design Process My Design Process

WHY REDESIGN

We began our process by identifying the key problems with Sociavore's current website to get a better understanding of how to approach the redesign.

In order to understand the website's experience from a different perspective, we worked with Sociavore customers and first-time site visitors by having them navigate through the website.

My Insights from User Research

WEBSITE'S PURPOSE

Find new customers who are looking to establish a digital experience for their restaurant through a website.

Website’s design should work with future content updates

How?

— Website should focus on Sociavore’s Features

— Website should showcase current websites hosted by Sociavore

— Website's design should be simple, and editable for future content updates

INFORMATION ARCHITECTURE

User feedback: “Information was Confusing and overwhelming”, and “Found it difficult to navigate through the website”

To tackle this problem, we revisited the Information Architecture of the website. Since our main selling points were Sociavore’s features, we focused on them first.

We fleshed out Sociavore’s core features and organized all of them into three main categories: Build, Grow, and Connect.

Why did we do this?

Each category had its own set of features, all related to each other. This not only made it easier for users to understand each feature but also improved the ability to navigate through the site.

Information Architecture for Features Information Architecture for Features

VISUAL DESIGN

User feedback: “Was not very visually appealing, felt corporate”

To tackle this, a design system filled with illustrations, icons and images was made in order to ensure consistency in the website.

The primary brand colour was changed to the colour yellow, as it's the colour of positivity, creativity, and often stands out the most.

Information Architecture for Features

CARD BASED UI

A Card based User Interface was implemented as they’re visually appealing, and easy to digest for users. Cards work well with different screen sizes and are easily customizable.

UI Elements for new website

FIRST TOUCHPOINT

To start with the design of the pages, we first focused on polishing the home page. The home page is the first and most important user touchpoint as it is where the customer will start exploring the website.

UI Elements for new website

HOME PAGE ITERATIONS

We went through multiple rounds of explorations of the landing and feature pages. Focusing on the landing page, we began by creating low-fidelity wireframes. Goal was to keep it simple but also aesthetically pleasing to encourage the user to stay on the website. These iterations were presented to the project manager and rest of the team.

UI Elements for new website

LANDING PAGE

The three feature categories along with hosted websites and testimonials are included in the landing page to encourage the user to learn more about the company.

Since our main goal for the website is to attract new customers who are looking to create a website for their restaurant.

We made sure to focus on three things to get them to sign up.

— Introduction to Sociavore’s Features

— Display of types of websites currently hosted by Sociavore

— Testimonials from current users of Sociavore

Home page Iterations

CATEGORY PAGE

The category pages were added to act sort of like another landing page for a specific set of features.

Why did we do this?

Each category landing page allows the user to learn more about the feature themselves without having to go to each individual page.

This aids in solving the problem of having overwhelming and confusing information.

Home page Iterations

INDIVIDUAL FEATURE PAGE

Each feature page followed a similar layout of having three main points separated into cards. Due to each feature having its own page, we were able to go more in depth about each feature and how it works.

Why did we do this?

Individual pages make it easier for the user to track down specific features on the site to learn more about them.

We also made sure the information was easy to digest by having each card feature three points and a visual.

Home page Iterations

DEVELOPMENT

After the design was completed, the pages and design system was handed off to the developer to code and implement.

In order to make the website editable for future updates, we used Prismic, a Content Management System for editing online website content.

Home page Iterations

FINAL PRODUCT

Sociavore's rebrand and website was successfully launched in November 2020.

View the Website

SUMMARY

This project has really taught me that design isn’t always a linear process. There were so many obstacles and changes made throughout the internship. The changes helped me realize how unpredictable design can be, you can go from the end of a project all the way back to square one in the blink of an eye.

Reflection

I believe that my relationship with my colleagues is what made this project so successful. Despite having many agreements and disagreements, we were all able to learn from each other in one way or another.

Reflection

NEXT PROJECT

bondfire screens

Bondfire

Hackathon, Product Strategy, UI/UX Design

Building a storytelling platform to help connect university students.