Design Process: Davis Wushu Website

Following the success of an amazingly productive and fun year for Davis Wushu, a student organization at UC Davis whose goal is to promote, inspire, educate, and compete in wushu, it was time to look to future goals for the club and analyze how this year could have been better.

For those who don’t know what wushu is, wushu is performance Chinese martial art and is a contemporary sport. There are many styles of wushu that can be performed in competitions such as long fist, southern fist, tiger claw, and drunken fist, as well as a number of other forms including weapons such as staff, straight sword, chain whip, and more. Although there are many different styles, all wushu forms require a great amount of flexibility and strength while demonstrating a flair of grace and power.

I. THE PROBLEM

As Public Relations Chair for the club for the 2014–2015 year, I felt the need for a website would not only contribute to our original goal of this year to become a more visible club on campus, but also to have more transparency in communication between board members and club members, and between the club and nonmembers. As a general poll, I found out that for the new members who tried to find us online, they would be directed to the DavisWiki page on Davis Wushu, which is unfortunately, heavily outdated and brief.

The most recent Wushu Collegiate tournament Davis Wushu attended was about a month ago, held at UC Irvine. It was the 19th annual tournament…

Other than the wiki page, our other online identity is our public Facebook page, which, although, is active and updated, the photos and banner are not.

Our board members, including myself, update the facebook page. Unfortunately the photos are not, and a facebook page just doesn’t do the sport of wushu justice.

II. THE STRUGGLE

In an effort to ameliorate our club’s online identity, during Winter quarter 2015, I decided to apply skills I learned from my interactive media class (DES117) and start wireframing and coding a personalized website for Davis Wushu. Having little to no experience in user interface and user experience design, my initial design from that project was a mixture of unorthodox, standard, and confusing. Originally, I had a navigation bar at the bottom of the screen with the Davis Wushu logo on the far left, and each page had the same full-screen banner with no hint to the user what action to do next (scroll down? click on navigation bar? click on logo?).

Each page had the same full screen banner, which was confusing, and the contents of each page were also generic and perhaps too overwhelming in information.

Spring quarter 2015, I decided to return to the Davis Wushu website project, determined to perfect the wireframes before presenting the site to the club, and with a new vision that the website would not only reflect what our club is like to potential members, but also what our club is like compared to wushu athletes across the nation as well as nonmembers who just want to know more about wushu.

III. THE SOLUTION

Taking a class entitled “Principles and Practice of User Experience,” I was prompted to start from scratch, although still building upon what I had learned from my initial wireframes. After conducting an interview with the vice president, Jenny Tang, and reviewing the flow of the initial design, I created three personas with goals, attitudes, and pain points:

1. Sally, the UC Davis Undergraduate Freshman

Reflects the potential new members for the club who are unfamiliar with both wushu and the Davis community.

1. Dan, the wushu veteran

Reflects potential new members as well as wushu athletes from other schools/studios/universities, who are already experienced in wushu, and are either interested in joining or learning more about Davis Wushu.

1. Kristen, the client

Reflects a usually older audience who are interested in contacting the club for scheduling performances and/or learning about our past performances/events.

The rough site maps included sorting out what information I felt was necessary and under what categories they appeared natural. Starting from a general word list, I branched out to a web and ended up cutting out a few categories.

For the wireframes, I was inspired by the Airbnb and Nature Conservatory websites, using full screen width photos for more immersion , and minimal actions to help the user to not feel overwhelmed with information. I decided to have a sticky navigation bar across the top with a full screen photo for the home page that either expressed an explosive and dynamic aesthetic to highlight the strengths of wushu or something communal and social to reflect the inviting and family-like atmosphere.

The final wireframes merged the two ideas of reflecting the dynamic style of wushu with the social aspect of the club to create a dramatic and more subtle representation of Davis Wushu. The final website was also heavily inspired by the recent club photoshoot we had at the Arboretum with photographer and member, Tiffany Chen, which added to the unity of the entire website. Sticking with the fullscreen photos for each page, the entire website is immersive and dynamic without being too explosive or overwhelming.

The homepage had the logo at the center, which prompts the user to hover over it, revealing the practice times for the current quarter.

All pages had the fullscreen photos for a more immersive and narrative feel to show more of not only the sport, but the social aspect of the club, as well. The result is a fun and subtly dramatic aesthetic.

Overall, I’m happy with the final mockups, although I believe I could always improve user flow. I feel that the personas would be satisfied, finding the contact page easy to navigate, the practice times easy to find, and they would all feel a sense of authenticity, professionalism, and acceptance from the website and the club. After this, I’d like to add in the newsletter and performances gallery, which are pages with slightly different layouts than this general standard.