Designing and Launching the Yival Service Page
Website Design · Design System · AI Tech
Role
UX/UI Design
Timeline
Nov 2023, 3 weeks
Figma, Notion, Jira
Tools
Background
Yival, an AI-tech startup, delivers custom AI solutions for non-programmers, focusing on quick and affordable GenAI app development. Despite launching a website to highlight their offerings, engagement from target clients was lower than expected, with few demo bookings and contact submissions.
As a UX/UI designer, I advocated for a dedicated service page to comprehensively showcase Yival's offerings and motivate user action with a user-centered design approach. Collaborating with 2 full-stack engineers and 2 stakeholders, I led the design process and effectively launched the service page.
Impact
Reached out to 80+ clients through contact form submissions
Increased the booking AI consultation conversion rate by 15%
Problem Statement
While Yival's website has been successfully launched and has connected with a few potential clients, the conversion rate for booking consultations and contact submissions has not met expectations.
HMW enhance credibility and clearly communicates Yival's offerings and benefits to encourage more potential clients to engage with us and drive business growth?
Solution
A detailed webpage emphasizing CTAs to showcase Yival's AI consulting services, benefits, and team, driving increased engagement and conversions.
Competitor Analysis
With a comprehensive grasp of the services and content provided by Yival, the exploration began with research. Through the comparison and study of service pages from successful AI consulting firms, initial insights were gained on best practices for designing to enhance user credibility.
Information Architecture
Following a comprehensive review and discussion of competitor website analyses with stakeholders, the information architecture for the service page has been finalized.
Wireframing
A high-fidelity wireframe for the service page was conceptualized, rooted in a solid information architecture framework and leveraging insights from stakeholder documentation.
The design prioritized illustrating the clients' journey with YiVal, focusing on establishing trust and guaranteeing the ability for clients to easily schedule consultations at their convenience.
Visual Styles
While exploring the visual style, the existing colors from the Yival landing page were reused to ensure brand consistency. All colors comply with WCAG level AA for accessibility, and all font sizes were at least 16px to enhance readability.
Ideation
Iteration
I presented the first version of the mock-up in the meeting, received an updated copy from stakeholders, and gathered feedback from engineers.
Adding images to bento-style cards
To address engineers' concern about higher development costs for dynamic cards, we decided on static, intuitive team info cards.
Static team info cards
- Note: During mockup creation, placeholder avatars are used temporarily as we continue to collect team member profile photos.
Final Design
After multiple iterations and a focus on mobile responsiveness, the mockup was finalized. Stakeholders validated the final design, which was then delivered to engineers along with detailed handover documents to facilitate seamless implementation.
Reflection
Through close collaboration with the engineering team, I gained insights into their technical constraints and resource limitations, ensuring that the design aligns with these considerations. Ultimately, this ensures that the final product meets the expected user experience and functionality goals.
Design process needs to take into account the perspective of engineers.