Projects About Connect

    Projects About Connect

Mobile Application Concept

Wǔshù

Self-promotion

2016

Art Direction

Interaction Design (IxD)

Strategy

User Interface Design (UI)

Adobe Illustrator

InVision

  • The Overview

Wǔshù is a free social networking mobile application for helping people find local martial arts schools and businesses that sell martial arts merchandise. The app is aesthetically similar to Yelp and Foursquare, with an emphasis on user reviews and locations. Considering that this is quite possibly the only app I have seen that focuses on this specific niche audience, I wanted to explore this unique experience.

Share Facebook  +  Twitter

Preview
  • The Challenge

The focus of the project was to build a platform based around the search page, while the challenge was in implementing an easy and fast way for people, groups and businesses (the primary typologies of users) to review and interact together.

Using a user-centric approach, I designed a set of shortcuts like an advanced search page, a detailed map and list-view filter (which filters schools and businesses through various categories, such as ratings and relevance), contextual popups, and tutorials, giving users the fastest search experience.

Profiles were also added, which users can showcase their experiences with local schools, customize and update their profiles, and connect or contact others they may know.

The idea for this app derived from my own pursuit in finding a suitable Martial Arts school to extend my boxing prowess. I'm a sponge when it comes to Martial Arts styles, while learning and teaching others (students, experts, etc.) has become a beneficial experience I will always make use of.

  • Screenshots: UI Sketches
  • Screenshots: UI Sketches
  • Screenshots: UI Sketches
  • The Process

I conducted a series of interviews with local martial artists, businesses and designers to help understand their own interests and concerns with similar apps. Doing so provided me with crucial insights into constructing a viable experience that was not only welcoming, but informative.

A/B testing and extensive user research on everything from the visual style, the information provided and even the color palette were carefully thought through.

Primary Color Choice  
Wǔshù - Primary Color Choice
“To me, the extraordinary aspect of martial arts lies in its simplicity. The easy way is also the right way, and martial arts is nothing at all special; the closer to the true way of martial arts, the less wastage of expression there is.”

•  Bruce Lee
Overlay
“Of old the expert in battle would first make himself invincible and then wait for his enemy to expose his vulnerability.”

•  Sun Tzu
Logo Variations  
Wǔshù - Logo Variations
DIN Condensed Bold

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
1 2 3 4 5 6 7 8 9

Helvetica Neue

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
1 2 3 4 5 6 7 8 9

Color Palette  

The color palette reflects what most people associate with martial arts… Red, for its emotional and impactful presence. Red was chosen as the primary color, while black, white and two shades of gray filled the rest of the spectrum. Maintaining a uniformity of white space and simplicity helps to eliminate any irregular choices in color.

Inspiration ranged from sites like Mobile Patterns and Inspired UI to past responsive websites I have created and/or collaborated with.

  • #FFFFFF
  • (255,255,255)
  • 0,0,0,0
  • #999999
  • (153,153,153)
  • 43,35,35,1
  • #808080
  • (128,128,128)
  • 52,43,43,8
  • #000000
  • (0,0,0)
  • 75,68,67,90
  • #BF1111
  • (191,17,17)
  • 17,100,100,8
  • The Solution

I conducted a series of interviews with local martial artists, businesses and designers to help understand their own interests and concerns with similar apps. Doing so provided me with crucial insights into constructing a viable experience that was not only welcoming, but informative.

A/B testing and extensive user research on everything from the visual style, the information provided and even the color palette were carefully thought through.

  • Screenshots: Loading & Sign Up
  • Screenshots: Loading & Sign Up
Loading & Sign Up  

Upon opening the app, you will be presented with Welcome screen. You can either sign up (through Facebook or Twitter) or sign up (using an email address). Follow the step-by-step process and you're in.

  • Screenshots: Home & Search
  • Screenshots: Home & Search
Home & Search  

Once logged in, you’re presented with the home screen (which is tailored around the search engine) where you can see the top martial arts schools within their country. Based on your location, you can also see schools near you, suggestions and trending locations based upon ratings, relevance, distance, price, etc.

***NOTE:
Most features like reviewing, creating a profile, adding images to schools/businesses, and maintaining your favorites require an account, when the primary features like finding locations, sending feedback, help, and settings will not require an account.

Screenshots: Explore
Explore  

This tab shows you the top ten martial arts styles in alphabetical order, which you can explore by various sub-categories (such as Fitness, Self Defense, and Personal Training) to further expand or filter your search.

  • Screenshots: Map & Reviews
  • Screenshots: Map & Reviews
Map & Reviews  

Within the map view (which uses your location to search for nearby schools and businesses), you can see all of the locations near you. You can search using your voice and even reload your search at any time. Once you find a school of interest, you can view their information while being able to save, share and get directions. In addition, you can view recent reviews from other users and also add a review based on your experience with said school or business.

  • Screenshots: Profile
  • Screenshots: Profile
Profile  

Your profile is your dojo… meaning that you can tailor it based on your preferences in what is or not displayed (such as photos, videos, etc.). A brief biography, photos and videos, lectures and so much more. In addition, you can view and respond to messages sent, while also viewing reviews you’ve added to the site.

  • Screenshots: Settings
  • Screenshots: Settings
Settings  

Within the settings screen, you can connect your social networking sites and email to the Wǔshù app, easily toggle notifications, tell your friends about Wǔshù, learn more about the app, and much more.

  • The Results

The biggest challenge in creating this application was ironically the search page, which is the primary focus. Expansion within this area can be tremendous depending on how deep in detail one would want to develop.

After all, with prior experience wireframing UI applications for companies, I wanted to test myself in developing a new and unique property that would make a world of difference for everyone involved in martial arts.

In addition, I also wanted to assist in furthering my understanding and thought process on how mobile applications are formulated, structured, and created.

After further analysis, I plan to expand this project for tablets and desktop resolutions to further grasp the hurdles of app development (which one day will become a fully functional application for every potential and/or existing martial artist who are searching/planning to further their knowledge and zen).

Interesting in working together?