OUTLIER DATABASE
JIU JITSU WEBSITE
Assisting Brazilian Jiu-Jitsu coaches
to share accurate information with students
ROLE
UX/UI DESIGNER
RESEACHER
THE TEAM
1 UI DESIGNER
3 UX DESIGNERS
TIMELINE
3 WEEKS
About Outlier Database
Updated colors
Outlier Databse has built a one-of-a-kind database of content for coaches and students to improve their sport.Our goal is to to rebuild their folders system, to allow coaches to have a more centralized location to plan their lessons and share resources with their students. Additionally, we aimed to provide coaches
and students with a quick and easy way to share information and communicate outside of class.
The initial step was to review their site and pinpoint areas for improvement. Outlier DB asked us to prioritize organizing the folder structure to efficiently streamline all the Jiu-Jitsu content available online.
Identified a few issues with the current site, particularly with the color scheme. There are
far too many shades of green—so much so that even Kermit the Frog might not approve!
Kept our color scheme simple, utilizing an off-black, white and green palette, all of which passed contrast testing. This streamlining of colors also made the visuals easier for our users to absorb.
Typography
Characters
Thin Bold Italic
Aa
Roboto
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0123456789! # $ % % / ( ) @ = ?, . –
Based our design on the existing website with some updates from our accessibility testing results. For our typeface, we kept Outlier’s Roboto for its readability.
Our body text is industry standard at 16px and we used larger sizes and boldface type for our headers.
​
Enhanced the green to serve as a striking accent, complementing both our website and Outlier's branding.
The result of our revised color scheme now passes contrast testing. With test results and user callouts in mind and the new Design Guide in place, we set about improving our design.
Inspirations
It ain't easy desiging with green, so I sought inspiration from other websites to see how it could be done effectively! But figured out ways to add more colors.
Primacy colors
Added color options to the folders, not only for aesthetic appeal but also as a way to help users organize and categorize content more effectively, aiding memory retention.
Adding other colors and icons
New Navigation Design
Designed a side navigation to highlight the logo and enhance the ease of navigation and readability.
The old navigation bar was difficult to read and lacked some essential information.
​
These icons will be positioned on the far right.
Notifications will alert the student or coach when the icon appears like this.
_edited_edited.jpg)
To ensure coaches can monitor their students effectively, the site will help
them keep track of each individual. It is likely that this site will eventually evolve into an app. (FIngers crossed)
These check marks indicate when a student has completed their homework. Students can also communicate with
their coach after engaging with the content provided.
These icons will indicate whether the coach is supplying the appropriate materials for the students to review.​
​​
Other notifications will all show up as. drop-down menu from the "Bell Icon." So it can be like a checkoff list for the coach and not be so overwhelmed.
​
​
​
I could go on about the other ideas we had for this site, but with only three weeks, time was limited. However, I wanted to share this final concept—helping users find Jiu Jitsu gyms while traveling. It's also
a great way to promote other gyms and connect with the Jiu Jitsu community wherever you go.​
​
One last thing—I designed this logo/icon because everyone we interviewed talked about how easy it is to catch the Jiu Jitsu bug! I hope they decide to use it, though it only made it into our presentation to the client.
Thanks for letting me BUG YOU! :)