︎






A Day in My Life


TOOLS
HTML/CSS/JavaScript
Figma
AfterEffects
Tableau

ROLE
Concept Development
Interaction Design (Co-Lead)
Data Analysis
Web Development (Lead)

TEAM
Alice Cai
Yuran Ding
Taery Kim

CONTEXT 
Spring 2021
6 weeks

Working with the latest 'AIGA Design Census' data to create an interactive communication system and a reflective experience.


A Day in My Life is an interactive web experience that asks our users to reflect on their desires in their future design careers through a participatory experience. It presents a series of illustrations that form a story of a day in the imagined life of a designer, and prompts the users to make a selection between two metaphoric representations based on their values.

Connecting to the latest 'AIGA Design Census' data, this site also enables participants to see how they relates to the designer community and feel more affirmed and encouraged.

Our live site here ☆*:・ﾟ.  (only available in desktop version).



My Contribution

I co-led interaction design and handled all technical aspects of the project. This included conducting research, designing for interactions and flow, developing designs in code, and organizing over 4000 entries of data in JSON and interactively visualizing them. I also assisted to design the site's visual identity and interface.


Context

Brief Ask

We were tasked to work with the latest AIGA Design Census data. We were expected to analyze the data, craft data-based content, and create systems that yield various interactive communication artifacts.

Criteria for Success
Create an interaction and communication system that uncovers meanings and opportunities in the design community in an inclusive and exciting way. 

This project was featured on AIGA.
How Might We ...

Communicate findings from AIGA Design Census to entry level designers or designers who are feeling lost in their careers so that they can reflect on and recognize their values and desires in their future design careers?



The Final Outcome



We aligned designer role or job with personal values and lifestyle, and devised a series of scenarios that would take place throughout the day. 

Using time of the day as a narrative medium and metaphor for life, we devised a series of scenarios that each prompts the user to make a decision between two distinct responses.


The responses are designed to represent two ends of a spectrum, which measure the protagonist’s tendencies and priorities related to personal values and goals, work ethic and outlook on the future of design.

The decisions yield a series of data about like-minded designers in the field today, which come from the AIGA Design Census 2019. It is our goal that the experience encourages a reflection and recognition of some of the most important aspects of taking on a designer role, particularly those related to personal values and life philosophy.


Scenarios take place throughout the day.


Different output triggered when users choose distinct responses based on their values.


The journey is composed of six parts that form a story of a day in the imagined life of a designer (protagonist).



Site architecture & data source.


At the end of the day, user’s choices were recorded and displayed as a series of illustrations in a gallery. 



Different galleries generated based on user choices. 



Research & Process





EXPLORE

Secondary Research
DISCOVER
Data Synthesis
Persona
GENERATE

Tone & Voice
Design Strategy
Site Architecture
REFINE

The Challenge - Data
Visuals
Interactions
Web Development




00.  Exploring the Problem Space through Data


Within the design prompt to work with the 2019 AIGA Design Census data, we first conducted a secondary research on the 4000 responses to find topics of interest.

We found a common interest in exploring the correlations between designers' satisfactions and their values, and focused on the questions about priorities, salary, satisfaction, opportunities, challenges and growth. 

Looking more closely into the "design challenges" and "satisfaction" data columns.


There are personal values and priorities that an individual holds for him - or herself, and external values that affect the individual from within the environment they are in. We wanted to compare these values to satisfaction (career) and happiness (emotion), while also looking more widely at the changes in the industry and in the role of designers. In our research, we asked the following:
  • How are designers' values related to their satisfaction?
  • How are industry trends related to designers' satisfaction? 
  • How have industry trends and issues changed over time?



01. Data Synthesis

  • Location, learning experience and opportunity are the major impacts of satisfaction.  

Location/Satisfaction, Opportunity/Satisfaction, and Learning/Satisfaction in Tableau

  • The longer you stay in the design field - the more likely you’ll be satisfied in your job.


Yrs in Design/Satisfaction

  • Working hours also have a significant relationship with satisfaction. As you work longer, you will likely become extremely satisfied with your job (or the other way around).


Working Hrs/Satisfaction

  • More previous jobs in the design field is also related to more satisfaction.


# of Previous Jobs/Satisfaction

  • It is hard to determine whether the relationships between these factors and satisfaction are causational or simply correlational. (It is hard to say which causes which.)

  • For example, the more satisfaction accompanied by the longer time in career can be interpreted as those who are already more satisfied by their jobs tend to stay in the design field longer. It could also be interpreted as the longer time in the design field causes the rise in satisfaction level. It could also be a case where nothing causational is happening.


