Tossbury
ISM Arts & Culture - January 2024
Through engaging with clients and customers, Tossbury, a black-owned small business, has significantly changed its focus and objectives over the past few years. Tosin, the visionary behind Tossbury, is now embarking on a transformative journey to redefine her brand's identity and expand its offerings. In response to significant shifts in her vision and the introduction of innovative products and services, Tossbury is in need of a comprehensive reimagining of its digital presence.
I led the end-to-end rebranding and redesign of the web experience to align with the business's evolving vision and showcase its new services.
The rebranding and redesign resulted in a 15% increase in revenue for the business.sion rate.
My Role
Intending to rebrand the business and redesign the website to enhance its digital presence and boost conversions, I initiated the process by conducting meetings with stakeholders and performing a heuristic evaluation of the current website.
I began the work by creating mood boards, defining project paths and leading the efforts to redefine the information architecture, focusing on redesigning the user experience and, ensuring alignment with the business's vision to expand its reach and promote new services and products.
These comprehensive efforts resulted in a 15% increase in revenue for the business.
Ideation
Visual Elements
A User-Friendly and Market-Savvy Fresh Look
Let’s Zero In on the Impact
The KPIs defined for this rebranding were intended to measure various aspects of the user experience and the effectiveness of our design changes. They included:
Conversion Rate
This indicates how effectively the website or marketing efforts are turning visitors into customers or leads.
Customer Satisfaction
This indicates The level of contentment among users with the new features and the overall website experience.
The rebranding and redesign led to a 15% increase in revenue, along with positive feedback from users and stakeholders.
Product Designer
Skills
E-Commerce, Information Architecture, Heuristic Evaluation, Wireframing, Prototyping
Timeline & Status
4 Months – Launched in January 2024
After meetings and conversations with stakeholders to understand Tossbury's new vision and goals, I led the rebranding effort by first creating a comprehensive mood board. This visual representation captured the essence of the desired direction, which was then reviewed and refined based on stakeholder feedback.
The design system needed to align with Squarespace's limitations; however, we managed to implement noteworthy modifications to the visuals and colour scheme to embody the fresh brand identity with precision.
By focusing on refreshing the visual components contained within these confines, I have crafted a unified and contemporary layout that resonates with the company's progressing outlook.
These freshly integrated graphics and colour schemes introduce a lively and dynamic appearance to the platform, elevating its allure while upholding coherence with the designated design principles of Squarespace.
The rebranding and redesign process integrated new features and effectively communicated Tossbury's evolved vision, aligning it with its competitors in the market. This strategic overhaul not only modernized the brand’s image but also resulted in a cohesive and engaging design.
The new website is more inclusive, featuring a streamlined information architecture that makes it easier for users to navigate and find the services and products offered.
By enhancing usability and aligning with market standards, the redesign supports Tossbury's growth and strengthens its market position.
Success Metrics
Revenue Growth
The financial impact of rebranding and new features. This helps determine whether the new features and services are contributing to increased revenue.
Overview
An Opportunity to Reboot & Optimize
Tossbury, led by fashion consultant Tosin Sobowale, is dedicated to redefining style, embracing diversity, and empowering individual uniqueness. By offering personalized styling solutions, Tosin enhances wardrobes and simplifies the styling and shopping experience through both virtual and in-person services. These services are designed to create a memorable and transformative fashion journey, elevate clients' fashion sense, and make stylish living accessible and effortless. Tossbury also features a curated collection of handbags, clothing, and accessories, complemented by "Tossbury Tips" on how to style each product.
The goal was to align Tossbury’s digital presence with the business's evolving vision & mission.
Background
In the design world, constraints are always present. While they can be frustrating, they challenge our creativity and push us to find innovative solutions to achieve our goals.
How might we align website and brand elements with the evolving direction of the business to effectively promote new features and services, expand reach, and maximize revenue potential?
Design Limitations: Design choices must adhere to Squarespace's design limitations and capabilities.
Brand Continuity: The rebranding effort must maintain continuity with Tossbury's existing brand identity to ensure recognition and trust among current customers.
Feature Promotion: The website redesign should accommodate the promotion of new features and services effectively without compromising user experience.
Budget Optimization: The budget and resources for the redesign should be optimized to achieve the desired rebranding goals efficiently.
Constraints
Solution
Rebranding Our Way to a Revenue Increase
Concern
Discovering user needs
To understand our customer's needs better, I held several discovery meetings with Tossin. During these sessions, we reviewed her previous clients, identified her ideal customer profile, and explored the target audience she aims to reach with this rebranding initiative.
Through this process, I gained valuable insights into what mattered most. Key priorities that emerged included the following:
Pricing Transparency
Users needed clear and straightforward pricing information to help them understand the cost of services upfront.
Uncovering issues
Design and Usability
Improve the visibility and clarity of CTAs.
Enhance the landing page to better reflect the website’s functionality.
Revise navigation for clarity and ease of use.
Make the IA & navigation more intuitive for new users.
Align design elements with common e-commerce standards.
Refine graphic design to reduce visual clutter.
Clear Service Information
Users wanted detailed descriptions of the styling services offered, including pricing, packages, and what each service entails.
Following this process, I began by selecting a new colour palette and designing a fresh, modern logo that embodies Tossbury's evolving identity. In addition to the logo, I redesigned all graphics and images to be used on the website, ensuring they aligned with the new brand aesthetics.
These elements were thoughtfully crafted to communicate the renewed vision and effectively promote Tossbury's products and services, resulting in a cohesive and compelling brand presence.
Personalization Options
Users mentioned that having features that allow them to customize their styling experience would greatly enhance their satisfaction.
To uncover critical pain points that could impede user interaction and satisfaction, I performed a heuristic evaluation and analyzed the website’s user interface to identify usability issues and areas for improvement. This evaluation was based on established usability principles and involved a comprehensive assessment of various elements, including navigation, visual design, and user interaction. By focusing on these key aspects, I aimed to pinpoint specific issues that could affect the overall user experience.
Here are the key insights and what needs to be done extracted from the evaluation:
Interaction and Functionality
Simplify and clarify animated messages and pop-ups.
Fix broken links and streamline subscription processes.
Improve cart functionality with proper notifications and easier item removal.
Add Help and FAQ sections, and make product information more accessible.
Our Journey to the Finish Line
Process
Reimagining the Site Map
Refining and improving the information architecture involves a systematic evaluation and restructuring of its content to ensure a more intuitive, user-friendly experience. This process begins with a comprehensive analysis of current user behaviours and feedback to identify pain points and areas of confusion. By organizing content logically and prioritizing key information, we created a clear, hierarchical structure that guides users seamlessly through the site. This involved consolidating redundant pages, enhancing navigation menus, and ensuring consistent labelling and categorization.
Design
If only there were no constraints
Reflection
For now, let’s imagine a scenario where we had no constraints for this project—where we weren’t limited by Squarespace’s design restrictions, the maintenance of products and services wasn’t a concern for stakeholders, and budget or timeline restrictions didn’t apply.
In such a scenario:
I would have expanded our information architecture to include distinct categories for products, such as dresses, pants, jeans, and accessories.
I would have developed a more comprehensive hierarchy for our main products, allowing each service option to be showcased on a single page with detailed breakdowns accessible from the same screen.
I would have integrated our brand's social media pages with the website, enabling our stylists to post curated videos and direct customers to the website.
I would have conducted usability tests to gather feedback and refine our design based on user insights.
Finally, I would have implemented the designs with custom coding to ensure a fully optimized and seamless user experience.