Swell:

A Skillshare Platform for Wellesley Students

Human-Computer Interaction (2017 Fall, Wellesley College) Team Project

In-class Project
CS220
Human-Computer Interaction
Wellesley HCI Lab
Collaboration
Team of 3
Swell
Swell is a skillshare platform for Wellesley students, where students can both post classes and take them for a small amount of money. Students can also post errands and run other stduents' errands.
Output
Application prototype made with HTML, CSS and JavaScript.


Problem Space

Wellesley’s campus is filled with diverse people with diverse skills. However, there currently is not a lot of sharing among people with different skills. Our app aims to bridge this gap by pairing people with skills to share with people with skills to learn.

Furthermore, Wellesley's suburban setting often makes necessary tasks hard to get done. Swell can connect students perform simple tasks with students who can do it for them for a small amount of compensation.



Understanding the User

1. User Observations And Interviews

Interviewee 1
Our first interviewee is a transfer student. In her previous school, she has tutored Chinese and math to other students. It was not like lecturing, but more like students coming to her with problems and she helps them figure out what their problems and concerns are. She had more free time in her previous school than in Wellesley, so she would just text the students who would like to come and schedule a meeting. Now, she would have her Google calendar set up to allow people to sign up for the sessions. It was a paid position like a part time job. Time is an important factor for her; she would want to get some form of compensation, since she is having less time in Wellesley. However, if she’s staying for the summer, she wouldn’t mind giving out free lessons since she would have more free time. She would really want to learn how to bake, but not in a time-consuming manner. She prospects her ideal sessions would be held once a week, in a dorm kitchen, on Friday or Saturday evenings.
Interviewee 2
Our second interviewee is a senior. She has many skills and has experience teaching them to friends and other students. A few skilled that she mentioned included poetry/rapping writing, beat and music mixing, make-up application, nail art, hair styling (especially for black hair styles). She has both done lessons from friends in these categories and performed the skills herself as favors. Her cosmetic lessons or favors were usually scheduled right before formal events or parties (quick requests and action). Her lessons in these skills were performed and taught for free. She also has experience as a Chinese tutor while she was in high school. These weekly sessions scheduled through her school were exchanged for money. She has also been a recipient of lessons while at Wellesley. She received academic lessons via SI, tutoring, and help room for her STEM courses. She noted that the peer led sessions were much less intimidating than a professor's office hours. She was more comfortable being taught by a peer than a professional because she sometimes felt uncomfortable letting professors know how little she understood certain topics or if she were behind on work. She also noted that the larger the peer-led groups were, the harder it was to get individualized help.
Interviewee 3
Our third interviewee is a senior. In her free time, she enjoys playing frisbee, trying new sports, making cards for friends, and learning new things. Although she doesn’t currently share any of her skills with classmates at Wellesley, she often wonders of times when people with other skills could do things for her. For example, she would love for people to go to the store for her (like Roche Bros and Whole Foods), cut hair, do laundry, pick things up from offices around campus, make spam, print, etc. For her, school is hectic, and would love to make things more efficient by having other people do things for her if they’re better at it. Apart from just finding skills that Wellesley students are already offering, she would also love to create a wish list for other skills that might not already be offered. She noted that the apps she uses the most are apps with clean interfaces that make it easy to find everything she wants. For example, things like searching functionality, reading reviews, ease of finding contact information, etc.

2. User Personas

Mariela Cruz

passionate
confident
artistic

Mariela is skilled in forms of art. These skills may include cooking, cosmetic skills (make-up, hair, tattoos), studio art, music, art software (Adobe Creative Suite), and writing. The more skilled and experienced students may tend to be upperclassmen. She is comfortable both teaching and performing the skill on another student.This student wants to teach her skills to other students as a favor and/or to practice/improve her own skills. This student’s skills cater to one on one lessons.

Motivations:
Clean and intuitive interface / Extra money

Jamie Liu

introverted
calm
caring

Jamie is a math student, considering to minor in Computer Science. Jamie is stressed from her heavy courseload and doesn't have much free time. However, she really wishes to learn how to bake and would like to spare some time to learn baking and share her cookies with her friends.

Motivations:
late night snacks / low-key gatherings

Taylor Mckenzie

extrverted
passionate
caring

Taylor is an RA in Stone-Davis hall who, on top of being an RA, is involved in three other orgs on campus and taking two labs. With all of her commitments, she rarely has time to run errands, like color printing and going to CVS. She is looking for people to help her with these tasks, and is willing to pay them.

Motivations:
complete her many necessary tasks

3. Use Case Scenarios


