Flagship Design System
A wireframe design system allows the team to dedicate budgeted time to more impactful activities, and endearing customers to engage in long-term relationships.
Project Summary
As a central part of the initial team, the UX Lead and I aligned our efforts with the overarching company goals, vision, mission, values, and strategy. In this collaborative project, I played a key role in ideating, defining, and creating the components library, as well as building templates. My work Included:
-
Research
-
Design strategy and principles
-
Component foraging
-
System Mapping
-
Structure and naming convention definition
-
Wireframes and mockups
-
Annotations
Challenge
Create a wireframe design system that allows the team to dedicate budgeted time to more impactful activities, endearing our customers so that we can engage in long-term relationships.
Solution
The System should be an efficient tool for the UX team streamline the wireframing process and enable the following:
1. Continuously improve client experience by having coordination internally across teams.
2. Provide clarity to our team members as it relates to the careers paths by creating structure that has growth opportunities both vertically and laterally.
3. Leverage knowledge we have in each department and share that more broadly across the organization.
Become more efficient at delivering our services to customers.
Discovery & Research
The project commenced with the collaborative efforts of the UX Lead and myself, where we defined the purpose, design principles, concepts, parameters, and rules for the Flagship System.
Upon completing the discovery phase, we established a high-level vision to guide the project, emphasizing key points:
-
Designing for designers
-
Creating a system that doesn't need to be built
-
Focusing on E-commerce practice
-
Developing a tool for wireframing
Informed by extensive research, including the review of existing design systems and literature on the topic, we began building a collection of Atoms, Molecules, and Organisms. These elements were systematically tested and implemented in Templates and Kits, aligning with the guiding vision of the project.
Wireframing & Solutioning
As I build and integrate the system within our teams' wireframing activities. I conducted weekly sessions with designers, encouraging them to utilize the Flagship in their projects and share feedback for improvements.
For instance, we focus on structural enhancements for easier component access and location, incorporate components as per project needs, adopt the concept of an open library with Kits, avoid a rigid template structure, and more.
Once the Flagship reached a certain level of readiness following multiple reviews and team tests, we shared it with the development department, recognizing their past work on an internally aligned kit with similar goals.
Home Page template structure example
Evolving & Iterating
After presenting Flagship to the engineering team and brainstorming to align and unite our efforts, Dusk was created. Dusk is a Shopify-developed template designed for low-budget projects among Diff's clients to increase project circulation and offer more affordable services.
We collaborated closely with interface designers and developers to establish requirements based on Shopify functionality and the component library.
During our collaboration on Dusk, I introduced an additional layer to Flagship to refine its purpose and enhance efficiency for the UX team's wireframe process, making it even more e-commerce-oriented.
At this stage, we solidified the adoption with the team through additional workshops on remapping, restructuring, and aligning naming conventions with developers and Shopify linguistics.
Global Functionality Requirements
Sections Library
An additional step in the evolution of Flagship involved structuring and annotating templates based on Baymard Institute research. This practice resonated with both the UX team and me for several reasons:
-
Ensuring that Flagship adheres to industry standards and practices.
-
Keeping the team informed and aligned with the latest UX research and conventions.
-
Applying Baymard Institute guidelines in various aspects, such as creating UX Audits and explaining UX principles to clients during project discussions.
This step not only enhanced Flagship's alignment with industry best practices but also contributed to continuous education and the application of research-based principles throughout Diff's project cycle.
Functionality Annotations
Templates example and functionality annotations
Flagship
Design System
The system is currently a work in progress in terms of development and template integration. However, it has already proven to be an efficient wireframing tool, saving over 40% of the budgeted time for engaging the UX team. This has allowed for additional value-increasing and beneficial activities on the projects.
