SpecBase

SpecBase

SpecBase

Giving designers more time with a digital inventory

Time Frame:

Conceptual - 2021

My Role:

Solo UX/UI Designer

Featured Skills:

Research
Concept UX design
Visual UI Design

Skip to Final Designs

Skip to Final Designs

Skip to Final Designs

Overview

Current Problem

Interior designers and architects utilize and reference libraries of physical materials for client projects. These physical materials can be swatches of carpet, wood, glass or tile along with any material that makes up a building. These large libraries can be overwhelming to navigate and time consuming to maintain.

Design Challenge

How might we help streamline the material library organization system to give architectural designers more time to design?

Hypothesis

If there is a solution that makes library management more efficient designers would be willing to adopt it into their workflow.

Design Solution and Outcomes

A digital material inventory app that helps designers organize and curate materials for all their design projects. Initial user testimonials show approval with a strong indication that a greater network of designers would invest in this product.

Project Approach

Research

Secondary research
Competitive analysis
Survey
Interviews

Synthesize

Affinity map
Personas

Iterate

Sketches
User stories
User flows
Storyboards

Design Development

Wireframes
Edge cases
Usability audit
Animations

The Context

A Tool For Interior Designers and Architect

People spend a large portion of their lives indoors. Interior designers and architects have an important duty to design high performance buildings that help shape and support how people live their daily lives.
Photos by Unsplash

Specifying Materials

Every aspect of a building must be chosen from window panes and door handles, to the fabric of a chair or paint color. Design offices keep small samples of these materials to reference during their design development work.

Finding the Challenge

Material library photos by Amelia Burnett

Too Many Materials to Manage

There can be hundreds of physical material samples to keep track of and it can be overwhelming for designers to find what they are looking for while also keeping the library up to date.

While working in past jobs I’ve helped design teams organize their libraries and I’ve thought:

There must be a better way to manage these large collections of materials...

Initial Research

Understanding the Problem

How many designers struggle with this challenge? I started with some secondary research. I found online articles and past market studies to understand the context of this problem. I also conducted a competitive analysis to learn what solutions had been previously proposed.

Epiphany Studio Market Survey Participant

“Technology needs to be embraced/updated to meet market changes.” - Survey of 69 material professionals conducted in October 2020.
My own survey results from 14 designers
User interview over Zoom

Learning from People

I wanted to connect with people who use libraries directly, so I set up my own screener survey. This survey gave me further insights on peoples’ experiences with libraries and helped me know who would be the best to interview. I conducted 7 virtual interviews with various designers and it was so helpful to learn about peoples’ goals and challenges relating to materials.

Initial Primary Research Takeaways

  1. Many designers and design firms struggle with managing their material collections.
  2. Organizational needs vary depending on the size of the design company and the kinds of projects they take on.

Synthesize

Finding Common Patterns

At this point I really needed everything I had learned so far to be in one place so I could evaluate my findings. I gathered all my research notes, interesting quotes, and key takeaways. I organized these fragments of information to create an affinity map. This showed me patterns and trends across all verticals of my research. I began to learn that there were common struggles that many designers were facing.

Affinity Map Takeaways:

Values:
1. Material libraries act as a source of inspiration and an inventory for designers.

2. Designers will often reference their past projects to see which materials have been specified before looking for new materials.

Challenges:
1. Materials are overwhelming to find.
2. Pricing is hard to obtain.
3. Libraries are difficult to maintain.

Asking Why

For each of these values and challenges I asked “why” 5 times. This helped me zoom out and see the bigger picture of these statements. It also showed me the potential value that a proposed solution could have for these designers. Many of these challenges resulted in a loss of precious time.

“If I spent so much time managing the products and materials, how am I going to manage my time to design and do the things I want to do?”
-Amy (Furniture Designer)

Catering to a Junior Designer

Through my research I learned that younger designers are often tasked with organizing and finding materials. They will then present materials to their design team or more senior co-workers. I created a persona of this junior or beginner designer and it helped me set a goal of who I’d ultimately be designing for and what they needed.
Primary Persona
Secondary Personas

All this research lead me to:

Confirm a Market Need:

A material organization and maintenance tool is desired within the architectural design industry. People would be willing to invest in a product that could save them time and energy.

Define a Problem Statement:

How might we help streamline the material library organization system to give architectural designers more time to design?

Propose a Hypothesis

If there is a solution that makes library management more efficient, designers would be willing to adopt it into their workflow.

Ideate

Brainstorming a Solution

Now that I had a clear design goal and target audience I started thinking about potential solutions. I sketched out various conceptual ideas. Putting pen to paper was the fastest way to start exploring the possibilities.
Brainstorming With Hand Sketches
I wanted to find a way to give designers a library system that was flexible to their way of organizing and that could be maintained effortlessly. I hypothesized that by leveraging technology in a digital app form it could help avoid the current struggles of having to find samples in a physical library.
User Story Map

