Transforming businesses with our virtual digital assistant

Waypost.ai

Background

Waypost is a dynamic Dutch startup providing SaaS solution for businesses of all sizes, streamlining and digitalizing their customer support. The cofounders sought a concept for the user interface, empowering the intelligent virtual assistant to seamlessly communicate with end-users.

Role

Prototype
Wireframe
UX Design
Branding
Information architecture UX Research

Timeline

1 Month

Team

3 UX Designer, 1 CEO, 1CTO

Introduction

During my involvement in the IronHack x Antler Accelerator Program in Amsterdam, I assumed the role of a UX/UI Designer within a team. Our task was to create the website and brand identity for Waypost.ai, starting from the ground up.

Upon commencing our collaboration, the co-founders had a concept without detailed technological specifics and they didn’t have yet an actual product; their vision was forming, but the technological implementation was still in progress.

Customer support

As a starting point for our research, we utilized data from stakeholders. Our website's purpose is to facilitate seamless integration between SaaS companies and Waypost, transforming it into a personalized product expert for each user. This integration offers tailored on-screen guidance, aiding users in task completion and maximizing available features.The primary issues identified were:

  • Customer Support: Slow response time, Lack of 24/7 availability, Language barriers.

  • UX: Non-intuitive design, Steep learning curve, Users not fully realizing the product's value.

Additionally, we conducted a survey involving over 100 participants to validate the concerns we pinpointed as shared by our users. The survey confirmed the demand for our product.

The ideal storyline

To understand the most effective tools for creating an optimal user experience, we used storytelling to gain insights into our users perspectives. This graphic was employed during the initial phases for our presentation deck and to facilitate more intuitive communication with stakeholders and potential clients.

This visual aid helped us to comprehend the necessary design elements for user assistance and directed our focus towards the core issue. We introduced a character named Sarah, who represents a user taking over a colleague's task. While Sarah is familiar with the software, she hasn't previously tackled this specific task.

The problem

How can we design an interface that guides users through their tasks without causing distractions, ensuring a seamless and focused user experience?

How can we develop a design that effectively represents a strong brand identity while also remaining highly adaptable for integration with diverse software environments?

The Ideas!

Our starting point was about how to properly showcase the element we needed. We started thinking about an activation button, usually ther are located on the bottom-right side of the screen.

The Help Button: The help button offers immediate assistance, ensuring users can effectively navigate the chat interface and receive prompt support whenever needed. While we chose to stick with the traditional help button concept to maintain familiarity, we opted for a simple graphical representation that aligns with our brand identity.

Once the button is activated, the Intelligent virtual assistant will ask you about how to help you.

Chat Interface Looks: The chat interface facilitates effective communication with the Intelligent Virtual Assistant, allowing users to input their queries and promptly receive responses. Beyond functionality, the interface's design creates an empathetic user experience, simulating a genuine conversation with the intelligent assistant.

For a smoothless guidance, we introduced the beacon.

The Beacons: Beacons provide users with highly contextual and hyper-local messages, guiding them to relevant areas necessary for completing their tasks. We recognized that the beacon could provide users with visual inputs, requiring minimal cognitive effort. Users easily locate the next task step's position and track their screen movements.

Small example about how the elements would work together.

Brand Identity

As we started building the brand, there was a need to quickly create the essential material. To address this, we focused on developing a brand identity and design guidelines to define the desired style and personality.

Throught competitors analysis and color psicology, we identified a unique market position that we could capitalise on. The goal was to stand out from the crowd and to look different from our competitors.

The brand identity became our foundation for determining our communication style, embodying traits such as Intelligence, Friendliness, Purity, Simplicity, and Collaboration.

Style tile

By establishing a cohesive brand identity and design guidelines, we set the stage for effective and consistent communication that aligns with our vision and resonates with our audience. The style tile, serves are a starting point for a future design system.

Landing page

We decided to create a website early in the process as a tool for showcasing our services, offering informations and monitoring our audience.

Our main emphasis was on crafting and developing the landing page, aiming to engage potential clients effectively. Here is the low-fi prototype with the structure of the page:

Hi-Fi Prototype

Learnings & results

  • This experience marked my first UX venture into the startup world. The process was fulfilling: initially, we didn’t even know the technical aspects of AI integration. Being involved in each developmental phase and seeing the startup's growth was immensely gratifying.

  • Initially, I felt guilty for not commencing my work with thoughtful research and abundant data. Over time, I've realized that each project follows a unique process, and its success can depend on various factors. Also, it’s never too late to conduct some research.

  • Our decision to prioritize a dark version was influenced by the prevalence of light backgrounds in most SaaS applications. That's why our energy was just focused on the dark version. As a next step, I would like to develop the product also in a light version, which can provide a clear UI against darker backgrounds.

Avanti
Avanti

OFF STORIES