Michael Rubini - UX/UI Designer
Michael Rubini – UI/UX Designer
Thumbs.png

Bluejacketeer

 

Bluejacketeer

 

Bluejacketeer is a system that helps sailors study for the Navy-Wide Advancement Exam by using a learning technique known as spaced repetition, commonly used by companies such as Duolingo or Anki.

I was tasked to redesign and improve the user experience of Bluejacketeer's product to properly communicate its benefits while offering a more modern, welcoming look to their users.

Bluejacketeer targets a very niche market which I didn't know much about. I started by talking with the CEO to know more about their product, users, offering, goals, and pain points they were experiencing and trying to solve. 

 

My responsibilities:

• UX/UI

• Iconography


 

Before

Overall, the amount of text, lack of images and whitespace made the website look busy, it was very difficult to communicate the product offer and benefits in a clear and fast way.

Visually, the site looked outdated, which has been shown to impact how reliable a product is perceived and one of the main questions potential users were having.

 
Before.png
 

Redesign

Simplifying the content on the homepage allowed to keep focus on the benefits, creating chunks of content that were easier to scan and communicated the idea quickly while keeping the user engaged.

Using good amounts of whitespace gives the content plenty of breathing room and helps improve the overall readability of the site.

I took several shades of blue that were already present in the logo but were not being used, which allowed me to add some variety to the visual design by using color overlays, shapes and shadows. 

The use of icons and images complemented the content, functioning as a visual guide and a tool to better engage with the user.

 
Homepage
 

Dashboard

Before

The two main test were fixed to the top of the page while the two main study areas were stacked and there was no way to collapse the content to reach the second test area easily, the only way was a long vertical scroll which was a less than ideal option. 

Each test has two main study areas users had to follow according to the type of rank they were studying for. After they choose one they are presented with all the related study material. 

The content has an extensive list of topics and subtopics, thus, the need to organize it in a way that was accessible so the users could navigate and easily find the topic they were looking for.

 
 
 

Redesign

Taking all that information into account, a new layout for the dashboard was proposed. The main navigation was moved to the left, giving users quick access to the test they were studying for. This decision made possible to better use the space by moving all secondary navigation to the right which not only allowed more content to be displayed on the screen but also provided important information without cluttering the UI.

There was no clear indication that the user could download a pdf with additional information for each topic and subtopic. We brought the option to the front by adding a button to each topic and let users download all the PDFs for a chosen topic at once, or, individually download the PDF for each subtopic in case the user were looking for a specific material.

 
Dashboard_Desktop_Michael.png
 

Bluejacketeer promotes daily practice to get the most out of their platform. To encourage this, elements of gamification like a points system and a daily streak counter were added. This helps increase engagement, provides a sense of achievement and motivates the user to take action and keep using the product.

 

Study Page

The study page was given lots of whitespace to focus the attention on the question and answers (in the case of the multiple choice mode) as well on the additional supportive material.

The user has two options to study the material, multiple choice or flashcard mode. The Flashcard mode was a new addition to the project so there wasn't a reference that I could build upon, that also meant that I had the freedom to come up with a solution for this mode. The UI was created to provide the same amount of information and experience on both desktop and mobile devices.

 

Multiple choice

Multiple Choice
 

Flashcard

Flashcard
 

Users were having problems choosing the right plan for the test they were studying for, often times leading users to choose the wrong option and although users could change it later on, it was creating unnecessary friction at a crucial stage.

Before the redesign, users could only choose the rate they were studying for, omitting important information needed to help them make the right decision. The solution was to add several selectors to give the user the ability to choose in detail their rate, rank and exam type.

Pricing page

 
 
 
 

These new options were arranged in two separate categories for easier scannability. Since the additional options added were few, it made more sense to use radio buttons to keep them visible instead of hiding them in a dropdown, making the form easier to scan.

 

Checkout

The checkout process was also improved by simplifying the form and organizing it into sections, clearly communicating field requirements to avoid unnecessary errors and reduce cart abandonment. Adding first party logos (Powered by Stripe) helps ease the user about sharing sensible information.

A summary was added to the right hand of the screen to show the user's order and total cost, reducing the chance of abandonment because of hidden costs. The option to change the exam type and plan was also added to provide a quick way to edit the user selection before placing an order.

 
 
Definition page
 

 

Takeaways

One of the main obstacle when it came to organizing all the study material, was how extensive and deep some topics could get, each with several subtopics and supporting material that needed to be accessible to the user, thus, it was important to understand how the topics related to each other and organize the information in a way that made sense for the user whether they were new to the platform or not.

Constant communication with stakeholders was important to achieve this goal, asking questions about how the product worked, where users were experiencing friction and possible solutions to given problems.