Close
Projects
View Resume
JACK
TOLLMAN

COMPASS

Guided tool to help any designer independently learn skills by pooling together free online resources.
Role
User Research, Interaction, Visual design, Prototyping & testing
Pocket Pantry
Education Application

Compass

Overview

A free online education platform that focuses on creating clear learning objectives in order to guide users with with their remote learning.

Role

User Research, Interaction, Visual design, Prototyping & testing

Problem

Learning a new trade independently can be a daunting task. With a vast range of online education platforms it can be difficult to know which may be the best one for you. Using a range of different websites or videos can cause users to miss out on essential topics. It’s important to make sure you are taking the right classes and using your time the most effectively to advance your general understanding of a topic.

Solution

Compass aids independent learners to visualize their progress with clear roadmaps of important skills to learn. Each roadmap consists of a carefully curated selection of the best free to learn online tools. The selection of online tutorials is curated to be a guided user friendly tool to help any designer, from beginners to professionals, to learn new design skills with ease. 


Feature 1

Research

Search between the list of topics or softwares that you want to learn more about. 

Feature 2

Learn

Follow our carefully curated selection of the best free to learn online tools
Feature 3

Community

Discuss topics and ask questions with other students following the same course.
Feature 4

Job Search

View listings of relevant job positions that are available for you to easily apply.

DESIGN
PROCESS

Research

In order to understand the motivations of our users we initially developed a range of different personas. These personas consisted of people that had a variety of different levels of design knowledge starting from inexperienced all the way to professionals. By considering these different lifestyles it helped us to empathize with the pain points one might experience when using online learning software.

Wireframes

Design Guidelines

After creating a clear sense of cohesion with our wireframes we were then able to consider the design guidelines for our app. We decided that the primary color should be blue, this is because of its ability to elicit a calming emotional response making it easier for people to learn new topics. For our highlight color we used orange in order to create a sense of urgency when being notified with alerts. Our font choice was Raleway because of its clean and still playful look.

Logo Sketches

Final Logo Design

App Icon

FINAL
PRODUCT

We designed the UI to be clean and minimalistic by using flat illustrations and crisp edges throughout the interface. On each page we developed a clear sense of hierarchy using headlines and call to action buttons in order to give an effortless user experience whilst using our app.