PRODUCT DESIGNER
How creative workers turns whiteboard ideas into presentation slides?
BoardX - Redesign presentation mode
This project was a 5-week project done during my UX internship for a SaaS start-up company, BoardX Inc. My responsibility was to work with the entire software team & PM to redesign the presentation mode.
UX Research
UI Design
Team
Hanzheng Lin, Intern
Weiqi Zhuang, Intern
Rachel Sun, Intern
Usam, Founder
Feiyang, Tech Lead
My contribution
User Research
Research synthesis
Feature suggestion
UI design
Result
Reached an overall 90%+ of stakeholder satisfaction rate of redesign feature showcase.
​
Practiced user interview & data synthesis skills to better empathize with target users.
- The original presentation feature of BoardX.
Background
BoardX is a cloud-based whiteboard SaaS platform, that provides an online collaboration workspace for creative workers to brainstorm, document, and sharing ideas.
Our sponsor wanted to develop presentation feature for this product because it meets the long-term business goal. The original idea from BoardX development team was to screenshot part of the whiteboard & collect them as slides.
Further more, BoardX's long-term goal is to develop an office eco-system that solve every aspect of a virtual office's need with a series of digital products.
During the project kick-off, we understand that BoardX is aiming to provide services for creators and designer. Therefore, a one-stop solution from brainstorming to storytelling becomes a business competitive in this product.
An office eco-system beyond a "Whiteboard"
Summary
3. Ideation
We broke down the user flow, listed out all the potential features and sketched out some of the ideas.
​
​
1. Research
We perform some heuristic test to identify potential usability issues. Also, we did competitive analysis to find the gap bewteen the product and the market.
2. Insights
By analyzing the research, we empathize with our user and identify the problems and design challenges.
4. Design Solution
We prioritized ideas and a final solution Figma file was delivered to the PM.
Research
- Screen shot of the competitive analysis from FIGJAM
We did competitive analysis to understand what are the key features of our competitors'. Also, we kindly ask 8 participants to perform Heuristic tests by asking them to create a presentation using BoardX's "screen capture" feature.
Understand the product by some heuristic testing & competitive analysis.
Insights
By going through the previous research reports, we found out that about 70% of the time, participants had trouble capturing a slide precisely of their intention. The rest of them either took some time to re-organize sticky notes before capturing, or choose to be organized while creating notes.
Screen capturing a slide is easy, but the results are not precise.
- A "Screen capture" demo of BoardX. In this case, user want to capture the notes in the red frame. When presenting, the neighbour notes are displayed in the slide and cause confusion.
Insights
The report also shows that, it is hard for listeners to follow when jumping from slide to slide. Because listeners don't know the presentation structure looks like. Also, user are having problem to distinguish the border of slides.
Hard for listener to follow
- BoardX' demo: jumping from slide to slide
_gif.gif)
Design Challenge
Problem
Users are unaware of organizing information when brainstorming, which cause building slides time consuming.
For most of the time, things on whiteboard are not perfectly align, so screen capturing might no be as precise as user expected.
Problem
Listener can not see the structure of the presentation.
Even if the lisenter followed the presenter during the presentation, it was hard for listeners to recall the strucutre of the slides afterwards.
How might we
Convert user's whiteboard ideas into slides, while reducing effort of re-organizing information and increasing listeners' engagement?
Ideation
- User Tasks (Up) & User Flow (Down)
After synthesising the feedback from our research and market analysis, we listed out user tasks categorize them. We prioritized those tasks, and narrowing down to several key features:
-
Apply slide templates
-
​​​​​​Categorize elements
-
​Slide border / Slide background
-
Presentation animation​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
User Tasks & User Flow
1. Pop-up Template Selection
We decided to use a pop-up template window as a solution to inform user of organizing whiteboard. By clicking outside of the window, user can skip the template selection, and they can always apply template later on.
Final design before hand-off to stakeholders.
2. Customizable Template
In the initial window, we allow user to do some quick setup of the template, to reduce initializing cost. While providing many hierarchical template, we also allow user to build their own template by leading them to the "presentation frame builder".
Based on our brainstorming result, I sketched out my vision for the feature and develop this user journey map. We double checked with project manager to ensure our ideas align with the business goal.
User Journey Map
By introducing pre-built whiteboard templates when creating a new file, user will be noticed about whether they want to present this whiteboard in the future or not. Using the template from the beginning helps reducing the chances of re-organizing notes when building presentation.
Suggest the user to start with a template
Design Solution
We provide user a template library on the left column, while we still keep the "Build my own" option to ensure user freedom.
User can also customize the appearance of their slides, to ensure boarder of each slides.
Our original idea was to fix the screen capture ratio for more precise . After discussing with the PM and engineers about technical feasibility, we changed our solution to adjustable slide indicator that only shows the content inside of it. We also design additional feature of slide-to-slide transition arrows.
Indicate the boundaries and relationship of the slides
Design Solution
Instead of brutally constrain the user of the screen capture ratio, the adjustable slide indicator map out the slide boundaries to prevent confusion.
_gif.gif)
Hi-Fidelity Prototype
We crafted our solution using Figma from sketch to Hi-fidelity prototype, while following the company's design system.
We splited up to design our own work, and came back to critique each other's solution. After that, we synthesis and prioritize features, and organize the user flow again to optimize user experience.
With the add-on template, user can always see the structured template as a background when adding elements into their whiteboard.
Display template when using whiteboard
Design Handoff
The lower transparency indicates that the template can not be edit during the normal whiteboard mode. Users have to enter the presentation editing mode to customize the structure of the tempalte.
When pressing on the slide button, the interface will swap to the slide editing mode. We create another tool box different than the whiteboard tool box, following the design system. Also, we prioritize the "Start" button of the presentation, because of its low visibility in the last version.
We allow user to edit & re-organize their presentation slides in a meaningful way.
Design Handoff
-
.png)
Retrospective
Lesson
Enhance Team Communication
Because of the remote working environment, exchanging thoughts and ideas through online conference could be exhausting, especially when the team is splitted in different time zone, working asynchronously. By establishing a work sheet with my PM, we were able to schedule every meeting and workload between project milestones, in a dynamic working environment.
Lesson
Live with uncertainty & Iterate fast
Instead of heading straight towards solution, we took a step back to review everyone's original ideas. Fortunately, we were able to identified different understanding of the project before we split up the work. We spent an entire afternoon and night prioritizing & integrating potential solution. Sometimes critique could be intense, but it made us think about the reasons behind the solutions.