UX Design + Research
Helping designers be more aware of their design process
Project
Over the course of a two-quarter research project, our task was to design and develop a “design awareness tool” to help people become more aware of their own design process. We hope that by using this app, people will make more informed design decisions that could lead to more effective designs, products, and solutions.
Context
Dates: Jan 2020 - Present
Team members: Rylie Sweem, Jordan-Yoon Buck, Grace Barar
Professor: Cynthia J. Atman
Role
I headed the UX design supervised by a UX manager. I also worked on the style guide along with a senior visual designer
Design process
01
02
03
04
Finalizing the solution
04
06
07
01 Defining the problem
The Problem
As designers, it is our design process that determines the quality of our designs. There are not many accessible tools/methods to help designers assess their own design process for self-improvement
Background
Atman's research suggests that the quality of people's designs are correlated to their design processes. During a study, participants were tasked with design activities and asked to give verbal reports about what they were doing during their process. Codes were then assigned to define what a user was doing at a given instant. The codes were then filled into bubble sheets in timely intervals (figure 1).
Figure 1 - Bubbles sheets used to capture the design process
The bubble sheets were converted into timelines and classified based on their quality. Findings show that individuals with expertise & high-quality designs have processes that are more complex, consider a broader set of information, spend more time problem solving and are more likely to demonstrate a cascade pattern (bottom right of figure 2) in their design activities [1].
First-Year Students
Graduate Students
Low-Quality
Medium-Quality
High-Quality
Figure 2 - Design timelines presented by level of expertise and quality of designed artifact
Our Challenge
Design and develop a product to help designers monitor their own design processes with a goal of modifying their process when they think they are going astray.
[1]. Atman, C.J., Adams, R.S., Cardella, M.E., Turns, J., Mosborg, S. and Saleem, J. (2007), Engineering Design
Processes: A Comparison of Students and Expert Practitioners. Journal of Engineering Education, 96: 359-379. doi:10.1002/j.2168-9830.2007.tb00945.x
02 Understanding our users
Target Users
1. Expert designers
2. Amateur designers
Once again, our product would be used to help users be more aware of their design process, with the goal of modifying their process when they think they are going astray.
User Persona
We created this persona based on autobiographical exploratory research and interviews with 3 different designers with different expertise
03 Framing the solution
Design Requirements
We wanted to ensure that every design decision we made about our product was rooted in a real-world user need.
What they said
"I often take breaks and spread my design work over a period of time"
"I found it hard to remind myself to fill in the bubbles in timely intervals"
"It's very hard to interpret what's happening at a given point of time on my design timeline"
What we do
Include a pause feature while users are tracking. Allow users to resume projects.
Remind users in timely intervals to input the design activities they are engaging in.
Add colors to represent each design activity code to reduce the cognitive load on users
Information Architecture
Once we listed our design requirements, we created an Information Architecture to outline the high-level elements of the product.
04 Designing the solution
Rapid Prototyping & Quick Evaluation
Based on our information architecture, we used Figma to rapidly prototype what our application would look like. We then performed a Gurielle test with our prototype to check for usability issues.
Primary User Feedback
1. Users get confused about how they were supposed to access projects. There were too many options like recent, current and past projects presents
2. The project view tried displaying too much information in too little space, this made it confusing for users to get actionable information.
3. Lack of instructions and confirmation states made users find the 'building an activity scheme" option frustrating.
4. Options for users to compare their design-processes with those of higher qualities or to learn more about design awareness aren't accessible.
5. Since there is no navigation bar, users have to click on the back button multiple times to reach home.
Priorities For V2
1. Simplify the home page, remove redundant options, add information about design awareness.
2. Redesign the project view to reduce the cognitive load on users.
3. Add instructions and confirmation states to the 'build coding scheme' option.
4. Add appropriate navigation to allow users to switch between tasks easily
05 Refining the solution
V2 Changes
1. Home Redesign
2. Project View Redesign
3. Adding Instructions & Confirmation States
4. Navigation Options
The issue with traditional navigation options was that our architecture didn't have enough menu pages to assign to each of the navigation menu's options.
The solution was to implement a simple '2 Click Rule', in which users will be able to go home from any given page in 2 clicks or less
1
Click
2
Click
Home
V2 User Testing Feedback
1) Users found the timeline too small to thoroughly interpret it
2) The names 'Coding Scheme' and 'Activity Code' confused the users
3) Users often forgot what each of the activity codes meant while they were tracking their process
4) Users wanted to take notes about their design process while tracking
5) Users were confused about why they could export and delete multiple projects
6) The wording of the button 'Reflect on your design process' confused users
7) Users were confused about the difference between reflecting on their process and comparing their process
06 Iterating the solution
V3 Wireframes
1) Opening a past project and adding a note to it
2) Comparing the current project to a past project
3) Building an activity set
Usability Study
We created this survey to ask users to complete a number of tasks using our prototype and reflect on how each task went. There will be 3 main tasks, with smaller tasks included in each. The usability study survey was created using Google Forms.
v2 user testing feedback
The issue with traditional navigation options was that our architecture didn't have enough menu pages to assign to each of the navigation menu's options.
The solution was to implement a simple '2 Click Rule', in which users will be able to go home from any given page in 2 clicks or less
Ideation
priorities for the final version
In a typical design process, the information architecture is established before the wire-framing begins. However, as we had to receive the client’s go-signal for the design theme, I had to start by wire-framing various ideas.