Valueserve.io
Designing a Seamless Experience for AI-Powered Sales
A responsive landing page for a SaaS tool that helps sales teams generate AI-powered proposals faster.
Year
Duration
Role
2024
12 weeks
Sole UX/UI Designer
Introduction to the Design
Design Problem
The challenge was to design a responsive landing page that showed how Valueserve.io turns sales team struggles into solutions. Creating tailored proposals is time-consuming, and teams often lack reusable assets or tools to adapt content for each client. The landing page needed to highlight these pain points while clearly presenting the product’s benefits in simplifying and speeding up the proposal process.
On average, sales representatives spend about 3.3 hours per proposal.
Goal
The goal is to design a responsive landing page that effectively showcases the product's benefits and background, enabling sales professionals to understand its key features and benefits.
A responsive landing page design that provides effortless interaction on desktop, mobile, and tablet.
A landing page with brand values and product benefits.
POV Statement
Users struggle to understand how Valueserve.io’s AI-powered value proposals can improve their sales process. They may be unfamiliar with AI or skeptical of its value.
Users find it difficult to navigate to key information about Valueserve.io’s service. This is important because they need to find key information about the product, which affects their ability to take action and make a purchase.
HMW Questions
How might we make the benefits of using AI-generated value proposals clear within the first few seconds of landing on the site?
How might we ensure users can find what they need in just a few clicks and that navigation is easy for all users?
Insights Gathered
Competitive Analysis
I found that most value proposal platforms overwhelm users with excessive product details, making it hard to identify the key benefits quickly. This insight became my first design checkpoint—avoiding this pitfall would be essential. To validate and expand on these findings, I moved into user interviews to understand firsthand what sales professionals truly needed.
Strengths
Seismic streamlines content management with powerful analytics, enabling teams to organize materials and track performance. Its personalization features enhance buyer engagement while seamless CRM and marketing integrations optimize sales workflows.
Highspot’s user-friendly platform integrates smoothly with CRM and sales tools, providing detailed insights into content performance. Tracking buyer engagement helps teams refine strategies and boost effectiveness.
Chorus AI uses smart AI to analyze sales conversations, offering live transcription and actionable insights. Its coaching tools enhance training, helping teams improve performance and close more deals.
Weaknesses
Steep learning curve due to the number of features.
Limited options for customizing the platform.
It can be hard to organize content when there’s a lot to manage.
Doesn’t work with all CRM systems.
Transcriptions can sometimes have mistakes.
User Interviews
Speaking with experienced sales professionals revealed a consistent priority:
“Show me the benefits. Show me how this makes my job easier.”
These insights shifted my design direction toward a benefit-first approach, ensuring product capabilities were always framed in terms of user value.
Total: 5 Participants
All participants have a range of professional experience in sales.
Four out of five have experience with creating value proposals.
One of the participants’ roles focuses on managing the sales process rather than creating value proposals.
Common Themes
Automated tools are needed to simplify proposal creation and reduce manual work. Seamless integration with CRM and presentation tools ensures efficiency, while data-driven insights, including ROI calculators and workflow visualizations, help showcase value and drive better decision-making.
Pain Points
Sales teams struggle with creating time-consuming proposals, so they require automation to streamline the process. Poor integration with CRM and presentation tools adds friction, making usability challenging. The lack of automated ROI calculators and workflow visualizations make it challenging to demonstrate value
“Quantifying proposal impact can be time-consuming, and I wish for tools that simplify this aspect.”
“I use Excel and PowerPoint to create value proposals, but I find that they lack consistency and efficiency.”
Affinity Mapping
From the interviews, recurring pain points emerged—such as a lack of quick customization options and difficulty reusing past proposal content.
Using Affinity Mapping, I grouped these themes and was already able to prioritize features that addressed the most common frustrations first, setting a clear foundation for the MVP.
Piecing the Puzzle Together
User Persona
I created two personas representing the ideal users envisioned by the client—both rooted in real interview data.
Each persona captured specific goals, pain points, and daily challenges, giving me a human-centered lens to guide all design decisions.
User Flow
To create a seamless journey, I mapped the core user flow:
Users arrive on the homepage, quickly understand how Valueserve.io simplifies proposal creation, then choose to either try the tool or proceed directly to purchase.
This flow ensures users get immediate clarity on value before engaging deeper, reducing friction and boosting conversion potential.
Bringing Ideas to Life
Low-Fidelity Wireframes
I used insights from my competitive analysis to avoid word-heavy layouts and focus on clarity. Guided by user feedback, I ensured the homepage immediately communicates Valueserve’s purpose, helping users quickly see its value.
Desktop Low-Fidelity Wireframe Design
Mid-Fidelity Wireframes
Landing Page
Sign up (Contact Info)
Sign up (Payment Info)
Sign up (Success)
Request A Demo (Contact Info)
Request A Demo (Select Time & Date)
Request A Demo (Success)
Branding and Style Tile
To align the design with the client’s vision, I created a mood board and style tile. Purple was chosen as the core palette, conveying a modern tech feel while maintaining professionalism.
I drew inspiration from Purple-Tech designs to ensure the branding effectively complemented the product’s purpose—building trust and excitement simultaneously.
This branding foundation guided the UI design, keeping visual consistency across all screens and touchpoints.
Moodboard
Color Palette
Typography
High-Fidelity Wireframe
After testing the navigation’s usability, I realized the flow needed to be adjusted to stay aligned with the core goal: guiding potential customers toward using or purchasing the product.
Client feedback also highlighted a key addition—introducing both a free plan to attract new users and a paid plan for advanced features.
To address this, I updated the flow to include both options, clearly showcasing the benefits of each. This ensured users could quickly compare plans, see the value offered, and follow a tailored path based on their interest level.
Desktop Landing Page
Desktop Pricing Page
Desktop Advanced Plan
Desktop Free Trial
Refining the Journey
Usability Testing
After completing the high-fidelity prototype, I conducted usability testing to uncover friction points and validate design decisions. The feedback helped me prioritize targeted refinements that enhanced clarity and ease of use for my final design.
Landing Page
Separate the text into two centered statements in the Discover the Value section.
Shorten the pricing plan page to minimize scrolling
Reduce the size of pricing plan cards
Ensure the pricing link on the top navigation redirects correctly
Advanced Plan
Add a confirmation code on the receipt
Participant Comment: “The contact information page was well laid out and intuitive. The payment process was similar to those I have seen on other sites, making it easy to navigate.”
Free Plan
I received no comments on this iteration.
Participant Comment: “The visual design was consistent across plans, and I found the experience clear and straightforward. I’d rate it a 5.”
Iterations
Design Improvements
Added the product name “Valueserve” next to the logo.
Functional Fixes
Separated the paragraph into a highlighted subheading and body text below.
Adjusted the pricing plan page to make the page and information shorter.
Touched up on the reviews page.
Design Improvements
Changed the strokes from purple to black on all completed states.
Functional Fixes
Added realistic body text to the payment method.
Functional Fixes
A confirmation code was added to the receipt.
I added extra information and text to make the receipt more realistic.
Final Design Mockups
Key Takeaways
Challenges Faced
Two key challenges shaped this project. First, I had to balance my clients’ preference for a simple, professional look with users’ desire for a fun, colorful interface. Second, I underestimated the complexity of responsive design, which required me to quickly research and adapt layouts for mobile and tablet devices while maintaining visual consistency.
What Made It Meaningful
Creating a solution that satisfied both client goals and user expectations was rewarding. I kept usability at the core while ensuring the design reflected the brand and appealed to the target audience.
Lessons Learned
I learned how to merge client priorities with user insights to create a product that works for both. Designing for three device types strengthened my understanding of layout responsiveness and cross-platform consistency.
Evolving as a Designer
This was my first client project as a UX designer, requiring me to mediate between differing client visions and use user testing data to justify design choices. It sharpened my collaboration, iteration, and responsive design skills.
All - Valueserve - Pawfection - Instagram - LovePlan
