Branding + Design System
Allconnect.com
All Connect Relaunch
Project:
Digital Rebrand and Relaunch of Responsive E-Commerce Platform
Role:
Creative Director + Visual Designer
Stakeholders:
Red Ventures Senior Leadership
Allconnect Product Management
End-User:
Future + Existing Customers of Digital Home Products and Services through the Allconnect and white label product partners.
Overview
Following the acquisition of All Connect by Red Ventures in 2017, our team was with updating the original and existing brand. As part of the rebranding exercise, we targeted several key areas that would improve the creation of end-to-end customer journeys.
Design Strategy
Site architecture and feature creation
Design system planning and implementation
MVP Release planning and iterative improvements
Co-creation and design thinking exercises
Goals
As a leader in the home service marketplace, Allconnect needed a more intimate connection to the user base. We were tasked with creating a fresh UX strategy and visual language make over for an SEO powered site that had to be built on a CMS platform.
Objectives:
Create a single destination for the selection and connection of all home services
Provide accurate and valuable product information with seamless API integration
Simplify user’s lives through transparency and education during product selection
Introduce a highly configurable, intuitive and responsive purchase experience
Discovery + Definition
Research
During the preliminary phases, we conducted data-synthesis of existing researching, as well as co-creation activities to better understand our users and use cases. Benchmarking of the existing Allconnect experience was also a valuable step towards defining our project’s goals and objectives. Working closely with our UX researcher, we created a complex behavioral analysis and tangible personas to reference throughout our work.
Benchmarking and existing Data Collection
User Goals and Needs (and how to solve them)
Co-Creation and Design Thinking workshops
Guidance and Additional Information
User Persona Creation
Based on our initial research, our team defined three unique persona archetypes:
Assertive Buyer
Expressive Buyer
Cooperative Buyer
Design System Creation
Defining a Visual Identity and Brand
As part of the site rebuild, we created a set of principles that would guide both the design and the user throughout the experience.
Cohesive
Familiar
Approachable
Taking an MVP approach to the rebuild, we knew that the roadmap would include future expansion of functionality and feature sets. We front-loaded the project work by developing a scalable design system, that would accommodate future projects and expansion. Ensure a consistent experience and appearance. Our initial system included the following in an atomic structure:
Tokens
Spacing
Color
Typography
Iconography and Logos
Components
Buttons
Tabs
Forms and Inputs
Menus and Tables
Containers
Cards
Modals
Header and Footer Navigation
Feature Creation and Prioritization
Navigation
Filtering & Product Selection
Digital Checkout
UX + UI Design
Wireframes
Primary pathways, and key interactions were first created in low-fidelity in order to test efficiency and user cognition.
From the initial wireframes, our team created robust interaction flows that mirrored the advanced functionality of an app, within a web browser. We were able to quickly test our features and flows through integration between Sketch. InVision and Maze.
Visual Design
We decided to go with more of a modern day "app" feel because the future plans of Allconnect lean on more of the product side of design. We felt this would make the transition from web-to-app
Insert Images Here
Interactive Pattern Creation
The design language of Allconnect includes both micro-interactions and animation. In order to communicate clearly to our dev team how we wanted the site to operate, we created interactive primers and user-flows. Our focus was to utilize interactions to guide a user through specific workflows and pathways.
Theming the Partner Experience
As part of the existing product offering from All Connect, we needed to re-envision a white-label experience for our partners. Including Internet and cable services, voter registration and address changes through our MyMove micro-service.
Delivery and Deployment
As part of the relaunch strategy, our team supported an email awareness campaign that promoted the re-branding of Allconnect, the new site experience, as well as its new features and services.
Results
Within the first month of launch we found strong indicators of an improved experience. Based on our initial Benchmarking data, we found significant increases in user engagement and conversion.
Also, notable decrease in user “bounce” and abandonment during product research and selection was created through the redesign of key user-flows.
The increase in user retention and engagement can be attributed to the following indicators:
Transparent Price information
Intuitive and advanced product selection and purchase options (Digital cart flow)
Mobile first design approach improving handset device specific traffic