Timeframe
Apr - May 2020
Spotlight AI.
My Roles
UI/UX Design
Product Design
Tools
Figma
My Mission
What had been done before I joined:
Interview: founders had reached out potential clients and collected pain points and potential use cases
Concept: come up with features for the product such as role-based edit, quick redact, role management
Wireframes: wireframes for the product had been roughly sketched out by front-end developer
My Contribution:
To advocate for user experience and synthesize use cases
To come up with the entire user flow considering multiple use cases
To establish the design system
To flesh out the wireframe into hi-fi mockup and handoff to developer
Synthesize the use cases
Based on the use cases, I identified two high level key use cases and designed features based on them.
Information Architecture
I mapped out the IA map in order to show how users navigate with the functions. Product manager(Founder) worked with me to prioritize the feature.
Redefine Interactions
First, I audited the existing wireframes and dived into the current user journey to identify how can I improve the user experience. I was able to identify three main issues on Dashboard, Input dataset Info and Parse & Redact section.
Based on the insights, I looked at the current flow and ideated the solutions on them.
In "Overview" design a side panel to display the relevant info and make it easy for users to make further actions, such as editing access and adding an owner.
In the “Input Dataset Info,” a user can learn which secured information is in the template and customize it from the input section or side panel.
In the section “Parse and Redact”, indicate which information is redacted and allow previewing.
I mapped out how the new features fit in the existing user flow to provide a clear overview of the new user flow.
Develop a feature
The “Quick Secure” is a feature that I designed from scratch, and here are the requirements and my high-level solutions.
I came up with a low-fi wireframes for communicating the user flow and ideated the actual content.
Ideation for marker edit function
Prototyping
#1 Overview and quick edit
“I already uploaded the documents, but the manager suddenly asked me to open up the access for him“
— Users are able to quick edit the access to add role/individual to view the documents
Add dataset and share to the network
“I want to secure the dataset using the company’s pre-made template as well as my customize template to secure some additional attributes“
Error situation
I uploaded a dataset and applied the wrong template. No PII was detected. I would like to change the template applied to the document.
#2 Quick Secure
Upload a single file or text to redact information and share externally through email or other platform
Visual System
I established the visual system to help the product to be more consistent and easier to scale in the future.
Iterations
Side Panel
We were able to gather some insights from our potential customers by demoing the prototype and here are some iterations.
User Edit Function
Takeaway
Use cases and the scenario are the key to design a more holistic user experience. This is my first time to design a B2B product. Compared to B2C product, use cases and scenarios are harder to imagine or relate because those are tailored for people working in specific roles of a specific business domain. Although CEO described the features they are visioning, I think I need to learn more about the use cases and the scenario in order to design a more holistic user experience. It’s important to understand how users use this tool to design the function and how to link to the others. For example, how often the employees might edit the access, what kind of situation they will re-upload the file, and Do they allow to delete the file.
Take how back-end works into considerations as early as possible. During our meeting, I learned that we should detect the data based on a template which includes certain attributes instead of detecting every data in the document first. Besides that, company usually would like to create their pre-made template. With this in mind, they way I design the product also become a template based setting, instead of letting user to pick the attributes every time.