Background
What is Jacquard?
Project Jacquard, out of Google’s ATAP lab (Advanced Technology and Projects), is a collection of conductive threads for weaving touch-responsive textiles like clothing, tablecloths, rugs, or anything else made of fabric. Jacquard™ by Google weaves new digital experiences into the things you love, wear, and use every day to give you the power to do more and be more.
My work with Jacquard has been improving the user experience around their Levi's products which include:
The project
We were tasked with answering a core research question: How can we reduce the barrier to customize your Jacquard garment, balancing ease of use with the possibility of tuning abilities, alerts and trackers?
My role: One of two designers working on product excellence, discovery, and uncovering the best IA and interaction model for the product
Opportunity
At the time, users had to manually assign features to each gesture slot (e.g an assigned action such as tapping your jacket cuff). Users have often expressed that Jacquard is rigid and requires too much manual input to adjust the capabilities of the garments, especially as they change context through the day.
Problems
- Too many clicks to change configuration (change an Assistant question when already assigned).
- Too many clicks to view what current configuration is
- Configuration state overview is not glanceable
- Not enough gestures (i.e. help users get more out of the product)
- No context specificity to configuration state (when i'm listening to music…)
- User are not sure which ability to try and what their use cases are
- Users are not sure which ability have activities and which don’t
Design Goal
Aim to reduce the friction associated with personalization and modifying the configuration of the product.
Project timeline
Sprint 1
(2 weeks)
Holistic review and analysis of the overall experience around customization (abilities, alerts and trackers). Reviewing the current IA and identifying opportunities to address key pain points and focus areas.
Desired outcomes:
- A shared understanding of the user journey and current IA map
- Experience audit to assess any friction points and identify opportunities within the current app as it stands
- Agreed-upon design principles that will guide our approach
- Identification of various themes that will act as possible directions to evaluate and stress-test proposed IA possibilities
Sprint 2
(2 weeks)
Rationalizing our identified themes by proposing new IAs and that are evaluated and stress-tested against our design tenants and different interaction models.
Desired outcomes:
- Creation of possible low-fidelity wires of the app related to customizing trackers, alerts, and gestures
- Stress test 3-5 possible directions
- A suggestion of the “preferred” direction
- Validation via some criteria as to why this direction is suggested
- Potential pitfalls or compromises outlines
Sprint 3
(2 weeks)
The physical manifestation of the principals driven by the previous phase. Multiple options, to be narrowed down to top option
Desired outcomes:
- Increased fidelity - Refined higher fidelity on chosen direction
- Identification of interactions - screens and flows as a manifestation of the IA leveraging existing Jacquard design system
- Prototype clearly articulating the value-add in the IA and the flow
- Convincing visual designs showcasing customization and scalability
Phase 1 - Discovery
Existing IA
A lot of this is foundational research into uncovering how the current experience is set up. This is in effort to dissect the areas where we can provide the most value for the user.
Architecture
The current experience focuses on separating educational and configurable functionality on the homepage. However, these two functions struggle to differentiate from each other and leaves the user with no prompts or tasks to better understand their product.
Existing user journey
I spent time breaking down the user journey and mapping out where personalization lived and the friction around it. After creating a thorough gap analysis, I consolidated some of the findings below:
UXR and Diary Studies
Evaluative research, involving testing the exiting product was conducted - we had to synthesize the findings around specific personalization painpoints. Additionally, our internal product team conducted diary studies to better understand the product and the friction we personally had with it. Below is a synthesis of our findings:
A.) Setup Process
Currently, the experience has a long onboarding and demo process before going into perosnalizing your product.
e.g., You need to go through at least 40 screens before you can actually start using the product and discovering the value of the app.
B.) Contextual Intelligence
Can the Jacquard app be smarter around tailoring actions based on what the user is currently doing?
e.g., When you’re actively listening to music or using your phone for a voice call can the gestures of your product automatically switch to be useful in the moment when performing said action?
C.) Personalizing
Way too many taps to get to personlizing your product and identifying what is and is not assigned to your product.
e.g., All assigned abilities are currently hidden away under the personalize button on the home page.
D.) Context behind Abilities
Users are not sure what abilities to try and what their use cases are.
e.g., Can be difficult to go through every instance
of an ability to figure out how I can use them throughout my day or for a specific goal in mind.
E.) Configuration States
Difficult to understand at a glance what abilities are currently assigned to your product in the app.
e.g., Personalization is currently hidden behind a CTA that only says how many abilities your have assigned. Assigned states aren’t clear either.
F.) Abilities and
Activity Cards
Users are not sure what abilities have activity cards associated to them or not.
e.g., Currently, you don’t understand the outputs of certain abilities without reading the description or see the value of turning them on.
Phase 2: Exploration
Ideating
The designers diverged to rapidly ideate ways to reduce friction with the assignment flow; focusing on clear pathways and state changes.
I traditionally sketch with pen and paper to generate as many possible ideas as I can, then group them based based on similar interaction models.
Interaction models
Based on our idea generation via sketching we were able to come up with 3 distinct interaction models we brought forward to stakeholders to further investigate:
IA Model 1: Bottom Nav
A persistent entry point that creates three distinct sections for the user to be grounded in.
Solution.
A model that feels familiar but provides a clear next step when coming in on day 0 and can flex after you've already assigned abilities to your product
Pros
- Reduces the barrier into personalization as it exists today
- Clear path to modifying abilities
- Access to stand alone abilities catalog
Considerations
- Does not comfortably work for multiple products
- Abilities catalog is still hidden behind a button
- Assignment steps require full screen takeovers
IA Model 2: Bottom Sheet
Puts personalization front and center without distracting you from using your product and reflecting on your activity.
Solution
We keep users grounded in the app experience, while being assisted with a bottom sheet that changes contextually.
Pros
- Persistent access to product features no matter where you are in the experience
- Allows for multiple entry points into personalization
- Doesn’t impede on being able to use your product and reflect on your data.
Cons
- What is the right level of control for users to deal with without being overwhelmed.
- Discovery is de-prioritized.
IA Model 3: (Sheet + Nav)
A hybrid approach combining a bottom nav and a sheet
Solution
Providing quick navigation to the apps most popular features (Discover and Activity) and adding personalization in the form of a drawer
Pros
- Reduce the number of steps to personalize
- Improves access to Actions, Alerts, and Trackers
- Understanding of what is currently assigned
- Make it easy for someone to modify their assignments
Considerations
- How we allow for discovery of new abilities and stories?
- Potentially too many entryways
- Cognitive load; no clear single task for a user on a given page
Stress testing against CUJ's
With 3 viable options for interaction models, we decided to apply them to the following 8 CUJ's (Critical User Journeys) in order to stress test the models and see where gaps arose. We then created 3 prototypes for each interaction model in order to demo the flow and journeys.
CUJ-1:
Assign a non-configurable ability via Discovery
CUJ-5
Assign a configurable ability that has a tracker via discovery
CUJ-2
Assign a non-configurable ability via Product Sheet
CUJ-6
Assign a passive, non-config tracker via Discovery
CUJ-3
Modify an assigned ability configuration
CUJ-7
Assign a passive tracker via Product Sheet
CUJ-4
Replace an assigned ability
Example of a flow (CUJ1 applied to bottom sheet)
Phase 3: Recommendation
After spending close to 6 weeks exploring and stress testing options, we were able to make a strong recommendation on an interaction model that would enhance the Jacquard personalization experience.
Introducing the product sheet
Leveraging this paradigm we can create an ephemeral layer that helps the user quickly access, assign, and modify their product personalization settings. .
What it solves
- Reduces the barrier into personalization features of the product via the bottom sheet.
- Reduces the need to take a user to separate screens by providing quick context via the bottom sheet.
- Provides two ways to personalize through a gesture and ability first model.
- Allows a user to quickly modify configurations of any assigned abilities.
UX Model: Planes and sheets
1. Background Plane
This is the background of the application and the very bottom plane in the stack. Here lives Discovery and Activity Feed.
2. Product Sheet
One level above lives this product sheet. This provides quick access to the personalization features of your product. Gestures, Alerts, Trackers live here and is one way of assigning.
3. Focus Plane
When ever tapping into a new page, that page launches in the Focus Plane. Screens that live here will be the Ability Catalog, Discovery, or Stories.
4. Context Sheet
The top plane in the stack is the context sheet and it comes up when trying to assign, modify, or configure any ability to provide quick access
New home: Creating two layers of repeated interaction
The background plane is home to your Tracker Activity Feed, Discovery, and The Ability Catalog. This screen serves as an entry point into personalizing your product settings, reflecting on your data, and discovering new ways to use Jacquard.
Bi-Directional Personalization; 2 ways to assign
- Gives users the ability to assign an ability they learn about to their product via browsing and later assigning it to a product feature such as a gesture.
- Reduces the need to take a user to separate screens by providing quick context via the bottom sheet.
- Eliminates the need to make the Ability Catalog do all of the heavy lifting.
Contextual Sheet Modifying Configurations
- Gives equal access to the configuration and the rest of the ability catalog.
- Makes use of the focus plane in order to provide additional real estate for modifications to occur.
- Always gives the user a point of reference back to the product sheet.
Visual design & Wrap up
After the bottom sheet interaction model was approved, I was able to easily apply their existing design system to our flows. Below is a glimpse of the final deliverable of personalization screens.
