Dea Razmadze
Scope
Team
My Role
Platform redesign
Product Manager
3 Developers
My Role
website goals
Blocklight, a platform dedicated to helping e-commerce businesses and small to medium-sized enterprises (SMEs) manage their operations and grow their brands, required a comprehensive redesign of its outdated platform. The goal was to attract new customers and enhance the efficiency of existing users' businesses through modern, intelligent, and affordable tools.
WHAT I WORKED ON
Functional Design System
Complete Platform Redesign
Designed “Dashboard” and “Settings” pages from scratch
RESULTS
Contributed to 30% boost in sales within the first 3 months
Increased conversion rates for paid traffic to 3-5% from the existing rates of between 1.37% to 2.97% in first 2 months.
Initial research
Learning what excites and upsets people
As a small startup itself and newer company, Blocklight was having personal conversations with business owners who use the platform and following them on their everyday process. Because of this, we had a lot of information about what competitors users had considered and why they ultimately chose Blocklight and we knew Blocklight’s main value propositions were their affordable subscription plans and quick customer service.
What I learned worked well
Less steps to get the job done on web app
Visually compelling interface which makes you feel you get the value of what you spend
Messaging feature between businesses and their customers to quickly get and resolve issues throughout all platforms
I assessed how other companies in a similar space were marketing their products and what keywords kept popping up. There were quite a few direct competitors, and we wanted to make sure our updates would appeal the most to customers and stand out from the crowd while not needing to reinvent the wheel or take enormous risks for our clients.
User flow diagram
I created a user flow chart to better understand the entire application and how users navigate it. After several internal meetings, I identified which features needed to be eliminated, added, or modified. As a result, it became clear that we needed to develop a new flow chart to reflect these changes.
Landing page
Blocklight gave me a full trust to redesign and improve UX/UI of the web application. The first page I tackled was the homepage, as it was Blocklight’s main landing page and received the most traffic.This is how the landing page looked before I took over. What I realized was that platform had lots of good features that were hidden, design looked rough and outdated. (pictured below).
Old Landing
Outdated button designs, separate social tab in the navbar. Architecture does not have good UX principles.
Simplifying architecture
After speaking with several business owners who are Blocklight customers, I specifically asked them what they most wanted to see on the landing page—social media activity, orders, or numbers. Their answer was clear: they wanted to see how their business was performing. This meant having immediate access to key metrics like orders, sales, and overall revenue. I pushed the orders, sales and campaign hits boxes on top, to give users reason to be excited about or to make them see what they would like to change.
Navigation bar
I consolidated the navigation tabs into Home, Dashboards, and Integration, aiming for a large, visual menu that aligns with the overall site redesign. After experimenting with various approaches, I decided to remove 'Social' from the header and placed the top post on the right side. This decision was based on user testing and heat map analysis, which showed that this feature was the least used. Since businesses actively manage their social media accounts separately, they don’t rely on Blocklight as a Facebook or Instagram alternative.
Display inbox
My goal was to ensure users could access as much consolidated information from the platform as possible. Integrating their main shop inbox into the Blocklight landing page was a key part of this effort. After discussing the technical feasibility with developers and getting the green light, we implemented this feature. Now, customers can see the four most recent messages sent to them, whether from Etsy, Shopify, or another platform, directly on their Blocklight landing page.
Weekly roundout
Weekly where business stands and how it aligns with their projected goals displayed.
Dashboards
Key feature for the platform had to be a new customizable dashboard, so that customers had the power to tailor what was default feature and also key metric visible on their interface. They can add key metrics by themselves and customize dashboard.
System icons set
To better visually represent technical metrics, I came up with the icons set using Blocklight colors.
New dashboard
Integrations tab
Not much changed in the integrations tab, I made elements more round and visually appealing, it is a simple but important tab for customers to link their accounts to the platform so that we get an access and pull information.
Snapshot of the design system
I adopted Brad Frost’s Atomic Design methodology for creating design systems, which organizes the process into five distinct levels: Atoms, Molecules, Organisms, Templates, and Pages. Atomic Design is not a linear process but rather a mental model that helps us view user interfaces as both a cohesive whole and a collection of individual parts. I chose this approach to streamline the startup's workflow and enhance efficiency. It was a major success in accelerating workload.
Future iterations
Message center
I put in a significant effort to advocate for the inclusion of this feature in the platform, as I strongly believed it would set Blocklight apart from its competitors. Despite the challenges it posed at the time, including potential delays in development and concerns about technical feasibility, I was committed to seeing it through. Now, I'm pleased to present the design I've been diligently working on to bring this vision to life.
Prototype
In this case study, I showcase the redesign process for Blocklight, a web-based analytics platform tailored to small and medium-sized businesses. My approach centered on user research, wireframing, and usability testing to identify and address user pain points, transforming them into opportunities for success.
By creating a more intuitive user experience and implementing a cohesive design system, we achieved a 25% increase in user satisfaction and a 10% reduction in churn rate.
The high-fidelity prototype video snippet below provides an overview of the design process, walking through the key features that drove these impactful results.
Impact
Enhanced existing user referral programs, leading to a 30% increase in monthly active users.
The design system significantly accelerated the developers' workflow.
Improved overall accessibility.
Increased conversion rates.