Bite-size Summary

Our project aims to solve design team cooperation issues including information integration, design documentation, and design presentation.
We built Shard, a collaboration app for product teams, to efficiently communicate with stakeholders, document design rationales, track design changes, and manage/share files.

My Contribution

My role was focused on conducting user interviews and analysis; the UI design of Note, Journal, and the demo feature of Flow; and the video editing for the final product pitch.

Problem Space

LET'S FACE IT. As a designer, to efficiently integrate information, document design process, and present prototypes is always challenging, no matter how many design collaboration tools are out there...

messy notes

Me, after several design review meetings...

onboarding

Every onboarding be like...
P.S. Great gif & product, Abstract!

Project Goals

Our goal is to design a tool that can efficiently support integrating, documenting, and tracking information of design projects for UX design teams as projects iterate.

Key Research Questions

Before starting the research process, we listed out the key questions that need to be answered in the research phase.

colab

Cooperation

  • How do designers cooperate and communicate with other roles in a project?
  • How do designers hand over projects?
  • How do remote designers communicate with teams?
  • What are the obstacles during communication for project hand over?
  • What pain points regarding cooperation do designers encounter most frequently during the development process?
  • How does the onboarding process look like (e.g., interns, new designers, taking over a project)?
documentation

Documentation

  • How do designers document their design and research?
  • How do designers access existing documentation for the project?
  • What difficulties regarding documentation and accessing resources do designers encounter most frequently during the development process?
  • What kind of documents are involved in the design phase of a project? Are they shared or local?
tools

Tools

  • What communication and documentation tools do they use?
  • What parts of the existing tools are insufficient to support the communication / cooperation?

Illustration credit: Undraw

We further matched the questions with research methods that we thought could provide the best answer.

method

After collecting survey responses, we recruited designers and researchers at different levels of seniority to give us a complete picture of team cooperation.

Survey Responses and Interviewees

stats

Interview Data Analysis

method
method
method

Interview Findings

We have 6 major findings after affinity diagraming.

finding1

The feedback for different iterations are actually directly given through ticketing systems. A lot of the information here gets buried through time.

finding2

A lot of designers would keep meeting and feedback notes in personal notebooks. Often, these notes would only live within the lifespan of the project and get discarded after a project is done.

finding3

These personal notes often lack contextual information, making the files harder to interpret later on.

finding4

A lot of the design decisions and feedback happen in meetings without a documentation trail, making the loop-in process difficult.

finding5

After the project wraps up, its assets usually go in a shared drive, and become buried. Anyone looking for information later is more likely to hunt down one of the original project members. As a result, information tends to be forgotten or overlooked.

finding6

In the event a final documentation effort occurs, the process of gathering notes and artifacts from various digital and analog sources is very time-consuming.

Design Requirements

Based on our research findings, we discovered 5 design requirements.

requirements

Encourage users to put down information early in the design process.

Most users reported that it’s labor intensive to write documents to justify the design decisions retroactively. Our solution needs to encourage users to put down notes early on.

Provide guides/prompts to organize feedback on a regular basis.

The context of product design is usually iterative, and most designers forget to keep track of the design changes. The repercussion is that the task of generating documents becomes unmanageable in the end.

Streamline the process of transforming informal notes to formal documents.

The solution needs to reduce the time and effort that users need to put into final documentation.

Digitize notes gathered from review meetings.

We found that design teams do not digitize notes taken from meetings due to time and effort constraints.

Couple documentation with multi-media elements.

Text descriptions are usually time-consuming to generate, and they are not very useful in communicating interactions. Designers usually end up using screenshots or recordings to further specify the design elements and decisions.

Competitive Analysis

In order to have a better understanding of the existing products used by product design teams, we compared the products mentioned by our interview participants as well as other parallel tools with relevant features. We looked at their individual pros and cons, as well as sought opportunities to borrow ideas.
Below are the criteria we selected for competitive analysis:

  1. Note taking
  2. Integration of comments with design
  3. Integration with other communication & management tools
  4. Version control features
  5. Wireframing & prototyping support
competitors

After analyzing our competitors' relevant key screens, the main ideas we borrowed from these tools were:

  1. Using a timeline to present information/file versions
  2. Visually highlighting changes made on the design
  3. Compiling relevant design notes into one place

Functional shortcomings that we would like to develop:

  1. Supporting interaction and prototyping on hand-off & presentation tools
  2. Supporting efficient presentation of user flow

Big Picture Evaluation

We utilized an information flow chart to find out when and where information gets lost.

Information Flow Chart

We also identified touchpoints and brainstormed solutions via a user journey map.

User Journey Map

Business Considerations

Any great innovation without a market would eventually become a failure. A value proposition is helpful in terms of identifying the market needs, pain points, pain relievers, and delights.

Value Proposition

It's important to stay agile and decide on a starting MVP as a start. The key actions that we decided to focus on are as follows:

  1. Make documenting feedback easier so designers can better transform feedback or ideas into presentable design rationales.
  2. Make design progression more accessible to stakeholders.
  3. Provide a seamless and lossless way of showcasing design details and interactions without exporting them into flattened assets.
  4. A timeline for design iterations to keep designers, stakeholders, and future teammates informed of design changes and progression.
MVP

Finalized MVP Features

MVP

Lo-fi Prototype

Update information and design from other tools to the standalone platform, Shard, and collect feedback.

Keeping the above decisions in mind, we started doing wireframes and prototypes to demonstrate how we could integrate design tools and communication tools (e.g. Sketch and Slack) with our platform to support information integration, design presentation, and design documentation with features such as Note, Comment, Flow, and Journal.

Low-fi prototype

Iteration

We used our low-fi prototoype on guerrilla testing, and modified the key features as shown below:

Iteration 1
Iteration 2

Design Language

Before moving on to the high-fi prototype, we held a brainstorming discussion about branding and the image we hope to convey in our visual style.

shard_style1 shard_style2 shard_style3 shard_style4

Design Highlights

Flow - The Ability to Demo User Flows and Interactions

No need to write emails with screen shots or screen recordings and flow annotations. Shard incorporates voice recording, subtitles, and interactions so you only need to demo your design to stakeholders with one tool.

Flow - Design Iterations Visualized

New to the team? Need to onboard a new designer? No problem! Check design versions anytime on Shard so you or your teammates can see the iteration history. You can click on journal log to see each change as well.

Flow - Get a Closer Look at Your Interactions

Need to showcase the interactions/screen transition with a closer look? Shard's got your back!

Comment

Sometimes team members might need to provide feedback to a group of elements. Being able to draw a hotspot is more useful than commenting on an element in this case. Oftentimes, designers need to sift through feedback based on certain keywords. Being able to search comments via the search feature can be timesaving.

Note

Keep the design notes private to you, or publish them after the project wrap-up. Your notes can be very useful to other designers later on!