Role
UX Researcher, UI Designer
Team
Kevin Sedayao
Client Project
Designing a platform for seamless document automation
Client
Gavel
Duration
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
Onepanel is an up and coming startup looking to expand within the machine learning field. Their focus is creating an extensible dev environment that fits the mold of current convention on the market. We worked with Onepanel to redesign their current IDE and improve machine learning and computer vision workflows.
Current Onepanel IDE
Problem Statement
Onepanel's machine learning and computer vision annotation tool environment is one of a kind within the machine learning community. Scientists and data analysts can perform photo annotation on one environment, then seamlessly switch to a workflow and train a model based off their work. Onepanel is the one stop shop for comprehensive and extensible model training and data annotation. Onepanel supports any application that runs Kubernetes, which is why it is so growing heavily on the machine learning market.
However, Onepanel runs into issues with screen crowding, cognitive load and oversimplification of processes due to a complex and divided UI. We teamed up with Onepanel to create an IDE that addresses these pain points. Therefore, Onepanel needs:
1) a way to monitor training pipeline performance while working in multiple environments so that ML scientists can decide how to allocate computational resources efficiently.
2) a way to see relationships between testing environments and data pipelines so that users can minimize time spent looking for information.
Business Goals
1
Brand Refresh:
Improve the functionality and look of UI elements to create cohesion
2
Workflow Integration:
Integrate workflows, workspaces and major task within one cohesive “panel.”
3
Expansion:
Build a community around the IDE. Focus on increasing GitHub and community engagement.
Team Design Process
As a team, we utilized the double diamond design process to articulate and derive solution benchmarks for our redesign. Highlighted in each of the 4 phases are methods and systematic tools we used to perform research, articulate insights, ideate on potential solutions, and test and implement our designs. While not all our methods are covered in this case study, these tools helped our team from problem statement to a deliverable solution.
User Interviews
To better understand our problem, we conducted a series of user interviews with our client Onepanel and data scientists within the machine learning community. The client kickoff meeting helped situate ourselves with the problem at hand. We caught a glimpse of what Onepanel does, success metrics, communication preferences, and extensive context into machine learning and how Onepanel aims to improve their IDE.
However, we still needed to perform extensive user research to understand the pain points machine learning scientists have with current IDE's, and more specifically with Onepanel's interface as well. The team led walkthroughs with 4 users experienced in machine learning and data analytics. We created a user script and contextual inquiry by evaluating users as they interacted with the Onepanel IDE. We then gathered insight based on their responses to certain tasks and a post inquiry interview.
Virtual Contextual Inquiry
Interview Insights
1
PERFORMANCE VISIBILITY
ML developers and scientists expect to see how their models and training pipelines are performing
2
FLEXIBILE WORKFLOWS
Devs want tools to adapt to their existing workflow, not adapt their workflow to the tool
3
COMMUNITY-DRIVEN
Machine Learning and AI are trending big time online, with lots of people eager to break in
Heuristic Evaluation
After performing a few rounds of user interviews and gaining important insight, we moved on to analyzing the current Onepanel IDE. As it stands, the team's internal developers and consistent users with the site are most familiar with the functions and main user tasks associated with the IDE. However for our team and new users, the current UI conventions added a layer of difficulty to the already niche process. Therefore, we performed a heuristic evaluation based on Nielsen's 10 Usability Heuristics to evaluate the current system. The most evident heuristic violated are described below.
Visibility of system status
- Unclear where the user is within the existing site
- Namespaces tab is not labeled in the same way as other global navigation elements
- Namespaces tab makes it look like user is on that page, conflicting with the bar under Workflows
Recognition rather than recall
- Critical workspace details are hidden beneath the fold, out of the user's sight
- Button's location in bottom right corner violates existing UI conventions, so the user doesn't expect for it to reveal key info
- Use of logo rather than clear text label makes the button's action ambiguous
Competitive Analysis
I conducted a competitive analysis to identify other machine learning businesses that either directly or indirectly compete with Onepanel. In particular, I wanted to identify their IDE's and determine what works well and what doesn't. The competitive analysis helped dictate some of the design patterns we later used in our redesign.
Comparative Analysis
I then conducted a comparative analysis to identify other IDE's. The main goal of the comparative analysis is to highlight certain features of development environments that make workflows more seamless. By doing so, we gleaned insight from these sources which served as inspiration for our own redesign. The comparative analysis research greatly benefited our team, as I identified positive and negative aspects of IDE's that focused on other niche areas of ML or acted as simple code editors for developers.
User Persona
After synthesizing our research on the current IDE market and becoming more acclimated with Onepanel's own IDE, we started to narrow in on our target user base. Therefore, we created a user persona which not only embodies our target user group but also addresses the pain points and user goals outlined through our research. The persona helped us develop our problem statement and a solution based framework going forward.
User Pain Points
1
Machine learning fails silently and time is wasted which can be costly
2
Jumping between multiple platforms and tools can be time consuming and confusing
3
Wants to see overall accuracy and loss function while a model is running
Solution Hypothesis
Interface Consolidation:
Consolidate interface to minimize tab flipping and reduce cognitive load
Flexible Workflow:
Enable users to do the same action multiple ways
Site Map
After ideating on potential solution benchmarks, I created a site map of the current Onepanel IDE. We used this site map to create the information architecture which informed our design framework going forward. By outlining pertinent pages, pop-ups, and modals specific to workflows and workspaces while detailing key user flows, we created an IDE with a structure consistent to our client's specifications.
Sketches
The team conducted a series of design studios based on our solution hypotheses to develop early iterations of the new IDE. We wanted to include components consistent with typical IDE convention such as a left rail nav, a large canvas to perform model training within, and multiple tabs to switch between workflows or workspaces simultaneously. We then came together collectively as a group and agreed on certain features, aspects and visual aesthetics that were carried over into our low-fi wireframes.
Low-Fi Wireframes V1
In Figma, the team wireframed our first iteration of designs based on the aforementioned sketches. I was responsible for redesigning the canvas area, where workspaces, workflows and files can be initiated within that space. We combined each of our delegated components and designs to form the whole cohesive IDE. Listed below are the first versions of our design before our preliminary design critique with Onepanel.
Low-Fi Wireframes V2
After passing the initial set of wireframes onto our client, we received feedback that helped align with Onepanel's vision for their IDE. Two of the main focuses were to redesign the dashboard so users can access it anytime during their work session and to remove the right panel accordion dropdowns during the workflow execution stage. The client also highlighted that the workflow and workspace model initialization be structured to fit a different form structure. We workshopped together to improve our designs based on the feedback.
Typography and Branding
Before we moved onto hi-fi wireframes, we first needed to consider typography and branding. I created a series of guidelines based on google's dark theme material design and Onepanel's existing branding.
Components
We took inspiration from Google's Material Design to help shape the visual structure of our components. By utilizing a dark mode UI, we needed to create aesthetic and visual consistency between buttons, forms, tabs and various other components. Listed below are a few of the reusable components used in the IDE redesign.
- Global Navigation Rail
- Buttons
- Tabs
- Snackbar Overlay
- Textfield Inputs
- Dropdown inputs
Final Wireframes
Anatomy of the IDE
1
Global Nav
We simplified the global navigation by replacing names with recognizable icons to reduce cognitive load. The four most distinguishable icons centered above the page fold link to the "Launchpad", Workflows, Workspaces and Files. If users select a link except Launchpad, the main panel will repopulate. If a user selects the Launchpad, an overlay will display over the canvas.
2
Main Panel
Within the main panel users initialize their ML workflows and workspaces or view their files. We wanted to streamline the workflow and workspace flow by giving users flexibility and control of their environment. For example, ML scientists watch their models train in the canvas space while initializing another model in the main panel. The panel can also minimize or extend based on user preference.
3
Work Canvas
Central to the Onepanel IDE is the work canvas. ML scientists perform important workflow and workspace tasks within the Work Canvas. Here, users can build and train models, process data while also performing image annotation or running a Jupyterlab notebook. The possibilities are endless, as we wanted to design the work canvas geared towards a flexible setup.
4
Tab Bar
The tab bar consists of 3 main actions: Duplicate Tab, Add New Canvas (Column or Row) and Canvas settings. Through the tab bar, users can customize their work canvas to their own liking. It also displays the status of the current running workflow or workspace model.
5
Right Rail
The right navigation rail displays detailed information on a model's status and build. We wanted to remove the accordion dropdown and give this navigation a distinct look. Once a user select a rail item, the right panel slides into view. To add flexibility, the right rail can be dragged left and right or minimized depending on user preference.
Workflows
Workflows allow you the ability to execute and run models. At first glance, you can view the status of previously ran or currently running workflows. If you want to execute a workflow, simply click 'Execute Workflow' to start initializing parameters. Onepanel allows users to select a variety of templates or you can create one from scratch. To do so, simply click 'Templates' within the main panel to view or edit. Once a model is initialized and executed, the work canvas will populate and start to run.
Workspaces
Similar to Workflows, Workspaces allow you to execute an external environment within the the IDE as long as its running Kubernetes. In this example, you can launch CVAT to perform image annotation once you initialize your workspace. Once the workspace is initialized and ran, it will launch within the canvas space.
Add a New Canvas
The tab bar grants flexibility to a user by customizing workflows and workspaces to their liking. If a user wants to view multiple screens at a time, they can either duplicate a tab or split the canvas space by columns or rows. A new tab bar will display within the new canvas. The opportunities are near endless with the amount of canvas spaces you can create, allowing flexible workflows and workspaces.
Usability Test Plan
Once we concluded our final iteration of prototyping, we moved onto user testing. Given the time constraint and having 1 day to test, we were unable to comprehensively test with the Onepanel team or any ML scientists. However, after tapping into our network we successfully tested with 10 users who provided helpful insights and recommendations. Listed below is the usability test plan I created that aided us during the testing phase.
1
Create usability tests with the platform Useberry. The test includes 7 user tasks, open analytics, and a questionnaire.
2
Send tests to users specialized in software dev or ML. Gather feedback and results to help iterate on designs.
3
Compile system usability score (SUS) to determine usability. Repeat testing plan until SUS scores reach over 80 threshold or client decides to push for development.
Results and Metrics
After creating our usability testing plan, we gave users roughly 24 hours to complete the test. I compiled the test results by creating a bar graph detailing percentage of users who successfully or unsuccessfully completed a certain amount of user tasks. 30% of the users completed at least 4 of the 7 tasks while 60% skipped at least one. Along with the recommendations and insights, this graph helped me address certain issues with the test and prototype. I improved the wording of certain user tasks and addressed the difficulty of key user flows within the prototype.
Usability Test Completion Rates
I also created a Likert scale where users rated their experiences on a scale from 1-10. I then compiled their individual responses and aggregated their scores to create a system usability score (SUS) which defines the overall usability of the Onepanel IDE. The SUS score based on our first round of testing was a 61.3/100. Below shows 3 pie charts highlighting user's opinions and experiences of the IDE along. The pie charts below show users majority of users found the IDE was well integrated, were confident using it, and had little trouble adjusting to the new interface. The scores also showed there's massive room for improvement as well. Our goal is to perform design iterations based on feedback, retest with more users, and then lastly improve the SUS scores based on future test results until our client is more than satisfied.
Likert Scale Pie Charts
Really impressed with you guys. You essentially nailed what we envisioned with the look and feel of a modern IDE. You should be proud of what you accomplished with this sprint. I'll make to sure to include your work on our open-source for future use!
Rush Tehrani
Onepanel CEO
Next Steps
1
More testing with ML Scientists, Data Scientists and Developers for further refinement.
2
Adding hover icons to assist the user quickly could potentially reduce the need for help.
3
Conduct marketing research to gain insight into possible ways to help build community around the product.
Reflection
Considering the depth and complexity of the problem we had to solve, this project is my most challenging to date. I am incredibly proud of the work my team and I produced during a 2.5 week sprint. Coming into the project, I had little to no knowledge with machine learning, computer vision annotation, or IDE's for that matter. It took an extensive amount of time for us to become acclimated with our domain research and the issues with Onepanel's current IDE. However, we managed to deliver a complex and niche product that our client really enjoyed, which was really cool!
This project helped improve my communication skills talking with clients through Slack and video conferencing. Understanding the client's needs and goals while providing recommendations and insights was a considerably new endeavor for me. I better learned to articulate design decisions and take criticism and feedback in a constructive way. This project also helped improve my design skills in Figma as we created over 100 wireframes ready for handoff. I was super happy with the end result because I created a unique IDE environment that was new to the ML sphere, which is an exponentially growing field. Through this project, I discovered my passion and natural liking for visual design and identified areas of growth as well which I’m more than happy to work on as I progress through my UX Design career!
.png)
Case Study
Designing a platform for seamless document automation
Role
UX Researcher, Lead UI Designer
Client
Gavel
Duration
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
The main goal of this mock project is to redesign WGSR's existing website and improve its overall digital experience from a functional and aesthetic viewpoint across mobile and desktop platforms.
Problem Statement
In order to better focus on their core mission, which is giving beloved dogs a safe home, WGSR needs a way to improve their website's look and feel so prospective adopters can fall in love with these dogs. The website is in need of a branding refresh and a simplification of its core features: the ability to Adopt and Donate.
Since WGSR is a nonprofit, the organization is sustained by donations. To continue their loving care and efforts for placement, they need donations to be encouraged and easily given in a clean and inviting way.
Product Design Goals
1
2
3
4
Target user-focused design which motivates prospective owners to adopt
Reduce the bounce rate for important user cases and scenarios
Achieve rebrand that aligns with WGSR's core values and mission statement
Create a mobile first, responsive prototype based on user research and iterative design
User Research
I conducted a series of interviews surveying a variety of users. Thetarget research group consisted of current owners who have adopted dogs through shelters before. The goals are :
1) To understand the thoughts and opinions users had with the current WGSR website experience
2) Their past adoption experiences specifically with other adoption websites
3) What motivates users to adopt a dog or donate to an adoption shelter
Initial Evaluation
I conducted a heuristic evaluation on the current website using Nielsen's Heuristics for User Interface Design. I then developed 45 categories of usability criteria and evaluated the number of times each heuristic was violated within each category.
Usability Test
I then performed a usability test rating each category on a 1-5 scale (from very poor to excellent). Each category carried a weighted ratio which determined the usability score.
Understanding the Landscape
As a team we performed external research to understand similar dog and pet adoption sites' user experience. I compared each of these apps to determine pain points and common functions to create a solution benchmark.
Competitive Analysis
I performed audits on various applications to assess various features and observed their flow to create a solution based framework.
Research Takeaways
1
2
3
Less adoption transactions due to faulty UI issues
High bounce rate especially with form application process
Lack of visual consistency and brand identity
4
5
6
Low usability score of 56/100
Key focus on top 2 heuristics violated
Features from similar apps will help influence redesign
Solution Benchmarks
Insight:
Users feel lost during the adoption process. The forms are too long and the copy is written in a way that scares users into dropping off.
Solution:
Split the form into segments categorized by section titles and display user progress.
Insight:
The way dogs are displayed is inconsistent and difficult to filter based on certain traits.
Solution:
Organize the dogs into column view and increase the number of options per column. Create a search filter to display select dogs.
Insight:
Lack of transparency and nonintuitive donation process. High bounce rate since Paypal is only option.
Solution:
Add a 'quick donation' overlay so users can quickly submit. Create a donation info page for added transparency.
Insight:
Users feel overwhelmed by the vast number of dogs the shelther has to offer
Solution:
Introduce a "Find my Match" survey pairing prospective owners with current selection of dogs.
User Flow Revamp
Two new users flows, Adopt and Donate, are outlined below. I wanted to emphasize the different ways users can access the adoption and donation forms by simplifying the interactions. These two new user flows helped determine the skeletal structure of the site's contents by first mapping out the site's most important functions.
Adopt
Donate
Low-Fi Wireframes
Once I finished creating the user flows and establishing the site's information architecture, we conducted iterative design studio sessions that started from sketching -> low-fi wireframes -> high-fi wireframes -> mobile and desktop responsive prototype.
Shown below are low-fi wireframes detailing key features and flows emphasized as part of the redesign:
Branding Refresh
To distinguish WGSR as a welcoming and inviting adoption shelter, I conducted a branding refresh. I introduced a warm color palette that is easy on the eyes and pairs well with white space. As for the new typeface, I picked two Sans Serif fonts - Avenir and Futura which gave the site a smooth and consistent feel.
The Redesign
Browse Dogs
I simplified the browsing experience by adding an Adopt CTA at first glance on the homepage and further down as the user scrolls. Users can also select the hamburger menu and select browse from the adopt subsection. I organized the dogs in a 2 column view that gives the search a consistent feel. I displayed dogs showing their name, age, and gender. Now, users can also click the Filter CTA to narrow their search based on preferences.
We redesigned the puppy profile to display all relevant information about a particular dog in a palatable way.
Adoption Forms
I redesigned the adoption forms to increase the user transaction rate and minimize user frustration. Since the adoption form is long and thorough, it's broken down into 4 sections. A progress bar displays where in the process they're at and how many more sections are left. Tooltips help guide the users and address important questions that may need more clarification. Unless noted otherwise, all questions are required but an "optional" header next to certain questions distinguishes the two.
Users save their progress by selecting the Save for Later CTA. Once they submit their applications, users view them in their dashboard.
Donate
I wanted to emphasize the importance of donations with the redesign. Now, people donate by either selecting the Donate CTA on the homepage and hero image or selecting the subsection within the hamburger menu. Once the Donate CTA is selected, an overlay pops up allowing a quick donation transaction. The donation form starts with a donation amount selector. After entering a donation amount and selecting a donation type (one time or monthly) users then enter the billing info. Once the donation is submitted, people can see what their donations go towards.
Find My Match
The Find My Match survey pairs prospective adopters and curious browsers with a range of dogs based on preferences. The survey asks users a variety of behavioral, habitual and personality traits then pairs them with a range of dogs that best fits them. Once the survey is complete, a list of dogs categorized by percentage match are recommended to the user.
Desktop Responsive
Testing the Redesign
To test the functionality and effectiveness of redesign, the team recruited 15 potential users to test use case scenarios through the automated testing platform Useberry. I created 4 user flow tasks (Adopt, Login to Acccount, Donate, and Find My Match). We determined the success or fail rate depending on if users reached the final screen for each task or not. We then collected their test results, feedback, suggestions to help improve the mobile and desktop designs.
Success metrics per user task
Full task completion rates per all 15 users
Based on the 1st round of testing, around 55% of users skipped at least 1 task while 30% completed all 4 tasks without fail. I later realized the final screen for Task 3 was misleading for people, so many skipped out of frustration. The success rate for the donate task was considerably low around 58%. I attributed this to scrolling issues with the prototype for some users, which I corrected.
Upon completion of the test, users filled out an optional questionnaire using a Likert scale. This scale ranged from 1-5 (strongly disagree to strongly agree). The questionnaire asked users to rate their experience by either agreeing or disagreeing with 10 statements where 3 of them are highlighted here. A high percentage of users agreed or strongly agreed that their experience was positive, which helped us flesh out our prototypes before client handoff. I also aggregated the likert scale data to create a second usability score. The proposed redesign's system usability score resulted in average of 80.35.
Key Insights + Takeaways
1
2
3
4
Positive Likert scale scores reaffirmed design decisions
A second usability score of 80.35/100 signified a massive improvement
Rebrand helps establish WGSR as a trusted and inviting adoption website
Users felt more inclined to adopt dogs after redesign
Future Focuses
1
2
3
4
Iterate further on desktop designs
Focus usability efforts on LA locals & previous site WGSR adopter
Meet with WGSR staff to re-align business goals with site design
Address stretch goals like volunteering and accessibility audit
Reflection
Since this was a mock project and a redesign concept, the team never had the opportunity to present our findings to the WGSR staff. Sad! As unfortunate as it is, I grew massively within the 12 day sprint. My UX research skills developed immensely as I investigated the core issues users had with the website. Additionally my UI skills grew tremendously too, as I led the mobile prototyping and advised on the desktop responsive design. I felt incredibly proud of the work, and am looking forward to the next project that awaits me!
Concept Design
Designing a platform for seamless document automation
Role
UX Researcher, UI Designer
Client
Gavel
Duration
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
A Fresh Perspective
The emergence of mobile grocery shopping has skyrocketed over the last few years. In 2018, online grocery shopping crossed $17.5 billion worth of grocery sales in the U.S. By late 2021, online grocery sales are expected to exceed $30 billion. Grocery apps are starting to become a trend - rapid and addictive. Like most apps, there's a need for business to adapt to current market trends.
With an ever-growing market centered around customer preferences and a personable shopping experience, grocery apps have failed to stay ahead of the curve. Imagine a shopper who's grocery options are restricted by their veganism and dietary preferences. Their browsing experience can be frustrating because the search model assumes otherwise.
Garden Fresh was designed to solve this very issue, focusing on accessibility and transparency for the health conscious shopper.
Getting Started
Let's get started by knowing your delivery address and preferred store. Nothing fancy here!
What's In My Cart?
Ah, now we're talkin'! Shoppers can select a variety of shopping preferences based on their preferences. By indicating their consumer and dietary habits, certain groceries will be recommended and readily available to shoppers upon browsing.
An Organic Shopping List
After identifying shopping habits and preferences, it's time to buy some groceries! Shoppers can then select groceries recommended to them by Garden Fresh, catered to their personalized shopping list. They can also see where their groceries are sourced from, adding transparency to the experience.
Concept Design
Designing a platform for seamless document automation
Role
UX Researcher, UI Designer
Client
Gavel
Duration
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
Less Stress, More Success
Given the pandemic and current state of the world, essential services such as grocery and food deliveries have seen a rise in demand. Consumers are more than happy to use contactless pickup and delivery apps like Uber Eats, Postmates, Instacart, and Eaze which make their lives much easier and certain services more accessible. Apps such as ByNext, Rinse, and Washio are laundry and dry cleaning apps geared towards the same service. Yup, you guessed it. Laundry! The differences between each are minuscule but there are few apps that target a consumer base desperate (at times) for a premium laundry and dry cleaning service. That target base is university students.
Swashed's mantra is, "Less Stress, More Success". Given their time dedicated to academics, extra-curricular activities, and personal responsibilities, students hardly have a chance to breath. This extends to maintaining personal hygiene with keeping their clothes and sheets clean. Some students enter college without knowing how to do laundry either! Swashed solves university student's pain points. Universities partner with Swashed to provide a discounted, premium laundry and delivery service to their services. All students have to do is download the app, find a partnered laundromat near them, specify the amount of laundry bags, type of cleaning service, payment details, then voila! Swashed does the rest. A courier will pick up the laundry for cleaning and will return in a timely manner. Students can check up on the status of their orders as well.
Browse Local Laundromats
There are two ways students can browse local laundromats on the Swashed app. The first way involves selecting a laundromat on the map by tapping on a location. The map will zoom onto that location and gives a detailed preview of that laundromat. The second way involves dragging the search bar into view. From there, they can search for a laundromat of their choice. Students can also filter their search based on certain criteria.
Place an Order
Ah, now we're talkin'! Shoppers can select a variety of shopping preferences based on their preferences. By indicating their consumer and dietary habits, certain groceries will be recommended and readily available to shoppers upon browsing.
Confirm Order
After identifying shopping habits and preferences, it's time to buy some groceries! Shoppers can then select groceries recommended to them by Garden Fresh, catered to their personalized shopping list. They can also see where their groceries are sourced from, adding transparency to the experience.
View Prototype
Product Design
Designing a platform for seamless document automation
Role
Product Designer, UX Strategist
Skills
Client
Gavel
Date & Time
8 weeks (ongoing)
As the sole product designer and founding member of the Strategy AI project at DEPT Digital Products US, I spearheaded the design and development of an AI tool aimed at enhancing the capabilities of product strategists within our organization. DEPT is a full-service digital design agency offering a broad range of engineering, marketing and creative services. While working at DEPT as a product designer, I helped Strategy AI evolve into a comprehensive end-to-end platform designed to facilitate client interactions, streamline strategy development, and generate actionable insights. Through rigorous research, iterative design processes, and collaboration with cross-functional teams, I played a pivotal role in transforming the initial concept into a robust product with the potential for widespread adoption.
Official DEPT Article Here
Context
Pioneering AI with product strategy
The genesis of the Strategy AI project stemmed from a collective desire to harness AI technology to augment the capabilities of product strategists and streamline client-facing activities within DEPT Digital Products US. Recognizing the opportunity to pioneer AI integration in product strategy, I was enlisted to lead the design efforts due to my alignment with stakeholder objectives and expertise in the domain. The project commenced in the summer of 2023, initially as a passion project before gaining traction and evolving into a dedicated endeavor with engineering and product management support. With a focus on enhancing client relations, the aim was to develop a tool that provided tailored recommendations and facilitated strategic conversations.
Problem
Addressing quality and speed of client facing strategy work
The main challenge was to develop a solution that could seamlessly incorporate AI technology into the workflow of product strategists, while also addressing the specific needs and business objectives of clients. The team identified gap in quality and efficiency regarding client facing strategy work. Extraneous periods of time was spent on client discussions and workshops about ways to solve a problem or plan a project timeline without the proper details and context about bout the project ironed out beforehand. Essentially, we wanted to spend lest time talking about the work and more time doing the work. Strategy AI aims to solve that problem.
The initial versions of the tool were complicated and unclear, which made it difficult for users to adopt and use effectively. Additionally, there were very few AI tools in the market that were tailored specifically for product strategy, so we had to do thorough research and innovation to fill this gap successfully. Some of the primary concerns included cognitive overload, inefficient workflow management, and the necessity for personalized, context-driven recommendations that could enhance client engagement.
Version 1
MVP
Left to right: First working model (pre-engagement) to MVP (post-engagement)
Approach
Mapping out key decisions
To address these challenges, I embarked on a multifaceted approach encompassing research, iterative design, and collaboration with cross-functional teams. Leveraging the Jobs to Be Done framework, I conducted extensive analysis to identify user needs, pain points, and desired outcomes. I then outlined a user flow mapping out the happy path, from project creation to generated results. When mapping out the user's journey and features to prioritize, I focused on streamlining the way inputs and results can quickly be generated and interpreted. This informed the redesign of Strategy AI from scratch, with a focus on simplifying the user interface, optimizing workflow management, and integrating contextual prompts powered by ChatGPT technology. The new design featured a streamlined hierarchy, with context blocks on the left and generated results on the right, facilitating a seamless call-and-response system. Additionally, I developed a workflow builder with GPT prompting capabilities, enabling continuous model training based on user feedback and outcomes.
Project Goals
Reimagination of how a strategist works
After conducting research and collaborating with the lead strategist and engineers, we have identified the most important requirements for the project's success. The focus of Phase One is enabling strategists to better organize all things related to their client or project in a streamlined and efficient manner and in one place. Strategists will have the ability to request help on achieving goals and reaching specific outcomes. This is where AI comes into play, specifically interpreting the goals and context to build a better strategy to achieve them.
To simplify the workflow of the strategist while significantly reducing cognitive load, we aim to avoid screen clutter by indicating why certain actions matter, such as inputting context blocks, and not just interpreting the results. We have also added basic AI writing functionality that is tied to the results. This will enable the model to be trained over time based on the user's rating of the generated results.
The project's significant value lies in maximizing our found limitation with GPT 3.5 and our proposed solution. However, the greatest perceived value lies not only in the generated results, but also in how well they are interpreted by the user.
Design Outcomes
Streamlined workflow, empowered strategists
The redesign efforts yielded significant improvements in usability, efficiency, and effectiveness. The revamped Strategy AI platform provided product strategists with intuitive access to tailored recommendations and actionable insights, enhancing their ability to engage clients and drive strategic initiatives. By integrating AI technology with user-centric design principles, we created a cohesive platform that streamlined workflow management, reduced cognitive load, and empowered users to make informed decisions. The inclusion of artifact generation further enriched the user experience, allowing for the creation of personalized documents to share with clients.
Context Builder
Business goals and outcomes
Long term and overarching goals help the model determine the best approach and strategy to success
Project context blocks
Additional details about the project such as industry, target audience or challenges allows for a more detailed and tailored AI generated strategy
Flexible views
List and grid views provide flexible ways to organize and add context blocks
AI Generated Recommendations
Large scale initiatives
Results are organized by key initiatives. These are comprehensive, long term plans that target desired goals or outcomes.
Artifact generation
Users can generate and export artifacts and documents for each activity. For example, Strategy AI can generate a document of user interview questions for an activity called "User Feedback."
Supporting activities
Each initiative contains supporting activities. These are actionable, short term efforts recommended to be done with a client or internally.
Results
Commitment to AI-powered strategy
The rollout of Strategy AI garnered positive feedback from stakeholders and upper management, culminating in its presentation at an AI Summit in Amsterdam. The platform's success as a pilot program paved the way for future adoption within DEPT Digital Products US, with plans for company-wide expansion and potential white-labeling for external markets. By introducing AI to product strategy workflows, we positioned DEPT as a leader in the field while enhancing client relations and driving innovation within the organization. The project's ongoing success of the project underscores its transformative impact on strategic decision-making and client engagement.
Reflection
Transformative impact in an innovative field
My involvement in the Strategy AI project was a rewarding journey that enabled me to pioneer new approaches to product design and innovation. From the initial concept to its realization as a scalable platform, I gained invaluable experience in AI integration, cross-functional collaboration, and user-centered design principles. The project not only expanded my skill set but also allowed me to mentor fellow designers and strategists, fostering a culture of continuous learning and growth within the organization. As I transition from DEPT, I take pride in the lasting impact of Strategy AI and look forward to seeing its continued success as it evolves and scales across the organization.
Product Design
Designing a platform for seamless document automation
Role
Product Designer, UX Strategist
Skills
Client
Gavel
Date & Time
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
Full Case Study Coming Soon!
Product Design
Designing a platform for seamless document automation
Role
Product Designer, UX Strategist
Skills
Client
Gavel
Date & Time
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
Full Case Study Coming Soon!
Product Design
Designing a platform for seamless document automation
Role
Product Designer, UX Strategist
Skills
Client
Gavel
Date & Time
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
Full Case Study Coming Soon!
Product Design
Designing a platform for seamless document automation
Role
Product Designer
Skills
Client
Gavel
Date & Time
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
Background
Bringing the luxury of personal styling to a wider audience
Otherling is a personal styling company that aims to combine the empathy of an in-person experience with the intelligence of technology to offer a rich yet efficient way to explore personal aesthetic, build a wardrobe and take ownership of ones personal style.
Otherling sought to differentiate itself from competitors like Stitch Fix and Mada by offering a personal styling experience that resonated with fashion-forward and trendy clients. They approached our team at DEPT to help build their first MVP . Our task was to push the boundaries and develop a new end-to-end product that aligned with Otherling's vision of authenticity and fun in personal styling.
Problem
Staying faithful to the fashionable youth market
Existing personal styling products in the market lack the character and niche appeal, especially among younger users. Otherling sought to redefine their creative direction and personal styling experience from the ground up by embracing the modern fashion trends, personalities and interests defined by the younger generation.
The early implementation of the client facing and internal platform suffered from lack of consistent user oriented design principles. The internal styling portal used by Otherling stylists was broken and confusing, hindering their efficiency in building outfits for clients.
Creative Direction
Rooted in discovery and curiosity
Our team aimed to deliver an experience beyond a flat series of curated outfits. We explored ways to not only build your wardrobe but for the clothes to grow with each client through their own personal aesthetic and creative pursuits. True to their brand guidelines and tone of voice, Otherling targets the “Curious Aesthete” or someone who is fashion-curious or fashion-fluent with complementary interests in other artistic or cultural fields. We conducted workshops to define the interests, values, and wants for this user base. Through moodboarding and collaboration, I created a visual foundation as shown below. I took influence from warm Mediterranean environments, vintage magazines, mid-century furniture, 35mm film, and earth-tone colors. With this project, I wanted to emphasize how a client’s outfit is influenced by their environment, and vice versa.
Visual Brand Identity Excercise
Approach
1)Preparation: To tackle the challenge of redesigning Otherling's personal styling experience, I immersed myself in understanding the company and the market by reviewing Otherling’s brand book and analyzing competitors like Stitch Fix, Wisi, and Mada. Additionally, I researched current trends in fashion and digital styling tools to ensure our solutions would be relevant and appealing to fashion-forward users.
2)Planning: I collaborated with our lead designer and strategist to outline a roadmap for the 4-week design sprint, establishing key milestones and deliverables for each week. Our plan emphasized iterative design, allowing for continuous feedback and refinement. Regular check-ins with the Otherling team ensured alignment with their vision and expectations.
3)Questions: To guide our design process, I asked critical questions such as what aspects of the current experience frustrate clients and stylists, how to make the styling process more interactive, and what unique features could differentiate Otherling. Additionally, I inquired about streamlining the stylist workflow and incorporating elements of realism, playfulness, and “undoneness.”
4)Exploration: We conducted user interviews and surveys to gain insights into client and stylist needs and pain points. Inspired by fashion magazines, digital styling tools, and interactive interfaces, we created mood boards and sketches to visualize potential design directions.
Overarching Goals
To reiterate, the primary goal of our collaboration with Otherling was to establish them as a key player in the personal styling space by reimagining their entire styling experience. Specific objectives included:
1) Redesign the Client-Facing Interface: Develop an interactive and aesthetically pleasing platform where clients can explore and manipulate recommended outfits in dynamic environments, reflecting Otherling's chic, raw, and "undone" brand identity.
2) Revamp the Stylist Portal: Create a more intuitive and efficient workspace for stylists to build and manage client outfits. This included introducing a flexible interface with drag-and-drop functionality and easy access to inventory, enhancing the overall stylist experience.
3) Differentiate Otherling from Competitors: Ensure that the new MVP captured Otherling's unique character and niche appeal, setting them apart from other personal styling services like Stitch Fix, Wisi, and Mada, particularly among younger, fashion-forward users.
4) Align with Otherling's Brand Vision: Stay true to Otherling's brand book and founder's vision by incorporating elements of realism, playfulness, and authenticity into the design, making clients feel their best and most authentic selves.
5) Secure Ongoing Collaboration: Deliver high-quality prototypes that would impress the Otherling team and secure a contract extension for continued work, including the full development of the product with engineers.
Early Explorations - Outfit Delivery
After collaborating with the Otherling team on creative direction, I pushed the boundaries of how personalized outfits were presented to a client. The stakeholder wanted a "raw" and "undone" feel, so I created layouts reflecting that sentiment. The images show a small sample of those explorations. Clothes are cut from their original backgrounds and loosely scattered within a frame. I aimed to provide the client with flexibility by adding "Space" and "Grid" views. The Space view allows for background changes and a visual landscape for the clothes. The Otherling team also appreciated the literal use of a clothing rod, enabling outfits to visually scroll as if seen in person.
Challenges
Overcoming creative hurdles and differences
Throughout the project, we faced several significant challenges. One of the primary hurdles was convincing team members to embrace the design direction I proposed, which emphasized interactivity and a dynamic presentation of outfits. This required diligence and persistent advocacy to ensure the ideas that resonated with the client were implemented.
Another challenge was managing scope creep and the temptation to add too many features. We had to balance presenting innovative "blue sky" ideas with the practicality of staying within project constraints. Additionally, working with the Otherling team's brand designer sometimes led to differing opinions on aesthetics and visual motifs, requiring effective communication and compromise to align our visions.
Lastly, given the tight 4-week deadline, I had to constantly switch priorities and contexts. After delving deep into explorations around the client-facing lookbooks, I then focused design efforts on building the internal portal for stylists. This was a challenging endeavor given the inability to test design hypotheses and early iterations as I had to solution quickly. Despite these challenges, we successfully navigated the project, delivering prototypes that impressed the Otherling team and led to ongoing collaboration.
Design Hypothesis
We designed an interactive personal styling experience that reflects Otherling’s chic, raw, and "undone" brand identity. The client-facing interface allows users to manipulate recommended outfits in dynamic environments, enhancing engagement and personalization. For the stylist portal, we created an intuitive workspace with flexible views to streamline outfit creation and inventory management. This will allow stylists to build their client’s outfits much more quickly and efficiently.
Success can be measured through several key metrics: user engagement rates, user satisfaction scores, the efficiency of stylists in creating outfits, and overall adoption rates of the new system by both clients and stylists. Additionally, positive feedback from clients and stylists, as well as asserting Otherling as a new player in the online personal styling market, will further validate the effectiveness of the design.
Design Outcomes
Curated and Personalized Lookbooks
Before clients receive their lookbooks, they first take a quiz detailing their preferences. This quiz takes into account factors such as sizing, measurements, price range, seasons, and number of requested outfits. Otherling's stylists then review their client's responses through the platform's internal stylist portal before carefully building an outfit. Once finalized, stylists send the outfits through a personalized lookbook.
The client-facing lookbook allows users to browse through carefully curated outfits displayed on a clothing rod. Within each outfit, clients can see how the individual pieces fit together. Clicking on an item brings up a full-screen overview that includes item details, personal styling tips, and links to third-party sites for purchasing. The team chose this design due to technical and time constraints. My initial brand vision and contributions played a significant role in shaping the minimum viable product (MVP), as it required a team-wide effort to finalize this design.
Internal Stylist Portal
The internal stylist portal allows Otherling's stylists to build their client's outfits in smart, intuitive ways. I am unable to share the full details about this portion of the project. Please reach out to me if you would like to learn more about my process.
Results
Securing ongoing collaboration and continued development
At the end of the 4-week design sprint, we successfully delivered two prototypes, an annotated handoff file and a design system to the Otherling team that helped reimagine their personal styling experience. Our interactive client-facing interface and revamped stylist portal were well-received, aligning perfectly with Otherling’s brand identity and vision. The Otherling team was highly impressed with our work, leading to a contract extension for continued collaboration throughout 2023.
Both the stylist portal and client lookbooks were further developed through subsequent design and engineering sprints. The full public release of Otherling is scheduled for mid-2024, positioning the company as a standout player in the personal styling market.
Reflection
High visibility and rewarding impact
This project was a significant learning experience, pushing me to advocate for my design ideas amidst diverse opinions and navigate challenges like scope creep. Collaborating with the Otherling team's brand designer presented opportunities to refine my communication and compromising skills, ensuring that the final product aligned with the founder's vision. The project also allowed me to explore creative visual design within a fashion context, making it one of the most rewarding experiences in my career.
Seeing the positive reception from the Otherling team and securing further collaboration reinforced the value of our efforts and validated our design approach. Even though I rolled onto a new project shortly after, it felt gratifying to work on this type of work and be exposed to a new industry. This experience has enhanced my ability to merge nuanced aesthetics with functionality, preparing me for future projects with similar demands for innovation and creativity.
Other Projects
Product Design
Designing a platform for seamless document automation
Role
UX Researcher, Interaction Designer, Visual Designer
Company
Gavel
Date & Time
8 weeks (ongoing)
Documate is a document automation platform that allows you to create templates and forms to speed up your document creation. Documate allows you to turn Word or PDF forms into intelligent workflows, sharply decreasing the time to create document sets. Documate is a no-code platformed geared towards attorneys, lawyers, and users alike interested in accelerating their document automation workflows.
As part of an ongoing project, I work as the lead product designer tasked with redesigning the tool's internal "Builder" platform.
Problem Statement
Documate users struggle building document workflows in an efficient and time effective way. The long build times partnered with a complex UI contribute to bounce rates and higher levels of customer support outreach.
Solution
I led the redesign of Documate's internal platform by creating a streamlined, automation builder platform helping reduce build times, minimize cognitive load and lessen customer support outreach. I redefined key user interactions and restructured the layout to account for future UI features and growth.
Redesigned Builder Interace
How might we reduce the complexity of the platform's visual interface and interactions so that users can aggregate and build larger document sets faster and more efficiently?
User Research and Planning
Given the quick timeline and nature of the project, we had to ramp up quickly to understand user issues and key areas of improvement and deliver a MVP. I conducted user interviews to gather insight and identify pain points. I also conducted a comparative analysis to gauge current market products. I then coordinated a product roadmap with the team to align with stakeholders on a timetable and delivery. Lastly, I created a prioritized feature list to synthesize on feasible solutions.
Gathering Insight
In conjunction with another UX Researcher, we conducted a series of 5 user interviews and distributed a survey to understand the problem space better and empathize with users. We accessed the Slack help channel to understand the types of issues users had and categorized them by frequency. We also analyzed the amount of views, likes, and dislikes of help documents found in Documate's FAQ page. Some examples of the user data is synthesized to the right.
- 60% expressed emotional responses to not knowing how to code (nervousness, frustration, insecurity)
- 60% of interviewees have dropped off the builder at least once due to confusion on platform
- 80% of users discovered more features/capabilities of Documate over time, not immediately
- 100% of interviewees have contacted Documate directly for supplemental help
Understanding the Market
I performed a feature audit of Documate's builder platform to assess current user engagement and effectiveness. The feature inventory, and with the evidence based on the user research, helped determine a design solution framework. I then performed a competitive and comparative feature analysis to gauge other document automation tools in the space, which informed the feasibility and MVP of our design solution framework.
Design Goals
1
Redesign and reorganize the Builder's global nav to account for new users
2
Simplify main dashboard by reducing clutter and adding visual consistency
3
Include additional help text, modals, tooltips, metadata and hover options to guide users through document building process
4
Implement a rich text editor within the Builder giving users more flexibility and ability to customize their own workflow
Design System
I created a design system to bridge the gap between product design and engineering. Boosting the internal design and engineering team's workflow by implementing a design system will help the new Builder ship quicker and the team to scale up much easier. Stripping down the UI into atoms, molecules and organisms has already helped create cohesion and improved user interaction rates since soft launch. I am currently testing component effectiveness and reiterating the design system based on a constant feedback loop shared with the whole team. It is a living, working system and has gone through multiple iterations since the new Builder and Dashboard rollout.
Atoms:
Molecules
UI Development
As I explored directions for the builder's interface, I kept in mind the whole user journey. I took a step back and found problems occurring at the master dashboard affected builder's propensity to continue to create workflows. I addressed this issue by redesigning the dashboard as well, focusing on simplicity and reducing cognitive load. I wanted to create a natural flow to empower builders from start to finish.
The Redesign
Main Dashboard
The Redesign
Workflow Builder
No items found.
DJ Mixes
Designing a platform for seamless document automation
Role
DJ, Artist
Rating
5/5
8 weeks (ongoing)