OVERVIEW
Pathlit is a US-based startup. As a contract UX/UI designer, I led the end-to-end design of the web experience for an AI workflow automation platform, focusing on simplifying the product for non-tech users.
Most of the designs were submitted and development began, however, the business pivoted in a new direction, ended up the designs were not fully implemented.
MARKET RESERCH
Dived into an intensive research
Competitive Analysis was primarily done to deepen my understanding of the product. Upon joining the team, I was unfamiliar with the "AI workflow automation" tool and needed to research both the product and its competitors. Pathlit identified four key competitor brands.
Main competitor
Sub competitors
Key findings
UNDERSTANDING THE USER
Generative research
As always, user interviews provide valuable insights about the product and its pain points.
Business students from the University of Illinois Urbana-Champaign trialed the Pathlit app in class, but many of them found navigation challenging. I thought they would be ideal candidates for user interviews, however, due to summer break, we were unable to reach out.
Our goal was to interview non-technical users with experience using AI workflow automation tools. Finding suitable participants was challenging, so we leveraged Lyssna for recruitment.
Problem statement
We will identify the key characters of target users, the factors influencing their tool selection, and their key pain points by conducting user interviews.
Key findings
General information
Re: Landing page
Re: App
A little side note
Following user interviews, I realized that understanding users is much like profiling in detective work—piecing together insights to accurately identify needs and motivations. I even shared a short article on this perspective on LinkedIn!
Real journey starts from here
This was just the prologue—an ordinary case study until now. The real journey begins here.
BUILDING LANDING PAGE
We were on a very tight deadline
During the research phase, Pathlit requested that I create a temporary landing page to showcase their upcoming events. The timeline for this task was just one week, and it was initiated prior to the availability of research results.
Due to the tight deadline, I prioritized essential elements to capture user attention and effectively communicate the product and company. Future iterations will consider adjustments to the branding colour theme and hero image to make it more welcoming to new non-tech users.
Original landing page
New temporary design
Collaborate with a graphic design team
A graphic design team joined to develop a new branding guide. This presented an excellent opportunity for me to collaborate with the design team in creating a comprehensive branding guide. The process of developing the new brand guide took about one month.
Items including new brand guide:
Colour theme
Typography
Logo
Dark theme vs Light theme
The CEO initially wanted a dark theme for the branding and app UI to differentiate from competitors. While a dark theme can reduce eye strain and enhance focus in late-night environments, Pathlit is a B2B tool, and users are more likely to engage with it during the day. Additionally, implementing a dark theme across diverse content types (text, images, video, dropdowns, etc.) can present challenges in maintaining sufficient contrast and a consistent colour scheme.
After careful consideration, we opted for a light theme. In future iterations, offering both light and dark mode options could be explored.
(I used this article to learn more about this topic: click here)
New web design
Wireframe
Final design
Landing page explained
Incorporated design elements based on insights from user research to enhance user experience and meet identified needs.
Responsive grid system
The website is fully responsive across all devices. Given the limited timeline, I minimized the number of breakpoints to streamline consistency and ensure easier management across various screen sizes.
Interactive micro animation
A little fun with interactive animations!
CHATBOT CREATION FLOW
Next task
Before finishing the main feature, which was the Workflow creation flow, I was assigned to work on Chatbot creation flow. This feature lets users build custom chatbots with natural language. They can link their own knowledge bank and plugins to the chatbot, so it will be like your personal AI assistant.
Task analysis
Task analysis serves as my foundational map for designing user flows. As a UX designer, I concentrate on ensuring seamless usability from the first interaction with the product through task completion.
Mid-fi wireframes
I then designed this flow as a step-by-step walkthrough, ensuring users can intuitively create their own chatbot.
Major changes between Mid-fi and Hi-fi
Conducted usability testing with four participants and closely reviewed the entire design flow with the development team to ensure all features and workflows were feasible before moving to high-fidelity wireframes. Identified and addressed several major errors during the process.
How I handoff design to developers
When handing off designs to developers, I ensure all assets are accompanied by a design system, detailed prototypes, and clear annotations to eliminate guesswork and facilitate a smooth development process.
WORKFLOW CREATION FLOW
Next task
Next task was to finish the main feature, AI workflow creating flow.
I implemented a step-by-step interface in this flow too. The reason is to address the original design's high learning curve and lack of guidance for new users. The updated design provides clearer instructions using conversational language, guiding users through the process of creating a workflow in a more intuitive and accessible manner.
Original - workflow creation top page
New design
Original - creation in progress
New design
Major iterations after usability testing and the business pivot
Conducted usability testing with five participants, identifying key issues and presenting potential solutions using mid-fidelity wireframes.
However, after this phase, the business shifted its direction, and these designs were not developed. One reason for the change was the discovery of numerous new competitors on a daily basis. As a result, the product strategy pivoted to focus on a specific use case for a native app, rather than focusing on a broad range of use cases for a desktop app.
UX writing
I noticed that many competitors used overly technical language, despite claiming their apps were designed for non-technical users with little to no coding knowledge. Since we didn’t have a dedicated UX writer on the project, I took on the responsibility of ensuring the content was written in plain, accessible language, avoiding technical jargon. When technical terms were necessary, I made sure to include brief, clear definitions to ensure comprehension for all users.
Dashboard
These are the designs for the Dashboard and other pages that are not directly tied to the previously discussed flows.
NEXT STEPS
What have I learned?
Both, the CEO and the team, were unfamiliar with the UX process and the tools I used throughout the project. Although I explained the benefits of the UX tools, I realized they didn't find it helpful as much, which I saw as a learning opportunity. In hindsight, I should have focused more on how UX processes not only improve the product, but also benefit the business. Moreover, delivering the findings to them in a more effective and engaging manner could have had a greater impact. For example, instead of just sharing key insights from interviews, using tools like empathy maps or storyboards could have helped tell a more engaging narrative and built stronger trust in the UX approach.
Another lesson I took from this project was the importance of providing minimal instructions during usability testing. Avoiding over-simplified tasks ensures users interact with the product in a more realistic manner, offering better insights.
What did I do well?
This project required significant technical knowledge of AI, an area where I had limited experience. While I conducted my own research when needed, I frequently consulted with the development team to deepen my understanding and ensure my designs aligned with technical requirements. I was particularly impressed by the team's ability to clearly explain complex technical concepts in a way that was accessible to someone without a technical background. This collaboration was essential in creating designs that were both functional and user-friendly.
