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
How might we make the Sociavore website more appealing, and easier to navigate?
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
Attract restaurant owners looking to establish a digital commerce experience for their restaurant.
Modernize the company branding and make it easier for users to find information on product features.
Raise awareness about the product features and convert website visitors into potential customers
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.
Pros: Key product features above the fold for visibility
Cons: Hero section feels too boring and generic
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
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
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.
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.
After establishing the new design system, wireframes were converted to high-fidelity mockups on Figma and handed off to the developer.
View Live Website
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.
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.