Stash

Featuring project diaries, fabric cataloguing, and powerful filtering tools, the Stash app for iOS helps quilters and sewists keep their "Stash" of projects, fabric, patterns, and notions organized.  Stash was initially designed in a personal Design Sprint.

  • User Experience Research
  • UI Design for iOS

Introduction to Design Sprints

The Google Ventures team developed a time-constrained process called Design Sprints to "unstick" a stuck project or rapidly develop a new one. Although intended for teams, I went through a Sprint on my own to quickly design a mobile app to solve a problem I'd experienced while sewing and quilting.

A Design Sprint is a five-day process; here's what I did each day.

Day 01 • Understand

What are the project goals?

  1. Design a mobile app to help sewists and quilters organize their fabric, projects, and tools.
  2. Utilize the Google HEART framework (below) to understand if the design is successful, specifically targeting Happiness, Task Success, and Adoption.
    1. Happiness
    2. Engagement
    3. Adoption
    4. Retention
    5. Task Success

Why is this needed?

  1. Many quilters and sewists build up enormous stashes of extra fabric at home. These stashes are hard to keep track of, leading to purchases of duplicates and forgotten fabrics.
  2. "UFOs" or "Un-Finished Objects" plague many a quilter and sewist as projects are started and then abandoned.

Are there any existing solutions?

Star Fabric (figure 1.01), an iOS app with limited filters and less-than-glowing App Store reviews, and without support for notions, patterns, or projects.

Fig. 1.01 — Screenshot of the Fabric Star app Fig. 1.01 — Screenshot of the Fabric Star app
Fig. 1.01 — Screenshots of the Fabric Star app

Starting with my own issues with Star Fabric and feedback from its App Store reviews, I conducted a lightning demo and a competitive analysis, paying attention to features that Star Fabric's users wanted to have and complaints about their experience using existing features. Next, I wrote and sketched the most important user stories:

As a user, I can...
Store a piece of fabric in my Stash.

  1. User clicks on Add button.
  2. User selects Fabric.
  3. User clicks on Photo.
  4. User selects between Take Photo and Choose Existing.
  5. User fills out the following fields:
    • Name
    • Pattern Size
    • Pattern Type
    • Main Color
    • Secondary Colors
    • Dimensions
Figure 1.02 is a user story sketch showing a user adding a new fabric to the Stash app
Fig. 1.02 — Adding a new fabric to Stash

As a user, I can...
Retrieve info about a piece of fabric from Stash.

  1. User clicks on Stash button.
    1. User selects Filters and chooses applicable filters.
    2. User selects Search and enters keywords.
  2. User selects desired entry from the results.
  3. User is presented with the info page for the desired fabric.
Figure 1.03 is a user story sketch showing a user retrieving details about a fabric from the Stash app
Fig. 1.03 — Retrieving information about a fabric from Stash

Day 02 • Diverge

Today's Goal:

Create as many ideas as possible. As GV's Jake Knapp put it, "illuminate all the paths."

Today's Steps:

  1. Choose part of the problem.
  2. Make mind maps surrounding the divided problem.
  3. Complete a "Crazy Eights" exercise to rapidly explore many problem-solving options.

Step 1 — Choose Part of the Problem

I chose to divide my two user stories from Day 1 into four parts, shown in blue in figure 2.01 and figure 2.02, below:

Figure 2.01 shows the first user story, and is highlighted to emphasize adding a photo and entering information
Fig. 2.01 — Highlighting adding a photo and entering information

A. Adding a photo of a fabric

B. Entering fabric information

Figure 2.02 shows the second user story, and is highlighted to emphasize searching using filters and keywords
Fig. 2.02 — Highlighting searching using filters and keywords

C. Finding a fabric using filters

D. Finding a fabric using search

Steps 2 and 3 — Mind Maps & Crazy 8's

For each of my four sub-problems, I made a mind map and eight quick, 60-second sketches (figure 2.02). Together, these two activities generated a lot of ideas, not all of them good.

Figure 2.03 shows a sample of the mind maps and crazy eights
Fig. 2.03 — A sample of the mind maps and "Crazy 8's"

Day 03 • Decide

Today's Goal:

After yesterday's flood of ideas, use Day 3 to decide which ideas to follow through with, test, and implement.

Today's Steps:

  1. Categorize ideas from the Mind Maps and Crazy 8's created on Day 2.
  2. Build an affinity diagram and use it to separate ideas.
  3. Use paper prototypes when a conflict arises between two ideas.

Step 1 — Categorize Ideas

Using Post-it notes and tabs, I transferred ideas from yesterday's Crazy 8's and Mind Maps (figure 3.01). I also used this step to identify conflicting ideas.

Colorful Post-It tabs labeled A-E Post It with writing: 'Remember Previous Stores and Lines' Post It with writing: 'Fabric.com fabric criteria e.g. hand' Post It with writing: 'Color Picker -auto -eyedropper' Post It with writing: 'Dimensions -include an option for scraps' Post It with writing: 'Comparisons to Current Apps' Post It with writing: '[arrow symbol] does not equal 'rotate' too many misleading icons!'
Fig. 3.01 — Transferring ideas using Post-It notes and flags

Step 2 — Build an Affinity Diagram

In assembling my affinity diagram, I did something that's only feasible during the solo design process; I chose to leave some ideas off the wall, categorizing as I went.

I divided the ideas into the following categories:

  • Comparisons to Existing Apps
  • Item Details
  • Settings
  • Existing Features to Expand Upon
  • Brand New Features

Step 3 — Create Paper Prototypes

Working from ideas that were categorized in affinity diagraming, I made paper prototypes (figure 3.02) covering the user tasks from Day 1's User Stories and used them to choose between solutions.

Fig. 3.02 — Three of the Stash paper prototypes

Day 04 • Prototype

Today's Goal:

Create more polished prototypes using Day 3's ideas and paper prototypes.

Today's Steps:

  1. Develop wireframes using selected paper prototypes from Day 3.
  2. Use Photoshop to design high-fidelity UI mockups, and use Axure to develop interactive prototypes.

Step 1 — Wireframing

Using the solutions selected during Day 3's paper prototyping, I created wireframes in Axure:

Wireframe of an empty Stash drawer Wireframe showing selecting a Stash entry type Wireframe showing Stash entry detail Wireframe showing a Stash drawer with entries
Fig. 4.01 — A set of Stash wireframes showing the "Add Fabric" task flow

Step 2 — High-Fidelity and Interactive Prototyping

Stay tuned for interactive prototype of Stashv3. Below are current screenshots of Stash.

Stash Prototype showing fabrics and patterns in a stash

Day 05 • Validate

Today's Goal:

Use Google's HEART framework to validate the design.

  1. Happiness
  2. Engagement
  3. Adoption
  4. Retention
  5. Task Success

Today's Steps:

Use the earlier-developed goals, signals, and metrics to determine if three of these had been fulfilled: Happiness (personal), Task Success, and Adoption. Looking forward...

What Happened Next...

User Testing:

Hoping to solve some sticking points from Day 3, I reached out to online communities of sewists and quilters for feedback and user testing with the interactive prototypes. In particular, I found users had difficulties with the eyedropper color selection tool I had designed, so I started over on that tool and followed a design pattern that worked better for touchscreen uses.

Development:

Stay tuned!

HEART Framework Goals:

  • Early testing showed drastically improved Task Success (metric: reduced user error)
  • Adoption rates remain to be seen (but are looking promising based on user feedback and interest)
  • [personal] Happiness with the redesign was definitely achieved!
All Tia Yup Realstir Stash Industry UCSD