Published on

Redesigning JHU Rec Center Web

Authors
  • avatar
    Name
    Shichang Ke
    Twitter

1. Problem definition and design focus

For this assignment, I chose to focus on improving the membership portal of the Ralph S. O`Connor Rec Center at Johns Hopkins University. I work part-time at the welcome desk of the Rec Center and I noticed that people usually call in to inquire about similar pieces of information. Moreover, most of the answers can be found online. It then occurred to me that the current interface of the Rec Center website is probably inefficient in providing people with information that they care about. Therefore, the focus of this study is to identify the source of frustrations of the users and redesign an interface that can make things easier for both the welcome desk workers and the members of the Rec Center.

2. Contextual Inquiry

In order to get a more in-depth observation of people navigating on the Rec Center website, I conducted a contextual inquiry with a student at Johns Hopkins. This user research approach is crucial to my problem understanding because it can show me the practices of a student at Johns Hopkins (primary users of the Rec Center) in the context of this problem.

2.1 Demographic

The participant of my contextual inquiry is a third-year Johns Hopkins graduate student in the Department of Electrical and Computer Engineering. She just transferred from another University to JHU this Fall, so she has never been to the Rec Center before. She is 26 years old and is originally from China.

2.2 Tasks

I gathered some of the most frequently asked questions from new-comers to the Rec-Center and asked the participant to complete three tasks based on them.

  1. Search for hours of operation of the Rec Center.
  2. Search for the cost of membership at the Rec Center.
  3. Register to become a member at the Rec Center.

2.3 Insights

  • Hours of operation is not apparent on the first page of the Rec Center website, the participant had to do a text-box search of the whole website.
  • The search engine on the web page searches all pages under JHU Student Affairs, so the participant was directed to another program under the supervision of Student Affairs when she was looking for information about the Rec Center.
  • Some information, such as the dowlound link of the official app of the Rec center is on the landing page, but the user has to scroll down to see them.
  • The naming of the bar menu on the left is confusing. For example, "fitness programs" and "membership and services" has a lot in common. The participant did not know in which to look for the cost of membership.
oceanocean

  • The participant cannot find a link or button directing her to the JHU Rec Center Member Portal, so she went back to research on the web browser, and was able to find the link to the membership portal after a long period of web searching.

  • I instructed the participant to find the membership portal and she found the registration form very confusing. She first signed up using her email, but then she found out she need to sign in through the JHU anthenticator. The participant found this process frustrating.

  • During registration, the participant found out that she had to sign a waiver, and that it's very frustrating to sign every box using the mouse.

2.4 Problem Understanding

I plan to redesign the layout of the Rec Cenetr Information webpage to make finding important information on there more efficient. I also plan to redesign the process of membership registration to make the process more intuitive and furstration free.

3. Sequence Model

4. Paper-based Prototype

After a careful review of the breakdowns I identified when building the sequence model, I decided to build a paper prototype to implement some of my thoughts on redesign. There were two main goals of my design:

  • The landing page of the official website of the JHU Rec center should contain, or point users to, the most important informations. I renamed and combined some of the sections at the bar menu to make it more usable. On the main page, users can now see the hours of opration, any recent announcements and the link to the membership portal clearly.
  • The membership purchase process should be more user-friendly. I designed the login form to take users to the JHU login portal since most of the members uses JHU emails, and for non JHU users they can click on another link to login.

I also enabled tickbox for the waiver, so that people don't have to use their mouse to sign the boxes.

5. Prototype Evaluation

A video of the paper-based prototype evaluation can be found at this link. The prototype testing was done by the same student who did the contextual inquiry. Her work flow was much more smoothier this time. When she got to the lading page of the Rec Center website, she saw the link and knew where to go to to get her membership. Also, when she first logged in to the membership portal, I designed that the system of the member protal will detect her as a first time user and take her to the membership sales page directly. The participant did not experience any error during this interview and was especially glad that the process ran smoothly without my help. I asked her to perform the smae task again the next day and she was able to comoplete it again, successfully.

Therefore, I would say this prototype test demonstrated that my paper prototype was able to resolve the breakdowns that was identified during the contextual inquiry. In particular, I would say the prototype was able to provide more guidance to first timers who wanted to know more about membership services of the JHU Rec Center. However, I do think more tests should be down with users of various background to see if the presentation of information at the Rec Center website fits the interest of majority users of the Rec Center. Once we've conducted more contextual inquiries and generated more versions of paper prototypes, we will be able to design a high-fidelity prototype with as less weaknesses as possible.