Swyft Technologies
OVERVIEW
Swyft is a last mile logistics software company that instantly connect any eCommerce store or third-party fulfillment center to Swyft's network of local and regional couriers for guaranteed 1-day delivery or next day delivery.
ROLE
UI Designer
UI design, design system, Website Design
October 2022-December 2022
Background
I was contracted by Swyft to rework their website and marketing pages to align more closely with their rebranding strategy. While in the start of their business they targeted small mom and pop shops that needed access to online delivery quickly and efficiently they have expanded to large eCommerce companies like Holt Renfrew, Lush and Roots. To better evolve their visual identity and style an update to their website was requested
Design Systems: Elevating Consistency and Efficiency Beyond Traditional Style Guides
After pouring over Swyft’s new brand guide and strategy I noticed that they are working off a static style guide created by their in house designer. I worked with their internal team to design their website, but once I knew they weren’t using a design system or digital components I pitched an evolution to their style guide into the start of a design system. Since a lot of their internal platform wasn’t documented or componentized, this was the natural solution to get them started and handed off to their internal design team.
Design System
The first step was to comb through the existing web pages to find common patterns and themes. These will start to identify the building blocks of the design system. Other guides like grids, spacing and variables will have to be created from scratch as no standard system has been in place currently. The goal of Swyft’s design system at this stage was to establish commonalities and documentation that can be used by future designer and developers to expand upon and take example from.
An important aspect of the design system is to account for all states of the component, for example a button should have a default, hovered, focused and disabled state. By linking these variants within the component rapid prototyping and identification of states can be accomplished while designing and developing.
Benefits of a design system:
Achieve UX Quality & Consistency - built-in consistency through a single source of truth with tried and tested components that can be applied to any project. This significantly improves the product development process by scaling design across an organization and ensuring improved UX, UI, and product delivery.
Accelerate Development Efficiency - With a complete design system in place, developers can spend less time searching for the “right component” or coding tedious design elements and instead spend their time on improving a product, shipping updates, or building something brand new.
Better Team Collaboration - By maintaining a centralized design repository and extensive guidelines in one system, developers, designers, product managers, and new teammates can improve their knowledge-sharing and can easily reference the most current source of information to ensure consistency across projects.
One of my goals was to be heavy handed with design documentation, both in the page sections and internal component descriptions. This will allow anyone coming into the file to identify where and when a design token should be used and how modifying it will affect the overall system.
Website Redesign
While the design system became the main goal of the project, the original goal of redesigning the Swyft landing page was accomplished simultaneously. Using the updated brand guidelines provided by Swyft’s internal team I iterated through the web pages to produce final high fidelity design files.
