Victory Fejokwu Osagie logo Contact Me
← All work

UX Design · Website Redesign

Sonatype

Redesigning my.sonatype to improve navigation, accessibility, and discovery of learning resources.

Client

Sonatype

Role

UX Designer · Sole UX designer

Platform

Web · Mobile

Redesigned my.sonatype homepage displayed on a laptop
01

Overview

I was the single UX Designer on the team tasked with redesigning pages on the my.sonatype website, along with internal client-facing pages for account holders. My role was to make the experience more user-friendly and accessible, and to streamline users' workflows and paths through the site.

02

The design scope

The work covered the homepage, top navigation, and the Learn experience, including search results and learning resources organized by product or role. The redesign needed to bring frequently accessed information closer to the top of the homepage and let users refine learning resources without returning to the previous page.

03

The approach

I began with a card sorting exercise to inform the order of pages in the top navigation. The conversations that followed, together with analytics showing the most-accessed pages, helped clarify which information to promote near the top of the homepage.

I explored four low-fidelity homepage options. After feedback from my managers and the product design team, I combined elements from those options into high-fidelity wireframes and sent the designs and requirements to the front-end developers.

For the Learn page, I progressed from wireframes through two high-fidelity iterations, then designed search and filtering by product or role. Feedback from the customer education team led to side filters on the results pages so users could refine their selections without going back. I also created mobile versions of the role-filtered experience.

01 / SCREEN DESIGNS

The old homepage

The original experience before the navigation and homepage redesign.

Original homepage — top section
Original homepage — middle section
Original homepage — lower section

02 / SCREEN DESIGNS

Four homepage directions

Low-fidelity options explored during the homepage wireframing process.

Homepage wireframe — option 1
Homepage wireframe — option 2
Homepage wireframe — option 3
Homepage wireframe — option 4

03 / SCREEN DESIGNS

High-fidelity homepage

A combination of the earlier directions, refined after feedback from managers and the product design team.

Edited homepage design
High-fidelity homepage

04 / SCREEN DESIGNS

Learn page redesign

The Learn experience evolved from a wireframe through two high-fidelity iterations.

Learn page — low-fidelity wireframe
Learn page — first iteration
Learn page — second iteration

05 / SCREEN DESIGNS

Search, products & roles

Users select a product or role to find relevant learning resources. Product results organize materials into course and video categories.

Learn search results
Product and role selection — both dropdowns shown
Learning resources filtered by product
Learning resources filtered by role

06 / SCREEN DESIGNS

Refining results in place

Customer education feedback led to product and role filters on the results pages, removing the need to return to the previous screen.

Product results with side filters
Role results with side filters

07 / SCREEN DESIGNS

Mobile versions

The role-based learning experience on mobile. The original screen's breadcrumb should read Filters / By Role.

Mobile role-filtered experience
Mobile learning resources by role
04

Final deliverables

The design work included homepage explorations and high-fidelity designs handed off with requirements to front-end developers, plus Learn page iterations, search results, product and role filtering, and mobile layouts. The final filter designs incorporated customer education feedback directly into the results pages.

Deliverables

Card sortingNavigation structureLow-fidelity wireframesHigh-fidelity designsLearn page redesignSearch & filteringMobile layoutsDeveloper handoff
View original case study ↗Co-AI Founder homepage hero reading Build Smarter. Launch Sooner.

Next case study

Co-AI Founder

Website design and build for the world's first AI entrepreneurial program for students.

→