Noteable

Fall 2022 Industry Project

Introduction

The Client

Noteable is a collaborative data notebook that enables data-driven teams to use and visualize data together. Its cloud-based and secure deployment options, no-code visualizations, and collaborative environment make it easy for teams to work with data in a single platform.

The Problem

As frequent users of Slack, Noteable is interested in integrating Noteable as a Slack application to provide their users with convenience and quick access to their notebooks without having to access the platform directly.

The Solution

We created a Noteable slack app that allows Noteable users to get rich insight into their workflows via a direct slack integration. This includes a Home, Message, and About Page, and various Slack commands.

• The Home Page provides users with an overview of their notebook statuses, such as current and recent active notebooks.
• The Message Page provides users with message notifications, such as when someone has made a new comment, mention, or shared a notebook with another user.
• The About Page gives a broad overview of what Noteable is and what the app can do.
• Finally, Slack commands allow the users to check on their notebook statuses from anywhere in Slack.

The Team

Timeframe

Oct — Nov 2022 | 6 weeks (1 week of onboarding and 5 weeks of design and development)

Tools

• Slack API
• Noteable API
• Magicbell API
• Git / GitHub
• Typescript / Javascript
• Figma / Figjam
• Slack Block Kit

The Project

Design

The design process involved Research, Block Kit Reviews, Information Architecture, User Flows, Low/Mid fidelity products, Usability Tests, and High fidelity products.

Research

We first began conducting a literature review on Noteable’s documentation to have a thorough understanding of the product. Then, we continued with competitor research by looking at existing slack apps and other competitors of Noteable. From here, we conducted research with an understanding that Noteable acts as an external service with the goal to sell to companies that don’t have as many data scientists, so our research needed to focus on making that process easier through our Slack app.

From our slack app competitors, we gathered data on the design standards of

• Pages (Home, Messages, About)
• Status displays (Doc updates, Shared files, Comments, Mentions)
• Message displays (Welcome, Notifications, Errors) </aside>

Slack apps researched include Google Drive, Figma, Air Table, Jira, & GitHub

After conducting research on Noteable’s competitors, we found that

Overall, all 3 competitors are extremely similar, basically identical to Noteable, having goals to make data visualizations easy and efficient for anyone of any skill level.

• Because most don’t have slack apps → Noteable’s Slack App should prioritize convenience and efficiency.
• As a result, competitive research should be focused on existing Slack Apps

Competitors researched include Observable HQ, Deepnote, & Hex

Information Architecture

We then used the data found from our research to form Noteable’s own information architecture, starting with actionable items present in our Slack app. All available actions were written out, then sorted and color-coded with Noteable executives to establish the information architecture and evaluate the priority and feasibility of each feature.

User Flow

With the features all grouped and sorted, we moved into creating a high-level user flow that will serve as our project roadmap for both designers and developers on the team.

Design System

Since Slack has an established design with the Slack Block Kit, we made sure our designs fitted within their guidelines while upholding Noteable’s design system in terms of their colors, logos, and visual standards.

Slack’s Block Kit ⬇️

Noteable’s Design ⬇️

Mid-Fidelity Wireframes

As we already had an existing design system, Slack’s Block Kit, we used our project roadmap to begin the development of mid-fidelity UI components for the Messages page. We began testing various UIs for the message commands and notifications as they were the highest priority of this app.

After creating the majority of message notifications needed, we compiled them to construct the screens of the Home and Messages page to visualize the components in the Slack environment.

Usability Testing

We conducted user tests on 2 of the developers at Noteable, Noel and Matt. From testing, we made adjustments to several components in our wording, color use, and some visual components. Some of our major findings include:

• /noteable recent — Status Display
  Originally, we designed the status to be displayed as a code block text to stand out to users, but were constrained to red text because of Slack’s UI. When we tested this, our users were evidently confused by the status display and we adjusted the design to regular text in a black color to minimize confusion but maintain the distinct appearance with all capital letters.
• Error Message — Wording
  This is the error message that is used when the user sends an invalid input into Slack. When tested, users were confused about what the notification was for, so we revised the design focusing on the wording choices uses to deliver effective communication.
• /noteable launch, /noteable interrupt — Functionality
  The biggest adjustment involved two of the Noteable commands, /noteable launch and interrupt. Our testers pointed out the previous design would be hard to launch specific project files because it would be a hassle for users to obtain the file ID to run the slack commands. Thus, we revised our design to focus on accessibility and ease of use to resolve those concerns.
  Some constraints we needed to keep in mind were that different projects contained different notebooks and that users can only interrupt an active notebook.

Below are visuals of the design revisions from usability testing (left = original, right = revised).

Hi-Fidelity Wireframes

The Home Page displays a summary of the user’s active and previously active notebooks

The Messages page offers app commands, such as active, recent, launch, interrupt, and help. Users will also receive notifications on any new comments, mentions, and status changes in notebooks. Error messages are also displayed when incorrect commands are used.

