Tract
Case Study
Responsive Web Redesign and Implementing a Design System for AI Startup
Deliverables
Responsive Web Design, Design System, Feature Development
Industries
AI, Finance
Timeline
4 months
About
Tract is an AI startup in San Francisco that provides tailored human assessments and a rating system for investors to evaluate private data, with a compatibility index and risk score.
Challenges
The website and MVP for Tract are scheduled for launch within a month. The homepage website prototype has been completed, and the current focus is on responsive design and optimizing materials. However, there are still some inconsistencies with the website and product components. Furthermore, the team has limited coding skills and bandwidth, and there is a restricted timeframe available for user research.
Initiating the Design Audit
During the audit of the website and application, inconsistencies were found across the products. Furthermore, it was noted that the "Urbanist" typeface is not suitable for high-precision information products, particularly information assessment, as it is illegible. The call-to-action also lacked visibility for new users, and a recommendation was made to highlight it for better user engagement.
Objectives
- Create a Responsive design with minimal redesign that aligns with the desktop version
- Create a foundation for the design system and implement existing and new UI/UX
- Features discovery and development that connect with the back-end requirement
Design Process
01 Responsive Design
With a tight one-month deadline ahead, the project started by breaking down the components and focusing on the homepage's responsive design. Horizontal scrolling components were employed to reduce its height. Breakpoints were established for responsiveness, and close collaboration was maintained with the developers to ensure alignment with their vision and coding limitations. Upon receiving approval for the homepage design, the same design principles were applied to other pages with a similar structure, optimizing efficiency.
By breaking it down into a reusable component and design system, the team reduced MVP launch time by 25%.
02 UX Improvement
A design critique session was facilitated to gather feedback on the existing design and explore potential connections with upcoming features such as organization management and user account creation through invitation links. The approach taken involved creating a site map, user stories, and a user flow for this scenario. This approach aimed to comprehend user goals and identify any gaps between the front-end and back-end systems.
Redefine User & Task Flow
Following that, low-fidelity sketches and mockups were generated, incorporating the new design system.
High Fidelity & Usability Testing
Subsequently, a high-fidelity prototype was developed, and a moderated usability test was conducted on both the website and desktop application. A total of 5 participants were involved in testing sessions lasting approximately 20-30 minutes each. These sessions were structured into task completion assessments, during which participants were tasked with using the current website to access the client portal, A/B testing with a new prototype, and providing feedback. This comparative analysis of the two designs enabled us to make final recommendations and as a result, the new design increased 40% in task completion rate in comparison to the previous one.
Insight
03 Design System Integration
The design system primarily prioritized the desktop version, and the MVP is currently exclusively accessible on the desktop. The process started with the selection of a new typeface, Readex Pro, chosen for its similar sans-serif style but improved legibility, particularly in certain characters like "a" with a bowl, as well as differentiating forms of "I," "l," and "1" for better clarity. The design system incorporates atomic and semantic tokens, along with reusable components applicable across both web and application interfaces.
Some minimal rebranding took place for brand color, logomark, and logotype to improve the legibility and optimize the pixel perfect in various devices. The new turquoise color is designed to appear on both light and dark background.
Impact
- The responsive website prototype provides a framework for front-end developers to implement the design more efficiently.
- The new design system improved consistency and usability for website and desktop applications and the teams can continue to create and iterate features using the existing design system.
- Increased 40% in task completion rate by redesigning UXflow, components, and A/B testing with UX researcher
- Cut MVP launch time-to-market by 25% by creating aresponsive design system with 115 reusable UI components
Key Takeaway on Long-term Improvement
- At this phase, some testing and redesign cannot be performed. Complex tasks such as analyzing compatibility and risk scores are tied to the AI training system and require discussion with other stakeholders.
- Our AI product development encounters technical issues, especially when it takes a long time to train the model, which delays the launch of the MVP. The product team should consider creating a demo, concierge, or smoke test to test the product and better understand the user. This would be a quicker way to identify and address any issues or validate the product.
- During UI implementation, developers require input from design to ensure the feasibility of coding complex components.
- Due to the time constraint, the icon design system still relies on the open-source library that still needs to be redesigned to align with the branding.
TEAM
Pariphat Sinma - UI/UX designer
Colby Lee - UX researcher
Jack McKay - Founder
Ethan Tang - Front-end developer
Lei Li - Back-end developer
Emily Ma - Back-end developer