What does buying suit for a wedding, getting a funny quote mug or receiving a birthday party invitation have in common? We like it to be customized for us. And similar to previous examples, this case study shows the process of designing an AI assistant that creates tailored experience for international students using Wayble platform.
‍
To summarize, I contributed to the product feature planning and ideation, created low-fidelity and final designs, provided implementation style guide and multiple QA documents for developer team.

I have started working with Wayble in 2024 helping improve platform's UX and modernize UI. With Wayble being a small tech start-up (around 12 people on the team) I am often involved in product planning conversations with engineers and their CEO, Pat Chaisang, who sets the vision and is in charge of client management and acquisition. After having a number of pitches and going through demos with a few institutions Pat realized the potential for a new flagship feature — an AI assistant.

Clients expressed high level of interest towards a more automated solution that would consolidate existing Wayble's features. So we started planning for an AI assistant that would be capable of providing custom experience based on the individual student's information. We decided to call it Wayble Way as it will pave the way for the students to succeed on their academic and personal journeys.

After validating demand for this feature with institutions we started fleshing-out the functionality logic. This stage involved lots of sticky notes and conversations around the data collection, onboarding, user flows and actions that should be available to the students. This helped me gain a general understanding of user experience and vision that we were striving for. After a few ideation sessions we came up with core building blocks:

• Stage selection
• Long-term goals
• Stage goals
• Current Activities (broken down into in-progress and completed)
  
• Questionnaire (for stage onboarding)
• Stage exit survey

At this point the biggest question for me was: how do we present this complexity to the users without overwhelming them?

I proposed to create a Wayble Way dashboard (as we call it internally) which will act as AI assistant's main screen. Onboarding, questionnaires, surveys and other flows that are required to receive data for customized AI recommendations would be either connected to the main Wayble Way dashboard or displayed on it. We also identified that, depending on the completion of different stages and other criteria, student should see different states of Wayble Way dashboard:

• Start
  Goals and activities are not defined. User is asked to complete a quick questionnaire to define their goals and activities for this stage.
• Default
  Stage is open and goals and activities are available to click on.
• Closed
  Student won't be able to interact with this stage or complete any tasks or activities until previous stage is completed or institution admin opens it manually.
• Survey
  All goals and activities were completed. Students will have to complete a short exit survey to move to the next stage.
  
• Completed
  Stage is fully completed. Students can revisit completed stages, browse goals and activities and even reset the stage to complete it again! (with different goals and activities)

As we collectively arrived at the list of widgets to display on Wayble Way dashboard, I started putting together first drafts. And while these wireframes were setting the stage for a more complex UI, I still didn't have the final information architecture provided by the lead engineer. This made it complicated to further refine the experience.
‍
First low-fidelity draft was as simple as it gets and looked more like a to-do list.

Second iteration of low-fidelity wireframes introduced more features that would make it into the final version. Now the users would be able to switch between long-term goals and current activities, change their goals, navigate easier between stages, etc. I started thinking about different types of activities and how interactivity can help users navigate through the UI we were building. Incorporating navigation elements into activity containers when users hover-over them was where I started to experiment with it (it was abandoned later to accommodate for responsiveness).
‍
I also started incorporating some basic visual elements like path background behind the stage selector and stage indicator illustrations to bring in Wayble's personality.

After having discussions around previous low-fidelity wireframes we realized that we need a more comprehensive overview of all widgets / section where user won't have to switch constantly between tabs. We relocated long-term goals to main page, next to stage selector.

I also split activities section into two subsections to focus more on to-do activities rather than displaying completed ones at the top. After all, we wanted users to keep progressing through stage and the best way to do it is to put incomplete tasks in front of them.

Once we were happy with the overall page structure I fleshed-out the first high-fidelity version. Apart from applying Wayble branding and working on visual presentation, I added stage goals section and made long-term goals less prominent since they won't change from stage to stage.

Each activity received its own icon and color treatment so that it is easier to tell different tasks apart (watch a video, read a blog post, attend an event, etc.)

Even though this high-fidelity wireframe looked good for everyone on the team, Wayble's lead engineer proposed we do a few more iteration. The reason for it was to make the connection and the flow (stage -> stage goals -> my activities) even more clear for students who would see Wayble Way for the first time.

This is where I experimented more with overall layout, sections visual presentation and hierarchy.

At some point I was presented with a new requirement which made its way into the design process far too late — theming. Originally, this AI assistant was planned to be Wayble branded feature. This would help it become more recognizable and marketable. However, due to the gaps in the discovery process the need for the institution custom theming was not uncovered until later.

And even though this new requirement set us back, it was an opportunity to improve UI even further and ensure client satisfaction.

So I had to take a step back from what we thought was a solid option and go back to low-fidelity screens to rework how styling is applied to all components based on the new approach that involves theming changes to color and type.

This iteration also helped us uncover an insight about long-term goals section — It was too prominent taking focus away from stage goals and activities, even though this section wouldn't be interacted with often.

So I reworked its look, made the section sticky and moved it to the bottom of the screen. This way it will always be in the view with the option to hover over and reveal more information about a particular long-term goal.

Now, having all requirements and a complete information architecture plan I was able to create wireframes for each of the Wayble Way dashboard variants with consistent navigation and interactive elements.

After redesigning Wayble Way dashboard, questionnaire and survey flows and other elements a number of times we finally arrived at v1.0 which made its way into production!

We will continue improving it based on institutions and students' feedback as we get more insights on how it is being used.

Wayble Way also accommodates theming for a number of interactive and decorative elements based on the institution style guide helping make experience consistent.

As for the hand-off to the development team, I created an implementation guide that explains how to apply styles to certain visual elements to allow support of theming feature. Here are a few screens from implementation guide:

• Wayble Way is an AI assistant that creates a custom action plan for students (goals and activities) based on provided information.
• Students complete their goals and acitvities to advance through stages defined by institution admins.
• Activities are various tasks that help students navigate their academic and personal lives.
• Wayble Way supports custom theming based on institution's brand guidelines (fonts, color palette).
  
• Institution admins have the option to copy Wayble Way's default set-up or create their own stages and connect goals and tasks they want to associate with it.