Design System Visual Design User Experience 2022
Linkst.ar is a startup product launched in 2022, designed to help freelancers and students create online portfolios and connect with employers. Initially, it had a basic design with minimal focus on user and visual experience. As the product gained traction, I was tasked with rethinking customer goals and journeys, undertaking a complete makeover to create a visual theme and a design system for consistency and responsiveness, particularly since 60% of users were on mobile.
Back to the basics
The design faced readability issues due to the lack of cohesion between the two fonts and inconsistent font sizes. Additionally, the basic color palette failed to add visual excitement to the product. To address these issues, I created a new stylesheet featuring a cohesive color scheme and a typography size chart for two new fonts. I also experimented with gradients and shapes to incorporate modern trends and enhance visual appeal.
I began by analyzing Hotjar data recordings to identify design issues within the product. The analysis revealed that 72% of user sessions encountered navigation problems between the dashboard, and heatmaps indicated users struggled to find CTAs for editing and accessing their portfolios. I then conducted an extensive competitor analysis to identify trends, components, and user journeys employed by other similar products.
A new Design System to sprint the visuals
The goal of the design system was to enhance quality and consistency across the product, and to improve efficiency during design and development sprints. The new design focused on CTAs, icons, headers, footers, dashboard, navigation menus, user cards, portfolio components, and more. I maintained constant communication with developers to ensure each visual element was seamlessly translated into the product, along with its intended design vision and animations.
A brand new look
Through user research, I identified user personas and developed a customer journey map to streamline goals. I created low-fidelity wireframes for discussions, and the product team agreed with my idea of splitting landing pages between employers and job seekers. This approach helped highlight distinct features and organize marketing content for each category. I used a similar technique to shine a light on unique features for each persona with the help of Shapes, colors, bold typography and product visuals.
Result
I arranged extensive sessions with the developers to ensure a smooth transition of the design. Following the completion of Linkst.ar's redesign, metrics showed a 1.8x increase in daily users, longer user sessions, and 1.3x more conversions in the subsequent weeks. Along with the product team, I conducted user interviews and analyzed Hotjar data to gather feedback on the new visual design. The response was overwhelmingly positive, particularly regarding the design's responsiveness on mobile devices, and the feedback was used to tweak and address additional pain points.