top of page

Design Challenge

My Role: User research, User interview, Rapid prototype, 

wireframe and interface design.

​Time: 12h

iMac.png
The Prompt

A new school year is approaching and the orientation team is looking to you for some design expertise.

Design an experience for new students to browse, search, and propose new student organizations. Provide your overall process, a wireframe flow, and one to two screens at higher fidelity.

Ideation Before Research

At first, I started writing down ideas about student organization experience that I need to investigate, including targeted users, current searching, browsing and proposing experience and possible confusions students face in such experience, which provided me with the research path.

sketch1.jpeg
sketch2.jpeg
Define the problem
Define the problem

I divided the prompt into two sections, one is searching and browsing experience, the other is proposing new organization experience.

What's wrong with the new students' searching and browsing experience? First, I did some competitive analysis and survey to figure out the current experience.  

​Survey

Currently, for those students who have the intention to join organizations, they get to know student organizations mainly through club fair, student organization events and friends. However, the university has its own student organization website, only 33% of students use the website to search and browse organizations and only 10% of students use the website to apply even though the website lists over 1000 organizations in the University of Michigan(Survey). 

For those ones who don't want to join organizations, 60% of them thought they have no time, and 25% of them thought there are no interested organizations.

chat.png
Friends
group.png
Club Fair
calendar.png
​Organization Event

Competitive Analysis

When I did the research on current university organization website, I found out that the website listed all organizations with the title and a few paragraphs of description, students can search for organizations in the website. Also, students can register a new organization on the website, but seldom students do that.

 

So why students don't use the university organization website? 

User Interview
In order to figure out the deep reason, I decided to conduct user interviews. 
64627.jpg
"I still don't know what the organization do when I checked the information on the website"
"I don't know whether the organization suit for me "
 
"I join the organization only when I know it well, so I would go to their events or ask my friends' advice"
"I don't know how much time I should spend on organizations so I just choose not to join."
 
" Proposing a new organization is complicated."
"I totally don't know the process of proposing a new organization "
Main Insights:
  • Students join organizations only when they know organizations well. Students tend to attend events to know the organization.
  • The options of organizations are overwhelming.
  • Some students know what kinds of organizations they want to join, some are not sure.
  • New students have limited channel to know organizations, most of them can only ask senior students.
  • Most of the students don't know the process of proposing a new organization and think it is complicated. 
 
Goals:
According to the insights from interviews, I set the following goals:
  1. Help new students browse and search for organizations easily, avoid overwhelming information. 
  2. Help new students who don't know how to choose find organizations.
  3. Help students find organizations they like and match.
  4. Help students who want to propose new organizations learn about the process of proposing easily.
Design 
Sketches and wireframes
sketch wireframe1.jpeg
WechatIMG7131548710506_.pic_hd.jpg
WechatIMG7121548710498_.pic_hd.jpg

I sketched information architecture and wireframe in my notebook, including iterating ideas of the main features. I developed more detailed wireframe in Sketch like filter content, page transitions and feedback to users.

Group.jpg

Main Features

  • Organizations browse and search(filter): Satisfied goal 1.

  • Detailed information of organization(events information embedded): Satisfied goal 3.

  • Interest form: Satisfied goal 2.

  • Proposing new organizations onboarding. Satisfied goal 4.

Design Rationale
Interest form —— help students choose organizations
interest form group.jpg

Users open the website from the university official website so users will log in automatically, so I didn't make the LOGIN prototype. 

 

 

When users open the website they can choose to use filter directly, the filter includes type, campus, and interests. The filter setting comes from the survey results. 

 

 

The website has clear call outs at the top of the page. The banner is salient but won't take much space.  For those students who don't know how to choose, they can click the button in the banner to fill out the interest form. When they click "DONE" button, the page will show a progress bar to indicate the website is analyzing their data and show the progress which will give users positive feedback.

 

Organization detail —— help students make choice
Group 3.jpg

Users can see all of the organizations in the explore page, but when they choose a filter or fill out the interest form, users can see the related organizations top the bottom, reducing information overload to them.

 

When users click on each item, the page will jump to the organization page. Users will see the detailed information about the organizations, including a description in detail, the organizations' event and the photos of the organization.  The event feature is important because most of the users reflected they decided to join organizations only after they attended the events of the organization. Plus, events feature allows users to check featured events which help them make the decision as well. 

 

When users click on the events of organizations, they can see information in a pop-up, there isn't too much information to avoid information overload because users can explore the events when they experience in person.

Proposing new organizations onboarding 
Group 4.jpg

Users can finish the proposing process through a clear guide. The stepper on the top of the page would give users feedback of the progress, keeping the user moving in the process of using the web application. 

 

The questions set in the onboarding process prompt students to fill out more information related to the "tag used in the search process", students who search organizations will get more information about the organizations. 

 

When users finish the register,  a pop up will give users feedback, they can check the status of the proposing progress in membership page which can be opened in hamburger. In the hamburger, users can find their favorite organizations and RSVP events here as well. 

 

Why hamburger: I put the favorite feature, my events feature, membership feature and notification feature in hamburger to collapse navigation bar. On the one hand, the features in the hamburger are not frequently-used features, the hamburger could avoid information crowded in the navigation bar. On the other hand, It designed to fit in responsive design.

High Fidelity Prototype
home copy.png
About Copy.png
skip copy 4.png
hifi show.png
sea.png

Thanks for the opportunity!

club.png

© 2018 by Yiwei Xu. Thanks for your coming.

icons8-message.png
icons8-facebook.png
icons8-instagram_new.png
icons8-linkedin.png
street.png
bottom of page