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.
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.
June 2020 - September 2020
Figma, Prismic, Adobe Illustrator
Me + 2 Project Managers & Developer
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.
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
— 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
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.
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.
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.
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.
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.
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.
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.
— Introduction to Sociavore’s Features
— Display of types of websites currently hosted by Sociavore
— Testimonials from current users of Sociavore
The category pages were added to act sort of like another landing page for a specific set of features.
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.
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.
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.
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.
Sociavore's rebrand and website was successfully launched in November 2020.
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.
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.
Hackathon, Product Strategy, UI/UX Design
Building a storytelling platform to help connect university students.