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 designersv will need to do in order to successfully create there candidate components QA review and ultimately end 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 post-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 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.
_____________________________________________________________________________________________________
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. Essentually offer 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 high-fidelity to low-fidelity at the click of a button while utilizing the Helix DS with Figma. Stakeholders often see high-fidelity designs from 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 to 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 in new variants to the base component. By providing video training for on-demand learning, designers would have both the starter component and an instruction quick video to assist in their future low-fidelity varant additions.
Hypothesis
We need to provide stakeholders lower fidelity designs to spur further discovery and design activities to get closer to what all parties can feel are 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 need 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 calls for a lo-fi Corner Radii option, we will need to build a lo-fi version to support this option via variables.
• While there could potentially be a number of ways to execute on this project, the solution could be that as components are built, we offer low-fidelity versions of them 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.
Low-Fidelity Card Playground Page
Playground page to test out the low-fidelity versions of the Card component. Likewise, you can check out a video of how the variants work.