The About Page shows an overview of the Noteable extension and screenshots of our commands.

Development

The development process involved research, high-level breakdowns, advice from industry experts, debugging and review sessions, and implementation.

Research

We began development by researching all of the components that we would need to accomplish the goals to create the project. Reading through the Noteable and MagicBell API documentation, Slack App implementation instructions, and consulting with the senior developers at Noteable helped us gain a better understanding of the material and gave us an idea of what we could do.

Software Architecture

Our Slack app starts with the entry point which is installing and opening up the Slack app. If the user is on the Home Page tab, a listener event triggers, using Slack Block Kit to display relevant notebook information. When the user navigates to the Messages Page tab and types in a specific command, a listener would execute the appropriate action, communicate with the Noteable API, and display the results to the user. Buttons would perform a similar behavior as typed commands and would make calls to the Noteable API to retrieve the necessary information.

App Home

The App Home Page displays the user’s currently active and previously active notebooks.

• It achieves this by periodically checking and pulling the user’s active sessions and dynamically inserting them into a Slack Block Kit and displaying it in an instance. This constantly refreshes the notebook status if there are any changes.
• It sends a request to the Noteable API and retrieves all active notebook sessions where the response is parsed to extract the information needed to create a URL that links to the notebook and the name and status of the notebook.

Active Sessions Command

The /noteable active command displays the user’s current active notebooks

• Similar to how the statuses on the home tab function, this command sends a request to the Noteable API and only displays the active notebook sessions in a block kit.

Interrupt Command

The /noteable interrupt command stops the execution of any active notebook, by allowing a user to select the desired notebook and channel where they want the success message to send

• It stops the current running cell and blocks the kernel from running any remaining cells

Launch Command

The /noteable launch command opens up a dropdown menu that allows a user to select a project, a project-specific notebook, and a Slack channel to which they want the results of the command to be sent to.

• This sends a request to the Noteable API which launches the kernel of the particular notebook that was selected in the dropdown menu

Help Command

The /noteable help command displays a list of available commands that the user can run.

Invalid Command

The invalid command displays an error handling message that reminds the user of the commands that can be executed for the Slack app.

MagicBell Notifications

We used MagicBell API to receive notifications for the following actions:

• When a notebook has failed to launch
• When a notebook has successfully launched
• When there is a new comment mention in a shared notebook
• When there is a new comment in a shared notebook
• When a new notebook has been shared with the user

Challenges

• Slack’s UI & Technical Constraints:
  Since we were building an app on an existing platform, Slack, we had limitations to how creative we could be with the UI display (text color, font, format). Similarly, working with a client meant that the designs we created might not be implemented because of development constraints. Both of these translate to a compromise of our design choices with what was feasible.
• MagicBell Notifications:
  MagicBell has a Slack integration that is in beta. As a result, there is minimal documentation and support when it comes to customizing notifications that the user receives. The integration was done internally by the MagicBell team which meant that there was very little freedom for the team.
• Time Constraints:
  Having only 5-weeks to develop something that none of us has done before was a huge undertaking. We were forced to hand off certain features such as personalizing notifications, user authentication, and a few Slack commands to the client because we had prioritized other features to implement.

Takeaways

• Minimalism Can Be Effective:
  With the 5-week time constraint, we were forced to prioritize features and design efficiently, which helped us learn a lot of design hacks and relax our strict standards for undergoing the full design process. For instance, our designers utilized the 10 usability heuristics for UI to minimize the time needed for live user tests and learned it was sufficient to use only 1–2 user tests to continue the design process. Becoming proficient in auto-layout on Figma further speeded up the process and made minor revisions run much more smoothly.
• Utilize Agile Methodology:
  Our team followed agile practices to develop our product in an efficient and organized way. This helped keep our team focused on prioritizing important features and releasing a product that we are all proud of.
• Cross-functional Teams:
  One of our biggest takeaways was the experience that we gained from collaborating with designers, developers, and a project manager. This experience realistically replicates the real-world environment of working in a tech-focused field. Additionally, since our project required working closely with our client, this also accurately portrays how it is to work with industry partners to discuss collaborations and exchange knowledge.

Concluding Thoughts

We would love to thank CodeLab and Noteable for this amazing opportunity and experience. The 6 weeks passed by extremely fast, but we’ve gained so much in the short time period and are all proud of what we’ve accomplished. Thank you so much to Noteable for all your support, help, and guidance throughout this project!

💚 Special shoutout to Matthew Seal, Dave, Pierre, Kate, Diego, Eli, Kafonek, Kyle & Yage — this wouldn’t have been possible without you :)

11.28.22 — The Noteable Industry team at Final Presentations :)

Members from left to right: Calvin, Keith, Winnie, Jessica, Sophie, Samuel, and Divya