A first year student has a math midterm the next morning at 8:30am. It’s currently 8:00pm. Within the next hour and a half, the first year student needs to study for the midterm and buy a cake from Roche Brothers for her roommate’s surprise birthday celebration at 9:30pm. The first year student lives in Claflin, does not own a bike, and therefore would barely have enough time to walk to Roche Brothers, buy the cake, and walk back, let alone study for her math midterm. She decides to use her app, Swell, to find someone to buy the cake for her so that she can spend the next hour and a half studying. In the app, she finds someone available in the next hour, as well as someone who is willing to deliver the cake back to Claflin. She decides to pay $5 for the delivery of the cake in addition to the cost of the cake.



Art student wants to make extra money for concert tickets (for a concert a few weeks away). Posts to teach drawing and photoshop lessons the following weeks. The student also has an on campus job and participates in 2 orgs. She is able to schedule meetings with tutees that work with her busy schedule, and keeps track of her meetings in the profile page of the app. She decides to offer $10 for each hour long lesson. Throughout the week, the student receives notifications of students who want to take her lesson. Student connects her debit card information and cashes out money from students after the lessons.



Jamie (Math student) always wanted to learn how to bake, but doesn’t have much free time due to her heavy course load. She downloads our app, and looks for baking lessons. She finds one that’s already going on Saturday evenings. She hits ‘attend’ on the meeting. The app asks her to provide her debit card information. She provides the information. The baking session is added to ‘My Classes’, and automatically added to Google calendar. Stuffs that individual students should bring to the sessions are specified in the app. That Saturday, she showed up for the session and learned how to bake a brownie. After the session, the app sends her a push notification that $10 (to be determined) has been charged to her card, and asks her if she’d attend the sessions regularly. She hits ‘yes’. The next week, she finds out that she has a problem set due Sunday. She can’t go to the baking session this week, so she goes to the app’s ‘My Classes’ tab. In the tab, she can see her baking session is scheduled Saturday evening. She hits ‘cancel’. The app notifies her that $1 cancel fee is going to be charged. She hits ‘okay’.



Sketches

We came up with different layouts and openly discussed their usability. We followed through the use case scenarios together and decided which elements to keep.

Wireframes


Default screen (Classes tab)
Errands tab
Messages tab
My page tab
Class Detail page
Classes > Plus icon
My Page > My Classes
My Page > My payment

Paper Prototype Testing

User Testing Observations

Pilot user

  • The user had an easy time completing the first task from the homepage (signing up for a baking class)
  • For the second task, where the user was prompted with needing extra money, the user clicked ‘classes’, instead of errands. We need to clarify the language used in our tasks given to users, since it is true that a user can earn money through either a class or an errand.
  • To find previous messages, the user successfully used the tab navigation to find messages
  • For our future user tests, we should make the tasks for the user more complex, as we did not test the riskiest parts of our app.

Evaluation Measures

Severity Ranking Severity Description Severity Definition
4 Critical The identified issue is so severe that the user was not be able to complete the task.
3 Major Users could accomplish the task but only with considerable frustration and/or performance of unnecessary steps. The user had difficulty in circumventing the problem; users can overcome the issue after they have been shown how.
2 Moderate The user is able to complete the task in most cases, but will have to undertake some moderate effort in getting around the problem. They may need to investigate several links or pathways through the system to determine which option will allow them to accomplish the intended task. User is most likely remember how to perform the task on subsequent encounters with the system.
1 Minor The problem occurs only intermittently, can be circumvented easily but is confusing to the user. Could also be a cosmetic problem.

Usability problems

  1. The information on who is attending the class wasn’t visible.

    Severity: 4

    Although the task was meant for the users to go to the ‘message’ tab and message the person, All three users went to ‘my page’ first, to find the person who attended the class. However, who is attending and how many people were in the class was not in the prototype.

    Proposed solution: The user who’s giving the class, or all users, should be able to see who is attending the class and able to message them.

  2. ‘My payment’ was small and unnoticeable.

    Severity: 2

    2 users out of 3 didn’t see ‘my payment’ at first sight. Instead, they first went for ‘my classes’, and visited the class detail page.

    Proposed solution: ‘my payment’ should be bigger, and have more visual emphasis. Also, if the user has already taken the class, it would be convenient if payment information were also be visible in the class detail page.

  3. How the payment is done wasn’t clear to the users.

    Severity: 2

    This was raised as a problem and confused the user. However, in the real implementation, users will be asked to provide their credit/debit card information. This will let users know that the payment is done within the app.


UI Design

The color schemes, the name 'Swell' and the overall visual identity are based on metaphor of a cotton candy, where the sweet candy puff is small almost nothing in the beginning but as it meets one another, it swells and becomes bigger.

Prototype

Made with HTML, CSS & JavaScript.
Play around with the prototype!