Re-Design of Stephan Kesting's "RoadMap to Brazilian Jiu-Jitsu" App
I started practicing Brazilian Jiu-Jitsu in 2014 and one of the first black belts I started following online was Stephan Kesting. I really dropped into BJJ at a prime time-- there are SO many apps, videos, tutorials, and forums out there at our disposal to supplement our training. Kesting is one of the best, as he breaks down moves and concepts for beginners. His site was a huge part in my development.
I downloaded his free "Roadmap to Brazilian Jiu-Jitsu" app and saw immediate improvements that could be made to the interface:
First off, let me preface this by saying I LOVE Stephan Kesting's blog, channel, and app. All his resources are rich with content and this is in no way an attack on his work. My observations here are just on the interface alone. ("Don't hate me, Stephan" is basically what I'm tryin' to say here.) My immediate notes:
- Videos vs Categories aren't clear. As you can see on screen 1 above, "The Big Picture" actually takes you straight to a video and the sections underneath starting with "Closed Guard" are categories that open up links to the videos on screen 3. While the small arrows on the right show some indication, this wasn't immediately obvious to me as a user.
- The thumbnails for each item looked exactly the same so I assumed that they were ALL videos after I clicked on "The Big Picture."
- This is more nitpicky but I think it would be a visual improvement if there was more padding between the thumbnails and the title/descriptions.
- There were also other links to other services, i.e. screen 2, that looked like the videos and categories.
- The listed videos within the categories on screen 3 should be sorted for easier use.
I sketched out a couple of ideas based on my observations:
Finally, I came up with these wireframes:
These were VERY quickly thrown together, so don't mind the actual text.
Screen 1 is a loading screen, Screen 2 is the home page, and Screen 3 shows the list of videos within a category. I made a clearer visual distinction between video vs. category by making the video thumbnails circular and moved them to the right of the screen whereas all category thumbnails are squares shifted to the left side of the screen.
Within each category, the videos have been shuffled into their respective sections as well, i.e. basics, defenses, and submissions. Sorting them will lend better usability regardless of the end user's level. A novice can easily locate the breakdown of the move whereas an intermediate BJJ practitioner may want to simply review submissions from that particular position. The sections can also prevent user overwhelm and tedious searching.
Improvements don't always require a huge design overhaul. Sometimes, the solution(s) can be quite simple.