Utilizing the design process to bring life to the 10th Planet Jiu-Jitsu online experience.
The Design Process
Before designing a new website for 10thPlanetJJ.com, we begin with the Planning Phase in which I had to study the current website in order to answer a few questions. First, what is the purpose of the website? Second, what are the issues with the current design? Last, what are the end goals for the redesign? After answering these questions, we will move onto the Design Phase.
Planning Phase
What is the purpose of the website?
When thinking about who are the users of the 10th Planet website, it becomes clear that the purpose of the current website is two-fold:
- Marketing (New Users)— Find a location or Sign up for Pro membership
- Member Portal (Existing Users)— Log In to access premium video content & forums
BUT, there is potential here for a 3rd purpose in our redesign:
3. News/Community (All Users)— A destination for all 10th Planet related news and events with social media integration pulling sources from Instagram, Twitter, Facebook, and YouTube
The current homepage for 10thplanetjj.com
What are the issues with the current design?
- Lack of focus/hierarchy
- Upon first visit, the user isn’t clearly directed on what to do
- Doesn’t communicate what 10th Planet Jiu-Jitsu is
- What is Jiu-Jitsu?
- How does the 10th Planet system differ?
- What are the benefits?
- Benefits of Pro membership could be called out more
- Why should I sign up?
- Site feels dead and rarely updated
What are the end goals?
Goals of the new design and what the end user will experience/perceive:
- Focused actions and navigation, emphasized hierarchy
- Simple, concise, focus on clearly displaying primary and secondary info
- Clear visuals, high res photos, 10th Planet space/alien theme
- Inject life and excitement into the brand’s online presence by providing community features
Design Phase
Next is creating the wireframe/layout for the new design. I opted to work within the constraints of the current content to keep the website practical instead of taking the easy route of removing any element I didn’t like. This doesn’t allow me to create an ideal or radical design but is much more realistic. I started by outlining all the current elements.
Basic Layout & Navigation
- Logo & Nav menu
- Header/Jumbotron
- Mastering the System
- Newsfeed —Twitter, Blog updates, etc.
- Featured school
- Sign Up links— Join Pro to get access to entire library of Mastering the System
The wireframe is created next by implementing these existing elements in a cohesive and rational layout. Once that is complete, I applied a design on top of the layout. This includes creating a style guide, adding visuals cues and content (images & text) to get a better feel for the final design. In this phase, a lot of iterations are most likely necessary while stepping back and analyzing the design yourself, as well as, utilizing feedback from others. This is where I actually had to experiment with different layouts as the one I started with didn’t achieve the end goals I had set. This feedback loop process continues until you feel the purpose and goals set forth in the Planning Phase are met.
Early Design Iterations:
The design process took multiple iterations before reaching the final design.
Final Design Results
New Features Implemented:
- Easy access of user Login and Sign Up links in right-hand corner
- Large, full-width header to display images & text representing the brand’s image and culture
- Added onboarding with a centralized “What is 10th Planet Jiu-Jitsu?” introduction video for unfamiliar new users
- Created labels to promptly indicate and advertise PRO access for membership gated content
- Added social media icons to promote awareness of brand presence on social networks and proliferate brand following
- Main content area displays a featured announcements content slider followed by a robust News Feed (with tab filters) displaying content cards aggregated from several curated sources
- Right sidebar displays a single column with a prominent Featured location, followed by Recent Discussions from the Forum to promote active community topics
- Footer reiterates menu links and social links for user convenience. It also exhibits a moon surface background image to tie the 10th Planet theme together
- Additionally: Redesigned all sub-pages (Videos, Shop, Locations and added an About page to tell the history of 10PJJ)
[View Demo]