02. Persona

How do we utilize, visualize and communicate the unique findings from our research? Who would be interested in our findings?

Because our data and concept of "values" was grounded in an internal reflection, we speculated that it would not be useful for people who are already certain of their values and roles in the design industry.

We speculated that entry level designers, or designers who are feeling lost in their careers, would benefit the most from an experience that requires reflections, provides relevant and useful data about like-minded people, and offers affirmations and encouragements.




03. How Might We...

Communicate findings from AIGA Design Census to entry level designers or designers who are feeling lost in their careers so that they can reflect on and recognize their values and desires in their future design careers?



04. Tone & Voice
Working towards bringing such an experience to our target audience, we decided on a tone that is positive and hopeful, while also reliable, trustworthy, and casual.

Questions we wanted to help answer:
  1. Are there people who are struggling with the same problems as I am?
  2. Are problems in the industry being addressed and getting solved?
  3. How can I prepare for a successful design career?
  4. Where do I stand within the larger scope of designers working in the design industry today?




05. Design Strategy

We determined that we would utilize a multiple choice or ranged input quiz that yields a positive and hopeful narrative of their imagined design career. It was deemed important to make it a participatory experience, so that the user is able to compare his or her own values to those of others. Furthermore, it would create a sense of togetherness. We determined that we would design the quiz to be narrative, through which the user would envision him- or herself in specific scenarios.


06. Ideation 
Mapping the Journey to Data (Site Architecture)
In this space where we align designer role or job with personal values and lifestyle, we devised a series of scenarios during a day, following an A/B testing format and prompts the user to make a decision between two distinct responses. 


An example of an A/B test style question at a particular scenario of the day.


The responses are designed to represent two ends of a spectrum or axes, which measure the user’s tendencies and priorities related to personal values and goals, work ethic and outlook on the future of design. The series of questions revolve around the following axes: work-life balance / salary; mission-driven work / salary; staying put / relocation; working alone / collaboration; comfort zone / challenges.

Related to personal values, goals, work ethic and outlook on the future of design, the questions that designers will encounter under different scenarios encourage reflecting on what may be some of the most significant aspects of one's career and life.



Site architecture & data source.


07. The Greatest Challenge - Data Organization        

One of our greatest design challenges was to think about how to connect these axes to the AIGA Design Census data.

We had our axes to guide us in choosing the most relevant questions in the AIGA data.


We were certain that we wanted to bring in data that would resonate with the user and provide a sense of reassurance. So the A and B options yielded different visual responses and different sets of data about like-minded designers in the field. It was a significant feat to create a cohesive experience across the selection and visual response, and across the visual response and set of AIGA data.


Devising questions and A/B selection, and mapping them with relevant data from AIGA Design Census 2019.

Working with data required contextualization, interpretation, and curation. We relied on the AIGA census data to frame our project, our storytelling, and provide another dimension to our experience, and it was never just information visualization. It was integral to our crafting of narrative and overall experience. It was a design material, which also informed our design process and the interactions of the system we built.

It was a challenge and significant feat to create a cohesive experience between our designed scenarios and the AIGA Census Data that would appear as a response to user selection. We had to go back and forth between the two, both tweaking our axes and scenario questions and choosing and eliminating different columns in the census data.


08. Visual System


The intent of the visual language is to create a hopeful, grounded, personal, and elegant journey.

Color
Our color palette is quite simply defined by the colors in the sky per time of day. The times of day are divided up by dawn, sunrise, morning, mid day, sunset, and night. These gradients are the main focus of our visuals, and the only other color we use is white.



Illustrations
We arrived at a combination of texture and line work that is lightly inspired by the textures and cleanliness used in manga work. We use the texture to create depth/shading/lighting. There are some light hues that suggest dream state colors but for the most part, the background is incorporated into the illustration.



Typography and Layout
First round of illustrations: there is really only one typeface, Spectral, and it is small and elegant. The type is placed to really just caption illustrations and provide context, and the user is meant to fill in the blanks to receive their custom illustration.




After struggling a lot with the illustrations, we took a step back because we were tunnel visioning. We also received feedback that our typography system was also unsophisticated - there was pretty much only one level of hierarchy and one font. Because we were not feeling extremely confident that the illustrations could carry the weight of being the main focus, Q suggested maybe the typography could be the main focus, as it is mostly what the user will be interacting with.



From these iterations, we developed a more complex system of type that put emphasis on what’s personalized and what’s impersonal.

