Solution at a Glance
Our team is really proud of this product promotion video.
Remember to turn on your volume for a full experience!
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 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.
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...
Me, after several design review meetings...
Every onboarding be like...
P.S. Great gif & product, Abstract!
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.
Before starting the research process, we listed out the key questions that need to be answered in the research phase.
Illustration credit: Undraw
Survey Responses and Interviewees
We have 6 major findings after affinity diagraming.
The feedback for different iterations are actually directly given through ticketing systems. A lot of the information here gets buried through time.
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.
These personal notes often lack contextual information, making the files harder to interpret later on.
A lot of the design decisions and feedback happen in meetings without a documentation trail, making the loop-in process difficult.
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.
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.
Based on our research findings, we discovered 5 design 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.
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:
After analyzing our competitors' relevant key screens, the main ideas we borrowed from these tools were:
Functional shortcomings that we would like to develop:
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.
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:
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.
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.
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.
Need to showcase the interactions/screen transition with a closer look? Shard's got your back!
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.
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!