Wayble is a comprehensive digital platform for international students used by dozens institutions across Canada. It provides variety of tools like job search board, collection of blogs, videos, templates, mentorship program, etc. for the students to succeed on their journey. Wayble also saves time for colleges and universities and makes it is easier to support their students.
In August 2024 Wayble realized they were in need of UX/UI support to continue growing their digital platform. They asked me to redesign platform's main components and then provide an ongoing support for new features.
My first priority was to create and structure Figma file where their design ecosystem will live from now. Prior to that, Wayble didn't have any design guidelines or references for development. My aim is to establish basic guidelines and component library, keep it lean and add design artifacts on as-needed basis. Since it's a start-up environment we want to keep it agile and iterate quickly.
I started redesign with the navigation menu and top bar components. Improvements included:
- Side navbar can now be collapsed to allow for more screen space- Multiple variants for various device sizes (desktop, laptop and mobile)
- Refined icons fit in better with the brand and are balanced visually (all icons have standard container size but can are sized differently inside of it
- Clear navigation with visual indicators
Every (or almost every) digital platform needs its main screen, its home page that provides a quick overview and captures product's personality.
Working together with Wayble's management team, we went through multiple iterations of dashboard gradually refining functionality and positioning of sections that would guide users towards desired set of actions.
Adopted grid structure allows to swap or remove sections based on where students are in their academic journey (i.e. job search aren't available) and makes it significantly easier to optimize for responsiveness.
Next in line was an individual job posting page redesign since platform just introduced Wayble Pro (paid monthly subscription) and its new 'job insights' feature that provides students with details about specific occupation based on labour market information.
I worked on improving information organization and visual style, as well as adding new feature for paid users.
Main column features information provided by the employer or pulled from the employer site while small right column stays sticky on the scroll. This allows for core job details to always stay in focus.
In November 2024 we started working on the new feature that will become a centerpiece of Wayble platform - Wayble Way. An AI assitant that will create tailored set of activities and goals for each student.
Since it was a massive undertaking, we began with brainstorming and feature ideation to see how proposed features and ideas fit together. This led us to imagine how dashboards will change for students based on their journey progress and what sections will need to be added or removed.
Then after a series of meetings and discussions, a technical document was put together outlining pages, definitions, backend structure, navigation, interactivity and how parts of the system relate to each other. Based on this comprehensive document I put together a set of low-fidelity wireframes gradually refining them based on feedback sessions. I ended up creating wireframes and flows for both sides on the platform:
What majority of users will see when interacting with Wayble AI. Screens include onboarding, questionnaires, dashboard, contextual pop-ups, and exit survey.
User flows and screens dedicated to managing Wayble AI at university / college level. Here admins will be able to define student experience by creating their own version of Wayble Way. Functionality includes creating or updating an existing templates for stages, goals, activities and more (acts as a basic CMS).
Currently, we are in the final stages of implementing Wayble AI feature that should be released in the coming months. Stay tuned for updates!
