Student Organization Website Redesign

Problem Overview

This is Stanford University's Student Organization list page. When I first start researching information about their student organization list, I found out that all they did is to list out all the student organization at Stanford University by categories. It is hard for people to go through the whole page to find information that they need. 

This design exercise can help with this problem, it will provide a clear search function for the user to browse and search the Student Organization's list, to help them to locate information by their need. 

​Another problem that we are helping to improve is to register a student organization, whether it is apply to register a new organization or to re-register an existing student organization. 

Day 1

Research

A student organization page is usually linked with the school's student involvement office. The web page itself should provide several office functionalities to help with students to get involved with student organizations and school events. 

Student involvements and activities office usually includes several office services including a student organization search and browse, create student organization, office resources, including student forms and notes for student applications and other notes that people should be concerned about. The office contact information is also an important page to be included. 

I also started to think about some how might we questions, 

HMW create a site that is easy for student use?

HMW help student locate their favorite organization information?

HMW help students to register/re-register a club by shorten their application process?

​

With all that in mind, I started to think about an interactive search/filter function for students to search and browse student clubs either type to search or browse by categories. 

Another pain point is to create an easy online portal to help student leaders to fill out their required form and information online and include all student leader training content on the same website.

Day 2

Sketching

I started sketching some design ideas, the first design idea is to follow the school's website design, like all other school office websites, including a logo, office contact info, a navigation bar and a list of student organizations and logos.

The problem with this design is that the web page itself included too much information on the same website, I started to think what can I do to cut down some information on the first page, to make this a minimalist design, yet still usable with all other functions.

The second design becomes more simple. The site itself contains way less information than the first design. A menu button now has all the pages that was originally in the navigation bar functions. A small search button, an interactive filter and the most frequently searched student organizations.  

Day 3

IA & Mockups

The next step is to start create a prototype for this product. I started out creating the information architecture for this website and decided to use Balsamiq to draw out the mockups for it.

Site Information Architecture

Based on my information architect sketches, I began to create a wireframe for several main pages using Balsamiq. I created wireframe for a desktop version mockup. Below is a few of the wireframes I created for the desktop home page. I have also included the PDF document for all wireframes which you can find through this link.

Click here to check out the wireframe

Day 4

Prototyping

I contacted two student organization leaders who I know from my undergrad. Apparently they really need this type of service, so I asked if they would like to do user testing with me. This is better than asking random students on the streets, not all students like to participate in a student organization. I asked them to try the original low fidelity wireframe prototype that I made using Balsamiq. 

Positive Feedback:

1. They loved an online system that they can fill out all information that is required simply on an online form. 

2. Lilas liked this idea a lot, with an interactive search filter, the web page is a lot clearer for them to find information

3. Rob liked the fact that the prototype separated register and re-register for a student organization. He mentioned that these are two different forms and some times with different prerequisites to watch/read.

​

Negative Feedback:

1. The original design only included a name and logo for the organization, Lilas suggested that some students are browsing to look for organizations, it would be better to include some basic description.

2. There is no details for the organization, there is no way for a user to get the ways of contact to connect with them. 

3. The search page is clean, but a suggestion for recent popular search would be nice.

After I got these feedback from them, I started to work on a high fidelity prototype for a second round of user test. I changed some of the design as well, the search page now not only can let the user search, it will also suggest popular searches from the school, or "Top Search of Today".

The club information now includes not only the organization name, but also the organization category, their location and a pop-up page for check out more tailed information about the organization.

I was able to call those organization leaders back to do another testing. 

Positive Feedback:

1. The visual presentation is clear, they know what to do for browsing, searching. And the action button for register is not hard to find. 

2. The original not focused drop-down filter looked like a disabled drop-down, it's good to see some visual improvement.

​

Negative Feedback:

1. Add a save button for the form. It would be helpful if the user can save the form during the process, sometimes people got busy they can't finish the form on time.

2. The visual need some improvement.

3. The form can also add a page number, so the users can be reminded that how many pages that's left. 

4. Try a different layout, for example, a mobile version or a larger web page.

Click here to try out the prototype

Further more

My proposals for the next design:

• Add a page number for the form, including a progress bar as well

• Add a save button for user to save the form

• Visual improvements, change the layout, redesign the visual graphics

Day 5

Reflection

This exercise is the first time I have tried to finish a design exercise within a really short time frame. Unlike the usual things that I do in school, this is an easy way for people to brainstorm and conduct a workshop to create an initial design in a short amount of time. There are definitely some other stuff I would definitely like to change. My visual design is never my strong suit, I would like to improve my visual design by getting more experience. But I love to brainstorm and studying about what we can do for our users. I am happy with my current result, even though there is still a lot to improve.