Putting Things in Order

I started combining ideas together by writing some user stories. These stories helped show what was needed and why it would ultimately benefit the end user. These user stories progressed into 3 primary user flows.

It was important to always keep my target audience in mind and prioritize what they wanted to achieve (designers who don’t want to spend too much time organizing materials).
User Flow Diagram
3 Main User Flows

Design Development

Developing Concepts Into Interfaces

I story boarded the 3 main user flows for a mobile screen to help me think through the experience of each task. I chose a mobile device because unlike a physical material library I wanted this digital library app to be able to go wherever a designer needed to be. This could be a project site, client’s office, or even a furniture showroom.
Initial projects page
Taking photos of a material
Entering the material details
Saving a material to a project

Affinity Map Takeaways:

Testing Sketches
Before investing any more time I stopped and conducted guerrilla usability tests with my sketches. I ran 5 virtual 1:1 usability test sessions. This helped me know if the perceived mental model of peoples’ expectations (how it seems to work) matched the conceptual model that I had designed (how it actually works).

Key Takeaways
People prefer a “Home” or “dashboard” location to reset to if they want to start over.
People like to browse through categories/lists over using a search bar.

Refining with Wireframes

I revised the designs based on the results from testing the sketches. These next iterations of designs were more structured with a defined grid. I also started adding some black and white photos to add another layer of context to each screen.
User Flow #1 wireframes: create a new material entry

Defining a Company Brand

For a more high fidelity prototype of this app I wanted to establish a company brand and identity. This would help create a consistent look and feel for the app.


The name SpecBase came from the words “specification home base”.


The goal was to create a brand identity that represented:
Stability
Professionalism
Flexibility
Functionality
Style Guide using Figma

Working Through the Details

It was satisfying to see the pieces of this design come together into a working prototype.
Exploring edge cases and a UI accessibility audit helped with further design development.
Edgecase Exploration
Color Contrast Check
Accessibility Improvement

Test & Iterate

Letting People Explore the Prototype

I performed two more rounds of testing. Each round consisted of 5 participants that came from the targeted interiors or architectural design background. These were 30 minute 1:1 virtual testing sessions. Each person gave valuable reactions and feedback about this app design and how to make it better.

1st round of testing issues

Onboarding screens are needed to help show people what this app can do for them.
Improve hierarchy of information for easier navigation.
Modernize and polish the UI design.

2nd round of testing main issue

The purpose of the “Contacts” section was confusing to people. Create a clear relationship between the contacts (now changed to “Vendors”) and materials.

Ending Design Solution

Create a new material entry:

Save a specific material to a client project

Measuring the Design Success

For each round of testing I asked people to rate both the consistency and easiness of their experience with the app from a scale of 1 to 5 with 1 being the lowest and 5 being the highest. These questions were based on 2 usability heuristics by Jakob Nielsen.

Heuristic #4: Consistency and Standards

Heuristic #6: Recognition over Recall
“I think it’s really nice for design professionals so they can access things really quickly”

- Erin (interior designer)
“I like that you can search pretty much everything”

- Jill (architect)
“This is something I wish I had when I was working in this space”

- Matthew (production designer)

Ending Results and Next Steps

The reactions from both rounds of testing were overwhelmingly positive. People liked the idea of having this digital tool and appreciated the value it posed. It is a strong possibility that this app would be successfully adopted in the architectural community.

Next steps would be to refine this prototype and release a beta version for a few people to use. This would help me learn how likely people would realistically choose to use this tool for their daily work flow.

Other Projects

Learnings from a Telecom Design Project
Company: Stellar Elements / project202
Type: B2B, Salestool, UX and UI Design
Thoughtful Promotions
Company: Stellar Elements / project202
Type: B2B, Salestool, UX and UI Design
Public Speaking Opportunities
Companies: UO IIDA and Springboard (volunteer)
Type: Presentation, career change strategies, personal branding
Amelia Burnett
User Experience Designer with a background in interior architecture
Email: AmeliaLBurnett@gmail.com
LinkedIn: /AmeliaLBurnett
© Amelia Burnett, 2024
CC BY-NC-ND 4.0
Amelia Burnett
User Experience Designer with a background in interior architecture
Email: AmeliaLBurnett@gmail.com
LinkedIn: /AmeliaLBurnett
© Amelia Burnett, 2024
CC BY-NC-ND 4.0
Amelia Burnett
User Experience Designer with a background in interior architecture
Email: AmeliaLBurnett@gmail.com
LinkedIn: /AmeliaLBurnett
© Amelia Burnett, 2024
CC BY-NC-ND 4.0