My Role
As the only designer in this project, I owned and led design strategy for the entire project from 0 - 1 — from discussing the idea with stakeholders to executing the design. My focus is to design an easy-to-use user interface and experience for WorkFlow Genius. My job includes gathering requirements, conducting user research, creating design solutions, and ensuring an intuitive and efficient flow.
Since ChatGPT first came out, it has had a significant impact on work life, transforming how people approach tasks, collaborate, and manage their time. But still, there are some problems that users encounter when using it. I created an online survey to get more insights to what users are thinking when using ChatGPT, to see if they face any difficulties and what they think could benefit them.
Our research revealed that users find typing long instructions to be the most challenging aspect of using ChatGPT. They were not sure if entering this instruction will give them what they're looking for. Thus expressed a strong preference for sample keyword templates that they can simply follow and fill in.
To solve the problem and to provide an even better version of ChatGPT, our team decided to create a prompt template library that provides all sorts of different use cases templates, categorized by different occupations. The templates will allow users to input simple keywords to generate their desired results, ultimately improving efficiency at work.
User Flow
This is an example of the user flow for a use case where a HR is looking to create an email content to introduce a new work-from-home policy to the company.
Lo-fi Wireframing
I created a lo-fi wireframe that showcase the overall flow and did a quick and easy usability test within the team to test it out. The team liked the overall flow of the product but finds entering a full page workflow a little too engaging as it takes more effort to go back to the dashboard if they were to find other workflows.
With that in mind, I iterate the wireframe, instead of entering a full screen workflow, a module will pop up to run the workflow. This method would provide more flexibility as users can do a quick run and exit to move on to other workflows.
We also added a "See Demo" button to give users the option of testing the template with just one click before investing the time to use it.
Designing the dashboard
With the flow established, I began exploring various dashboard designs to showcase workflows and different purpose of the sidebar menu. I used high-fidelity wireframes to effectively communicate with the stakeholders, and to make design decisions in a timely manner.
Displaying the workflow
I explored many different designs to display the workflows, how to display and how much information to place. After much consideration, I decided to go with card-based layout as it is the most versatile and also comes with great responsiveness. I also place icons to represent the occupation it is under for quicker recognition. Throughout the process, I also added the option to toggle to change card mode to list mode for flexible user experience.
Sidebar Menu
In the sidebar menu, apart from quick access to the occupations, favorite workflows, we also wanted to place "Recent Workflows" into the sidebar for users to access their recent history. During the wireframing process, I explored two grouping methods, one with everything listed out on the sidebar, another that expands out a submenu to view the workflows.
After much consideration, I decided to go with listing the items on a single sidebar, grouping the items effectively by categorizing them into "Workflows", "Personas" and "Recent Activities", also adding a top menu bar for quick access to the "Personas" The team really liked the sidebar menu as the classification makes a lot of sense and the small titles provide clear labeling to the users.
Final Dashboard Design
Designing the workflow
The workflow is designed to pop up in a module for easier access between different workflows. A "Run Quick Demo" button was also implemented for users to do a quick demo before investing the time to insert the prompt. A set of up and down arrow was also included to navigate between different results had the users generate multiple times.
