A laptop and smartphone mock up showing a beautiful painting style UI

Spectra

Duration
10 weeks, April–June 2020
Team members
Ariel Chan, Ian Yu
My role
Ideation/Conceptualization, Survey Interviews, Participant Research, Motion Graphics, Wireframes, Prototyping, Design Systems, Iconography
For my final capstone project in the UW Design program, I partnered with two classmates to create Spectra: a multimedia toolkit consisting of questions and experiences for creatives to practice more frequent and structured introspection.

Although there is no right or wrong way to introspect, making time to engage in reflection can help individuals and teams refresh during times of confusion or conflict. Through this toolkit, we hope to give creatives a sense of clarity about the values and perspectives they want to communicate and how to mediate team differences.

What is introspection?
Introspection is the self-conscious awareness of one’s thoughts, ideas, and intuition in application to the present & future.

Who is this for?
Creatives in a collaborative field. In a field where collaboration is constant and inevitable, it is critical for creatives to articulate one’s ideas while processing the team’s diverse perspectives.

Why introspection?
Introspection is a powerful tool to discover our values. This is critical to articulate our own perspective while relating to others, improving understanding within collaboration.

What is our goal
Facilitate the introspection process for creatives to create a deeper understanding of the self, the team, and how to improve collaborative relationships.

Research

My team and I centered our research around a hypothesis: Introspection can improve collaboration by helping designers discover & express their values. In return, this helps create a better understanding of diverse perspectives within an inclusive team culture.

To investigate how creatives use introspection already, we conducted a digital survey, 1:1 interviews. We asked participants about their introspection habits during their work in creative fields, and we made sure to probe into how they reflect on collaboration as well.


"78 survey responses, 21 interviews with creatives, and 75 minute long workshop" in blue text on a pink background.
Research methodologies that supported our design decisions



Digital workshop

To further saturate our research and augment our design process, we led a digital workshop with classmates, who fortunately happened to be within our target user group. Activities in the workshop included a question brainstorming session, a guided introspection experience, and a “thumbnail” wireframing activity to imagine how a digital introspection tool might exist on the web.


A screenshot of a Figma design workshop, several clumps of yellow sticky notes fill the page.
Leading a digital workshop with classmates to brainstorm introspective questions for our toolkit



Research insights
‍‍

📝
Introspection is a mental process that can be benefitted from externalization.


Introspection works well within time frames like weekly check-ins/evaluations.

💬
Introspection allows creatives to consciously consider how to best communicate with their team.

〰️
The relationship between introspection and collaboration is interdependent, but not straightforward/linear.

How might we encourage open collaboration between creatives to empathize with diverse ideas & perspectives?

Setting expectations

Because our product tackles a space as subjective as introspection, we made sure to ground our philosophy in three key principles, which served to guide creatives and demystify the ambiguity of introspection.

A graphic showing Spectra's guiding principles: explore the self, relate to others, and practice together



Introducing Spectra

At the end of our 10 week long capstone, Ariel and Ian and I delivered an immersive and guided web experience. Each question and topic covered in our toolkit is tailored to specific scenarios relating to collaboration, like approaching team relationship conflicts and finding clarity amidst ambiguity in projects.


Homepage
Leading creatives through our story and introducing toolkit functionalities: an introductory landing, principles overview, experience modules, question modules, and wider product ecosystem off the web.


Experiences
Experiences are curated in sets of questions relating to a topic of interest. Users can then page through meditative questionnaires to help them reflect at a pace suitable to them.


Toolkit
For free-form introspection, questions and experiences modules of our toolkit are accessible under the "explore" section. These can be filtered to their respective principles with a "behind the question" brief to explain the meaning and guide the user in their reflection.

Iconography

I was in charge of the iconography in our product. The challenge was to represent our three guiding principles through as simple and clean symbols, all the while balancing and curating a design system that speaks the same language.

An early exploration into how to represent Spectra’s philosophy



Design system

Our visual design is accentuated by soft, soothing gradients through a spectrum of primary colors. We aimed for a bright and refreshing feeling for creatives. Moreover, we made this system with accessibility in mind, ensuring that each components met a minimum web color contrast ratio of 4:1.

For motion graphics, we hand-drew frame-by-frame sequences with an intentional blur and grain quality. The goal of this textured style was to embrace the process of introspection that is not necessarily a linear or perfect journey.


Spectra beyond the web

Because our research revealed that introspection can happen anywhere, our team took Spectra a step further and imagined how it could benefit creatives beyond the website.

Paired mobile app


Paper products

Social media