Wakelet

A digital curation platform with over 3.5 million monthly active users, predominantly used within education. The platform allows teachers and students to organise content for easy access with use cases ranging from group research and student portfolios to lesson planning and even school newsletters.

Services.

UX Design
UI Design

Timeline.

4 Months
Contact

The Problem.

50% of new users dropped off before they even created their first collection and the same issues were being raised to the support team time and time again.

In order to monetise the platform, we identified 4 overarching problems which would need to be solved first.

Speed & Performance
Poor User Experience
Inconsistent User Interface
Lack of Accessibility

My Role.

I worked in-house with the design team for web, alongside 2 senior UX designers – communicating heavily with the dev teams, brand/marketing and product managers throughout the process.

Projects.

1.
Redesign the User Library
2.
Help create the Atomic Design System
3.
Designing the Classrooms UI

Redesigning the User Library.

Public Profile
Collection Page
User Library
Classrooms

Over 12 months, the Wakelet web app would need to be redesigned and rebuilt from the ground up to improve the speed, performance and accessibility.

Jam (CEO) brought me on 6 months into this process and first tasked me with giving some much-needed TLC to a central part of the product – the User Library.

Design Concepts.

V1
V2
V3
V4
Onboarding Exploration

Unrestrained by development logistics, I took the ideas and thinking of the entire design team and quickly created an ideation concept of what we’d like the experience to look like for new users.

Like for like

Due to the engineering demands of Classrooms – the monetised arm of Wakelet – the product managers’ thinking turned more towards keeping the functionality of the site the same, focussing purely on a ‘like for like’ React build with the design addition being a polished UI.

Introducing the Sidebar

We needed to create a quicker way for users to navigate and interact with their content. So we decided to meet half way and release a couple of new features with what we were now calling ‘New Web’.

The sidebar was the single most discussed feature from day one of my contract, and after prototyping how it could feasibly work, I was given the green light to factor it in to the designs.

A Cleaner Navigation Schema

After presenting our case for a sidebar, management was on board, but making the experience consistent between all devices and views meant rethinking the schema. What we ended up was a clean UI which could could inform the any UI changes or additions moving forward.

Incorporating the Schema Product-Wide.

Finished Designs.

Over 12 months, the Wakelet web app would need to be redesigned and rebuilt from the ground up to improve the speed, performance and accessibility.

Jam (CEO) brought me on 6 months into this process and first tasked me with giving some much-needed TLC to a central part of the product – the User Library.

Creating an Atomic Design System.

As a design team, we needed to refine our design system to help keep our output consistent, and easily translatable to the Storybook-based UI kit – the source of truth for the engineering team.

While researching, we found Atomic Design Methodology and knew straight away this was exactly what we needed.

Design Tokens & Atom Components.

We broke this project down between us relevant to our experience and strengths.  Given my attention to detail and vast experience with web development, we agreed that I would own the following areas within the Design Tokens and Atom levels:

1.
Iconography
2.
Typography
3.
Dropdown Menus
4.
Inputs
5.
Sidebar Tabs
6.
Buttons

Designing the Classrooms UI.

The vision for Classrooms was to take the functionality of Wakelet and supercharge it for education, making it easier for teachers to:

Share a collection with the entire class
Set activities and track student progress
Review and mark student work
Bulk import students from Microsoft, Google Classrooms or Clever.

I worked closely with the EdTech team, turning the their user flows and wireframes into a production ready UI which was consistent with our new design system and User Library views.

Selection of Signed-Off Designs

"Such a great experience working with the Fort & Co team. As a creative, talented and proactive designer, Mike has a real flair for designing a creative user experience."
Jam Khalil
Founder & CEO