Valueserve.io

Designing a Seamless Experience for AI-Powered Sales

Designing a sleek, responsive landing page to showcase Valueserve.io’s AI-powered sales proposals.

Year

Duration

Role

2024

12 weeks

Sole UX/UI Designer

Introduction to the Design

Design Problem

Creating value proposals, whether experienced or not, is time-consuming. It’s hard to find an asset to use when developing and tailoring the proposal to “specific clients' needs” and preferences.

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.

  • 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 have never worked with AI or may not see the benefits, making them hesitant to engage.

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

During competitive analysis research, I found that most value proposal creation sites had too much information about the product. It was hard to read and focus on the insights from competitors, so I ensured that the design layout was easy to read and maintained a clear hierarchy, allowing my users to find the benefits easily.

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

When I did my user interviews, I found that many experienced sales professionals value seeing the benefits of a product like this and stressed the need to showcase what the product is about and how it can help them create value proposals. 

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 makes it challenging to demonstrate value effectively.

“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, which lack consistency and efficiency.”

Affinity Mapping

During user interviews, I found many common themes and pain points that experienced sales professionals faced in their day-to-day work life. So, I organized these findings through Affinity Mapping and prioritized features based on the common themes I discovered.

Piecing the Puzzle Together

User Persona

Creating two user personas helped me visualize my audience based on their backgrounds, challenges, and goals.

User Flow

The user flow begins with the user searching for sales tools and then finding the My Value-Serve landing page. If the user is interested in using the product, they would choose a price plan, an advanced plan, or a free trial.

Bringing Ideas to Life

Low Fidelity Wireframing

The design process involved creating wireframes for three sections: low-fidelity, mid-fidelity, and high-fidelity wireframing. The final design across all the devices was completed in the high-fidelity wireframing stage before prototyping.

Desktop Low-Fidelity Wireframe Design

Mid Fidelity Wireframing

Below are some key desktop mid-fidelity screenshots. I created these wireframes using the Figma tool. The first screen is the landing page, where potential clients can view value-serve benefits. Then, there are two additional sections. The first section is the sign-up page for a paid monthly plan. The last section is where the users can request a demo.

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

I created a mood board and style tile for this responsive design to ensure it aligns with my client's needs and the product's purpose. Both clients agreed on a purple palette, so when I set up my mood board, I looked for inspiration for purple designs with a tech vibe that aligns with the product while maintaining a professional appearance.

Moodboard

Color Palette

Typography

High-Fidelity Wireframe

Desktop Landing Page

Desktop Pricing Page

Desktop Advanced Plan

Desktop Free Trial

Refining the Journey

After completing high-fidelity prototype testing, I focused on the areas that needed adjustments. Below are the key adjustments I made based on the feedback from testing.

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 with the main and advanced pages. I was not confused by anything. I would rate the experience 5; it seemed clear to me.”

Iterations

-Added the product name “Valueserve” next to the logo.

-Separated the paragraph into a highlighted subheading and body text below.

-Adjusted the pricing plan page to make the page and information shorter.

-Touch up on the reviews page.

-Added realistic body text to the payment method.

-Changed the strokes from purple to black on all completed states.

-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

  • I encountered two main challenges. First, I struggled to maintain my clients' wishes and users' needs. My clients wanted a simple design, but my users wanted it to be more fun and colorful. I had to balance keeping it fun for users while remaining professional for my clients and their product. I also struggled with the responsive designs because I didn't know I had to build for other devices. When it came time to make it, I had to research the layout and structure to ensure it looked good on both mobile and tablet versions. 

What Made It Meaningful

  • I enjoyed creating a solution to meet my clients' needs. I was able to showcase their wants through my design and keep my clients' wishes in mind. I also had to keep my user participants in mind and ensure the user experience was intuitive. 

Lessons That Shaped Me

  • I learned to work with my client's needs while integrating insights from user interviews. Combining both insights allowed me to create a design that will benefit both. I also created three different devices, which helped me learn how each device's layout works and how to maintain consistency across them.

Evolving as a Designer

  • This was my first time working with a client as a UX Designer to help build a responsive landing page for their product. Since I worked with two clients, I had to learn to be the medium because there were times when they had different ideas. I found that user interviews helped me show my clients the evidence to support my decisions.