A B2C customer relation management(CRM) web application developed to streamline business management for entrepreneurs and freelancers.
My Role
UX/UI Designer
Team
5 UX/UI Designers
1 Project Manager
Tools
Figma/FigJam
Slack
Google Suite
Timeline
July 2023 - Oct. 2023
Currently, numerous efficient CRM tools are available to small business owners, aiding them in overseeing the growth of their companies. However, our clients noticed through their user research that most CRM tools excel in only one or two specific areas, causing entrepreneurs to either pay for multiple CRMs to complete particular tasks or avoid using them altogether.
Seam aims to alleviate these difficulties by providing a warm, easy-to-use experience so entrepreneurs and freelancers can save money and spend less time managing their businesses.
My team and I asked clarifying questions about the product requirements to comprehend the constraints of the features tied to each user story. From there, we transformed them into user flows that were assigned to each team member.
Based on the company's current design work and provided user stories, my team and I redesigned the existing UI of the Onboarding, Dashboard, Calendar, and Invoice screens. We also designed new screens for the Contract, Proposal, All-in-One Form Builder, and Lead Form pages.
On Zoom, my team and I met with our client to introduce ourselves, discuss the project brief, and ask questions we prepared to understand their expectations for this project.
During our call, we asked the client several questions related to the client's vision for Seam, the business and user goals of the product, and the functionality of the new features.
Speaking with our client clarified that:
The website's overall design should be warm, welcoming, and aesthetic.
Screens must be accessible to neurodivergent users.
New features and their functionalities should emulate those of Seam's competitors.
As a team, we formulated a plan to learn more about CRM websites, how to design for neurodivergent users, and aesthetic design trends as we approach creating user flows.
As a team of five, we took on each user story individually and used the existing screens to guide us through mapping the following user flows:
As a user, I want to create an account and log in.
As a user, I want to view my dashboard upon login.
As a user, I want to create a new document and generate a link that allows the document to be viewable/actionable by an external client.
As a user, I want my client to be able to schedule an event/meeting with me.
As a user, I want to be able to receive information from my client.
I was assigned the first user story to map, so I studied the existing onboarding screens to identify how users move from screen to screen and mapped the flow accordingly.
Reassigned to the Contract Flow
Since the existing screens only needed redesigning, we agreed to restructure our responsibilities to design the new screens first, and then redesign the older ones during the high-fidelity wireframing stage.
I was reassigned to design the Contract screens, so I examined the contract form pages of potential competitors and identified three key pages to create:
Overview Page
Edit Form Page
Preview Form Page
After the user flows were completed, we needed to establish how to redesign the existing screens and design the new screens. We recalled that the client showed us competitors that pushed them to create Seam during the kickoff meeting, so we analyzed how each competitor approached designing similar pages as inspiration.
Crafting the Wireframes
After receiving feedback from the client on our wireframes, I continued to iterate my low-fidelity screens into mid-fidelity wireframes. As I designed each screen, I ensured that functional components for the contract pages were created with auto-layout and variants to streamline our workflow.
This was especially helpful for my teammates as they found the "form builder area" that I designed applied to the other screens we were crafting as it allows the user to click or drag elements into the container to create their forms.
This deliverable went through 3 iterations, each improving over the last with additional screens, newly created components, and readjustments to the spacing and sizing of all elements until we gained the client's approval.
Once the mid-fidelity wireframes received the client's approval, we examined the client's style guide to gain insights into the application of the color palette and identify any areas that needed improvement. We observed that some colors didn't pass AA and AAA contrast ratios, which didn't align with the client's concerns for their potential neurodivergent users.
As a team, we researched how to approach accessibility design for neurodivergent people and found that less saturated/pastel colors work best as they are less stimulating to a neurodivergent person's eyes.
With this in mind, we created a new color palette with slightly adjusted saturation and brightness to present the client. While the proposed colors not only passed more contrast ratios than the previous ones, the clients stated they would rather stick with the original palette to focus on establishing the "aesthetic" look they envisioned. From there, my team and I settled with finding other ways to improve the app's accessibility, like using simple language throughout all of our screens and consistent spacing.
Iterating Key UI Elements in the Dashboard and Overview Pages to Set Design Language
With the style guide updated, we focused on understanding how the client would like Seam's new and existing screens to be designed. Together, we selected two key screens, the Dashboard and Overview pages, to iterate because their general UI design and functionality are present throughout the website.
We crafted three versions of both pages with changes made to specific UI elements. My teammates and I focused on designing different iterations of the stroke and fill colors of the following:
The side navigation bar's "Get Started" element and the active page indicator.
The Dashboard's information cards and the calendar component's current date and appointment containers.
The Overview page's status pills.
After we presented the iterations, the client provided feedback and picked specific elements from each screen to be incorporated into the final UI iterations of both pages.
With the style guide and UI iterations approved by the client, we dove into visualizing our high-fidelity wireframes. I strictly followed the style guide to ensure the designs for the Contract pages were consistent with Seam's branding, then transformed the mid-fidelity components used in these pages into high-fidelity versions for reuse.
By this point, the client requested an additional feature to be included in the Contract pages for the user's convenience when creating their contracts. This feature is called "Autofill"; it's an automation feature that allows users to fill specific text elements with information related to a project's contract, like the client's first name.
The client specified to emulate an identical feature from their competitors, so I mixed the intuitive functionality of both Dubsado's and Hello Bonsai's autofill features to create a version unique to Seam.
As the last deliverable for this project, we carefully documented helpful annotations, dimension measurements, and color and text styles to guide developers during the development process and potentially alleviate confusion.
Working on this project was a great learning experience for designing with accessibility as a top concern for the product. Besides following standard WCAG guidelines for color contrast, discovering how neurodiversity affects how a user interacts with a product and comprehending how stimulating specific colors are helped broaden my understanding of accessibility design.
This also presented a challenge where we had to balance achieving the client's "aesthetic" vision for Seam and meeting their accessibility goals. My team and I spent a lot of time trying to find the best muted/pastel colors for neurodivergent users, but we had to compromise in this area to meet the client's visual expectations for Seam.
If I continued working on Seam, I'd consider taking these following steps:
Prototyping the high-fidelity screens.
Gathering a focus group of freelancers/entrepreneurs, specifically targeting those that identify as neurodivergent, and conduct a round of usability testing.
Exploring ways to incorporate AI into the builder tool so the users can generate contracts much more quickly.
My team and I left this project at a good start, but I'd consider speaking with the clients about incorporating AI into Seam. I can imagine how much more time this product could save for its users if they were able to craft their contracts, and other related forms, by entering certain prompts and iterating over time. It could prove to be too intense to implement since Seam is an MVP, but definitely something to think about down the line.
Clawest
Enhanced the add-to-cart process to improve usability and align with e-commerce best practices.
Seniors in Transition
Empowered long-term care nurses and caregivers with a messaging tool for daily communication.
UX/UI Design
Hospitality
B2B2C