SmartBoard
Overview
COVID-19 has moved the collaborative design space online. Our team explored the opportunities to help design novices learn the design process seamlessly with developmental support in a workshop setting. As the UX Designer in the team, I was able to contribute the design system and structure the information architecture behind the design. I delivered the low fidelity wireframes and high fidelity prototypes for rapid iteration.
Role
Team
UX Designer
Project Manager: Stephen MacNeil
Designers: Avery Hom, Kendall Nakai
Developers: Ziheng Huang, Kenneth Chen
Tools
Figma, Miro, Adobe Photoshop, Adobe After Effects
July - September 2021
12 weeks internship
Duration
Problem Area
As the COVID-19 posed challenges to physical living space, online learning became a trend. The virtual space allowed us to access the data created from the design process that was stored in different software. Such design data included stakeholders, user personas, user flow, etc. However, there were rare technologies to democratize the data in effective use for design novices.
Design Challenges
End-To-End Design Process Service
Design process is often messy. 83% of interviewed users showed they need guidance in the beginning, yet most software failed to do that. The SmartBoard project aimed to create a an end-to-end design process service
Pioneer to Utilize Design Data
Rare research projects focus on the use of design data. Our team need to create our method to extract the data and shape it as an asset to the design process for novices
Solutions
From the Lab to the Wild
We launched the design process templates as a Miro plug-in and were able to present the final deliverables in the San Diego Design Week (SDDW) workshop. The workshop helped 50+ attendees with little design experience understand the whole design process hands-on and we hope to use the templates in future participatory design workshops.
Check out our live Miro board for SDDW workshop:
https://miro.com/app/board/o9J_lzfs0eM=/
Design System Templates
We created systematic templates for users to break down the design process step-by-step. We wanted the design novices to experience the full design process from problem framing to prototyping without losing their minds. The design system templates improves the users' discoverability and readability of different metrics, including user input boxes, instructions, and computational support sections.
Computational Supports
Our design team and dev team collaborated to create mappings that collected, labeled, and transformed data to readable visualizations for novices. These plug-in features with developmental support were called “Computational Support.” The computational supports help us identify the most challenging design stage from time spent data. Educational-wise, the usability of each computational support help shape the future design thinking curriculum.
Data Visualization
Collected stakeholders other teams brainstormed in the workshop which allowed users to explore and get inspired in the same problem area
Recommendation System
Collected stakeholder’s needs and obstacles then recommended a problem statement
Synchronous Collaboration
Incorporated synchronous collaboration between two groups to brainstorm and ideate their solution though pairing teams with similar problem areas
Thematic Color
To enhance the visual cue and make distinctive of computational support, we integrated thematic color background to prompt the users that these sections included data from other groups. The branding concepts increase the visibility of computational supports and users' autonomous to explore the functionality.
Accessibility Check
I used color palette to check for red-green blindness (most common blindness type) to increase accessibility. The result indicated red-green blindness perceived similar to people with normal vision of color
Research
Pilot Studies
Pilot studies helped us understand how users think aloud during their design process. We were able to understand instant feedback from the users. Below were the key pain points:
Low Usability of Complex Data Visualization
Design novices took a longer time to understand complex graphs, such as heat maps, thus resulting in skipping the data visualization
“I don’t know where to start reading the heat map. There was too much information.” — pilot study participant
Low Discoverability of Computational Supports
Users did not know whether the box was to input data or check other’s data since the input box and automatic section looked similar
Ideation
Repeated Iteration
As a new technology that is distinctive from existing design software on the market, our team shipped new versions of prototypes and received feedback from potential users on a weekly basis to ensure the computational support helped users achieve their goals — learning the design process
Usability Testing
Since we iterated our design frequently, usability testing came in the way to help us understand what features to keep and change.
Data Visualization
To increase the usability of the data visualization, we provided more context of the graph by specifying the source of the data and the purpose of adding the graph
Distinctive Computational Supports
To increase the discoverability of the computational support section, we added the branding concept of colored background to make distinction between computational support section and non-computational support section
Reflections
Communication is key. With rapid iteration, communication within the team and across the vertical hierarchy within the organization played a huge role. Staying on track with each team members’ newest work update allowed me to avoid going back and forth the design ideas we decided not to use.
Work under time constraint. When working under time constraint, some designs had to compromise with technical limitations and chose a design that require less development resources. As my first cross-functional team experience, I’ve learned how to distinguish the amount of development resources behind the design.