We have quite a few elements in our typography as it is the main focus of our storytelling, but for each variation we went with very classic styles. As seen in our demo, the main font we use for narrative storytelling and questions is a serif called Spectral. We chose this font for its elegance, and nonparallel curves that give it a little more personality.


This serif is paired with Duo Brush Pro, a font with many imperfections and a thin stroke that resembles handwriting. We felt that using a script font was appropriate cause handwriting is generally more personal and unique to each individual. Next, we chose Simpolon as a font for initial multiple choices, and for data. The monotype is used because it is less personal - the individual has not made a choice yet. Similarly, the data is a series of decisions that is not 'personal' but of the surveyed population. Neue Haas Grotesk is used for navigation because we wanted it to be small and delicate but still readable.

Based on this, the website layout really fell into place to complement the type. The horizontal scroll allows the type to be big and image-like, and also helps simulate a storytelling journey across the screen.



Animation
In each scenario, there is a set of illustrations that each correspond to a response. Rather than showing a static illustration when the user makes a selection in each scenario, we animated the visual responses to engage the users and hold their attention longer. Set against a largely text-based interaction, the animations provide a reward-like experience for their interactions leading up to them.

An example of a visual response.


The alternative visual response to the left.


Last Page Explorations
Finally, our last series of exploration was in the final page. Initially, we thought it would be interesting to interact with the panel of illustrations through a dial, where the user moves these in the shape of an arch around and a round. Another exploration was to have the side by side like a comic strip. Through our explorations, we realized that this dial motion -  while designed to be similar to our nav bar - was not consistent with the previous interactions in our pages. Our final page now is a similar horizontal scrolling that loops.


Explorations.

We decided on this one.


09. Web Development & Interaction
                      
Our website navigation and interactions represent the journey through a designer's day. We wanted our website interactions to reflect the choices the users would make based on their personal values and life styles.

Live site: https://adayinmylife.glitch.me
Page Transitions (barba.js)
In building out a framework for our site, the first thing that came to mind was page transitions. Because we wanted our website to feel like a single journey, and also represent the passage of time through a 24-hr cycle, I tried using the fadeIn() and fadeOut() in jquery. There was, however, a brief blank stage between pages that felt abrupt. I then found a package called barba.js that could fulfill seamless transitions. It worked by wrapping around all the pages and making them appear as a single smooth piece. I also customized the page background that serves as an intermediate stage between the page transitions.


Showing a smooth page transition with an intermediate background using barba.js.

Using barba in CSS and JavaScript.
Horizontal Parallax Background

We choose to implement horizontal navigation because it best represents the linear progression of a journey in time.


To add more depth to the interaction, the website has a parallax background, on which the floating clouds move at different speeds as the user navigates.


Showing the horizontal parallax background.

Selection Interaction
Selection is a key interaction, in which the user selects one of two choices to fill in the blanks in a sentence. When a user hovers over a choice and makes a selection, an imperfect circle is drawn around the choice. After selected, the answer grows into the script font.

Showing the selection interaction.

Working with API +
Curation of Data based on User Input
Based on the user's initial input and his or her choice at each scenario, relevant data from the AIGA Design Census 2019 are retrieved in real time. Curating the outputs that appear on each page based on the user’s choice was to emphasize and reinforce the reassuring tone of the overall experience.


Output for "I feel intimidated being the only designer on the team".
Output for "I feel empowered being the only designer on the team".

Parsing the AIGA design census data in json format.
Retrieving data from AIGA design census based on user's choices.



For the responsive data outputs, the system parses the AIGA Design Census data into json format, and compares and crosses the user’s input with these data. User's choices are stored as global data, and are reflected in the final gallery when the day ends. In the following, two final galleries are shown based on different user selections.


User's choice stored for final gallery. Different galleries generated based on user's response.


Coding Challenges
The main coding challenge in this project was learning the barba.js library, which is very different from other JavaScript libraries that we have used. Because barba.js works by wrapping all HTML pages into a single page, and only calls one main JavaScript once at the start, we need to create and call a new JavaScript file every time a subpage enters the main JavaScript file, rather than directly parsing many JavaScript files.

Create and call a new JavaScript file every time a subpage is entered in barba.init().


Insights



The design landscape is ever-growing and changing with social, technological and economic shifts. How designers and their roles change throughout time and across these shifts affect how satisfied and dissatisfied they feel in their roles.

We will never stop asking ourselves: how might personal values tie into a designer’s satisfaction in his or her role?


As a space for thinking about what matters most to being happy in the designer role from the perspective of its alignment with personal values, the interactive website provides an experiential and explorative journey that tells a story of one’s pursuits.