Responsive Web Design
Azure
Project Overview
Improving Indigo Vat Maintenance and Care
Duration
Four weeks
Tools
Figma, Parrot AI, Maze
Deliverables
Research, product design, UX/UI design, concept, prototype, and testing
Problem
Indigo vats are living things that require regular maintenance, measurings, feedings, and care. When things go well, the notes are often never returned to, but when troubleshooting problems, it is often extremely difficult to find previous notes and solutions in a collection of analogue notebooks.
Solution
Azure was designed to standardize indigo data collection and vat problem solving. It focuses on easily searchable tags, scannable templates, individual vat monitoring and maintenance, and community feedback.
What is Indigo?
Indigo is the oldest known natural dye with its usage dating back over 6,000 years. Similar to a sourdough starter, it is a living thing whose complex chemistry requires regular maintenance, feedings, and thoughtful care.
Understand
User interviews
Affinity mapping
Personas
Define
Competitor analysis
Problem statement
Feature roadmap
Ideate
Site map
Task flows
Low-fidelity wireframes
Composition exploration
Design
Style guide
High-fidelity wireframes
Prototyping
User Testing
Research plan
Insight indentification
Ideate
Finalize design
Because indigo is a very niche artform, and no product like Azure exists, competitor analysis focused on products in different fields that contained comparable features such as mobile document scanning, manual or automatic data input, and community engagement.
Competitor Analysis
Market Analysis for Adjacent Features
Dropbox
Onboarding
Data Input
Photo Scanning
Community Connection
Personalized Results
Accubrew
Onboarding
Data Input
Photo Scanning
Community Connection
Personalized Results
Strava
Onboarding
Data Input
Photo Scanning
Community Connection
Personalized Results
Five interviews were conducted with individuals including home dyers, industrial dyers, and both novice and expert indigo dyers. The main pain point shared was that their vat information was scattered in too many places to be able to find again. The majority of those interviewed mentioned taking meticulous notes when checking on the health of their indigo vats, but typically only reviewed past notes when trying to troubleshoot a problem.
User Interviews
Understanding Personal and Professional Needs and Frustrations
The majority of indigo dyers have difficulty finding previous entries in analogue notebooks
Users want some combination of provided data templates and/or to be able to easily scan their handwritten notes into a digital portal
Most users want to upload photos of test swatches as an indicator of vat health
Interviewees expressed enthusiasm for community aspects including message boards and/or tagging employees to troubleshoot problems
01
02
03
04
By distilling the specific needs of users into personas that focus on the target demographics, essential features come into focus, such as photo uploading, provided templates for easy scanning, a section for free notetaking, and being able to troubleshoot problems with fellow indigo dyers.
Target Personas
Improving Vat Maintenance for Indigo Dyers
Indigo dyers are a niche community with a wide variety of access and experience, as is to be expected in a 6,000 year old art form. By prioritizing user empathy and design creativity, it was possible to transform challenges into opportunities and find innovative solutions to common wants, needs, and frustrations.
Research Synthesis
Finding Commonalities in Diverse User Needs
POV
POV
I’d like to explore ways to encourage people to learn and experiment with different types of indigo vats in order to help users feel free to try to new things and refine their natural dyeing skills
How Might We
make note taking and data entry as simple, condensed, and seamless as possible?
I’d like to create a platform that is beautiful and easy-to-use in order to make cataloging and maintaining indigo vats simple, engaging, and helpful because it’s a vital process that often gets scattered among many different notebooks.
How Might We
make learning to build and maintain indigo vats easy, fun, and accessible?
POV
POV
I’d like to explore ways to help users more easily access knowledge and information to make troubleshooting problems easier and cut down on frustration and time spent problem solving.
How Might We
foster human connections between diverse groups of knowledgeable people and experiences with a shared interest in natural dyes?
After interviewing users with a vast array of experience, techniques, and studio practices, certain features and priorities started to come into focus. Searchable tags appeared to be a straightfoward solution to a common problem- finding previous data when troubleshooting problems. Additionally, monitoring vat color, smell, and test swatches were universally important in determining vat health and maintenance needs.
Feature Roadmap
Defining Priorities and Roadmapping User Focused Solutions
Nice to Haves (Batched Release)
Community message boards
Inbox/direct messaging
Must Haves (MVP)
Current vat(s)
Past/archived vat(s)
Searchable tags
Photo uploading
Note/document scanning
Printable templates
Can Come Later (Elevated Features)
Embedded Youtube videos
Purchasable lessons and classes
Collaborations with reliable companies and educators
1.
2.
1.
2.
3.
4.
5.
6.
1.
2.
3.
Sitemap
Developing Intuitive Navigation for Indigo Vat Care
Because indigo vats are living things, each vat develops its own personality and maintenance needs. Certain factors influence its overall health including frequency of use, type of vat, and feeding schedules. Some points of data that indicate its health to its caretakers are color, smell, pH, surface sheen, and color of test strips, among others. By making the overall navigation intuitive, searchable, and cohesive, it simplifies and standardizes the process amongst dyers of all experience levels.
Task Flows
Guiding Users Toward Success and Engagement
The user flow is thoughtfully mapped to ensure ease of use and successful creation of a new indigo vat journal. This journey serves as a focus of the site, and encourages users to explore and engage with Azure as a whole.
Low and Mid Fidelity Wireframes
Ideating and Early Stages of Design
While designing the primary layout, it was of the utmost importance to focus on data organization, indigo education, and ease of use. Thus, the initial wireframes focused on straightforward navigation, robust data entry, and simple tagging, while maintaining easy and intuitive engagement.
Landing
Login
Vat Input
Portal with Pop Out
Mobile Login
Mobile Create New Vat
Mobile Vat Input
Portal
Moodboarding
Design Influence and Inspiration
Based on indigo’s expansive, extensive history and its spectacular spectrum of blues, sourcing inspiration was particularly delightful. Indigo is the oldest known natural dye and its users tend to be passionate about conservation and the natural world, so natural, tranquil organic shapes and simple, elegant UI elements were highly prioritized.
Visual Design
Brand Identity and Visual Language
Extensive experimentation and consideration was given to the visual design of the website. Because this was a vital point of concern for many users, it was important to translate elements of elegance and tranquility into an elevated visual language.
Home Page
Finalized Designs for Web
The elegantly designed landing focuses on simple, clean, beautiful UI while inviting users to explore the world of indigo. Because indigo is such a niche subject, it was important to focus on a wide range of experiences from novice inquirers to expert industrialists.
Onboarding
Straightforward and Intuitive
The intention behind Azure is simple, straightforward, and designed to assist with organization. Indigo is a very precious material that requires a tremendous amount of labor to extract, so the longer we can help vats to live the better. It’s important to ensure the user experiences ease of use and intuitive UX so they can jump into the delightful world of dyeing.
User Portal
Customized for Your Practice
After talking with a variety of indigo dyers, it became clear that the main problem was finding notes, tags, and references to previous issues to help with current problem solving, therefore it was important to make it as simple as possible to find relevant information.
Uploading Information
Clear, Easy, Made for YOU
Indigo vats indicate the state of their health through a number of different data points including color, smell, pH, surface texture, and test swatch color. After discussing users’ practices, it became clear that every dyer uses a different combination of indicators to determine the state of their vats. By incorporating a comprehensive collection of health indicators and a free notes section, Azure’s health logs should adapt to the needs of all users.
Mobile Adaptation
Responsive Design Across Multiple Devices
Because natural dye studios tend to involve a tremendous amount of water, it is highly likely that a large number of users will be utilizing Azure on their phones, making mobile adaptation a very high priority. Taking into account the number of users interested in scanning handwritten or templated notes as well as photo uploading, it was extremely important to make the mobile design mirror the website in its simplicity, intuitiveness, and functionality.
Usability Testing
Enthusiastic Response Despite Subject Gap
While most of the six users tested were unfamiliar with the subject of indigo, the usability feedback was surprisingly positive- “While I didn't understand what a vat was or the content at all, I still was able to complete the tasks easily! Very well done.” After testing, it was determined to make a minor cosmetic change to the login screen in an effort to make the action even more straightforward.
Before
After
Reflection
Looking Back and Moving Forward
Key Takeaways
As a former professional natural dyer, I was keenly aware of the primary problem Azure seeks to solve- finding previous notes to help troubleshoot current problems. It was illuminating to research and interview colleagues and professional contacts to test this hypothesis and learn the ins and out of fellow dyers. I like to joke that if you ask 10 dyers how they do something, you’ll get 100 different answers, so it was a surprise to learn what a universal problem this was. While indigo dyeing is a niche subject, for the 1,000s of people who practice, I believe that Azure could be a game changing product that encourages greater vat success and education.
Next Steps
If there were no major time or budget deadlines, the next steps would be to build out the additional areas of interest, particularly the community focused and educational aspects such as file sharing, message boards, direct user-to-user communication, and virtual classes and tutorials.