CASE STUDY 1
Project Overview
The goal of the project is to allow designers to rapidly build components for their design deliverables. A straightforward way to do this is by leveraging the slotting technique. While the first application will involve components for specific Product Level Libraries (PLL), the slotting technique can be used with any component or subcomponent.
____________________________________________________________________________________________________
Duration: 2 weeks Company: Ascension
My role:
UX and UI Design
Presentation
Problem Statement
There is a growing need within the studio to offer a way for designers to quickly assemble components. The PLL libraries are comprised of specific components not traditionally housed within the larger Helix DS destined for specific products. The components in the PLL, oftentimes built by team members of that PLL could benefit from adopting a component slotting strategy.
User Flow
We created a step-by-step flow of what designers must do to successfully create their candidate component, the QA review, and ultimately, the component ending up in a PLL.
Hypothesis
By obtaining specific components from a PLL, the Helix DS team would build slotted versions of the components and provide training and starter versions of them to get them set up. Once training and the starter components have been provided, it would be incumbent on the PLL team members to leverage those components to evolve their PLLs as needed. The Helix DS team would operate as SMEs after the launch of the starter components.
How We Get There
• We need to develop the slotting POC.
• Based on the POC, develop a component that has the slotting method applied.
• We also need to add the Slot component to both the working component libraries and provide adequate documentation in the Helix DS style guide for on-demand support.
• Provide PLL team members with instructional video training that walks them through the slotting process.
• Obtain targeted components of a specific PLL to begin creating the starter versions.
• After QC checks and any updates of starter components, provide them to team members for further design work.
Figure 1. Example of a simple slotted component. Selecting the figure or this link will also provide a video demonstration.
Figure 2. Example of a complex slotted component. Selecting the figure or this link will also provide a video demonstration.
Slots Test Drive
Test out both the simple and more complex slotting components.
_____________________________________________________________________________________________________
CASE STUDY 2
Project Overview
The goal of this project was to create an easy way for designers to evolve projects in the early discovery phase of the project lifecycle with stakeholders. It offers them a way to leverage low-fidelity designs to facilitate stakeholder activities.
_____________________________________________________________________________________________________
Duration: 2 weeks Company: Ascension
My role:
UX and UI Design
Presentation
Problem statement
Allow designers to quickly go from low to high fidelity at the click of a button while utilizing the Helix DS with Figma. Stakeholders often see high-fidelity designs early on in the project, and they become attached to the first things they see. Early high-fidelity designs can limit the success of the larger project if final choices are made too early in the discovery process.
User Flow
The user flow on this project is very straightforward. The Helix design team would build a targeted low-fidelity starter component by including new variants to the base component. By providing video training for on-demand learning, designers would have both the starter component and an instructional quick video to assist in their future low-fidelity variant additions.
Hypothesis
We need to provide stakeholders with lower-fidelity designs to spur further discovery and design activities, bringing us closer to what all parties feel is specific to the larger vision of the project.
Design changes: offering designers an easy way of presenting low-fidelity designs that can go from low-fidelity to high-fidelity by changing a component property.
Metric to measure: 10%+ increase in stakeholder acceptance and customer satisfaction.
Metric to measure: 10%+ increase in stakeholder acceptance and customer satisfaction.
Evolution vs Disruption
In order to evolve the Helix DS in a way to allow our designers to keep moving forward in their day-to-day activities, we need a plan to introduce change both gradually and with ease of use at the same time. Gradual and ease of use are the centerpiece for this particular approach to meet the needs of the larger project goal.
How We Get There
By leveraging a component's properties and in some cases, Nested Instances, the designer will literally be able to flip a switch and go from low-fidelity to high-fidelity in seconds. This potentially means to target specific components that are interchangeable in many projects. A prime example could be the Card component and subcomponents that may end up in a card. This approach is further detailed below.
• The first thing we need to do is to expand our Color Token Figma file.
• We can expand by building off of our existing color styles through variables.
• We need to create a new Primitive and Semantic set of color variable sets.
• The Primitive set will leverage the Color Base set as foundational. The Semantic set of colors will leverage the Primitive set. The Lo-fi set will leverage the Semantic set.
• We also needed to introduce a new Lo-fi set of color styles that reduces the overall color palette down to 11 colors, primarily 10 shades of black to gray to white and one blue, blue 400. Further clarity for designers could offer separation in the Color Token Figma file.
• Because the project also called for a lo-fi Corner Radii option, we needed to build a lo-fi version to support this option via variables.
• While there could be several ways to execute this project, the best solution would be that as components are built, we offer low-fidelity versions early on in the project.
Figure 1. Several examples going from low- to high-fidelity.
All of the above low-fidelity examples were created by adding in a variant into the existing Card component within the Helix DS. Three versions were explored through the discovery process. The more detailed version, number 3 from the left was chosen to move forward as the target low-fidelity example.
Figure 2. The low-fidelity versions in this example are leveraging the lo-fi style color collection and lo-fi Corner Radii variable set.
Card Component Test Drive
Pages to test out the full versions or simple versions of the Card component. Likewise, you can check out a video of how the variants work.