ROLE & TEAM

Product designer in a team of 3 product designers

TOOLS

Indesign
Adobe Photoshop
Adobe Illustrator
HTML/CSS/JS/Bootstrap
Miro

TIMELINE

10 Weeks

LINKS

Live Website
Indesign Prototype
Final Presentation

NEED FINDING INTERVIEWS

We asked students questions regarding their childhood and current lifestyle; questions prompted participants to make connections between their childhood and current life. We all interviewed participants we already knew as friends, and interviews were conducted one-on-one in a casual setting. Participants were given vague explanations for the interview itself and clarification was provided afterward. Due to the nature of the questions, the interview had a natural flow as participants typically followed their train of thought. Follow-up questions were often included based on the interviewee’s responses. Participants were upper-class students of Wellesley College.

In regards to the interviewees’ relationships with their families (pre-during college), there was a varied range of responses due to their experiences growing up

• One of them was an only child and has a close relationship with parents; another was the child of separated parents and found it difficult to maintain the same sense of closeness with her parents; another is currently in the process of understanding the complicated relationship that she has with her parents. College is a transient time and some can find it hard to grow in this environment; for example, Participant 2 talked about attending talk therapy and is working through her relationship with her parents there.

• All interviewees expressed appreciation for quality time and wanting more free time spent with their friends. ex) Participant 3 de-stresses by “talking it out with friends''
• All interviewees miss the sense of wonder and exploration that childhood provided them, as well as fewer responsibilities. ex) Misses the “little things about being a kid”- spontaneity & adventures. Also misses the guidance of parents

PROBLEM STATEMENT

Wellesley College upperclassmen feel that their college lives have brought on a sense of ‘loss’ in regard to their free time. They feel that they are lacking a sense of control over their personal time and miss the freedom from responsibility and the sense of exploration that characterized their childhood lives. With Sprout, an app that facilitates connection, we aim to satisfy the craving for a stronger sense of connection to close ones.

PERSONAS

“Imagine you’re a junior or senior in college: you have a pretty set friend group already and have a lot of fun with them, but during the school week you’re all very busy and it’s hard to organize hangouts. You’ve been at this school for many years and are starting to miss the spontaneity and ‘newness’ that came with first-year orientation. So, you’ve been wanting to meet more people in your class year that you never had the chance to connect with in a low-commitment way.”

• The underlying similarity that all three of these individuals possess is the desire to expand their social circles, as upperclassmen, but their uncertainty and insecurity towards navigating the social scene at their institution hinder their ability to take any action.

TASK AND DOMAIN ANALYSIS

We identified three main tasks for our design:

• Setting up an initial individual profile
• Finding friends to meet up with
• Agreeing upon a time to meet with friends
  
  

INITIAL WIREFRAMES

Design 1:

Design Direction: We decided to merge our designs 1 and 2 based on our feedback; many students pointed out the simplicity and usefulness of Design 1, but were also drawn to the plant metaphor aspect that we featured on our home page in design 2. So, we wanted to combine the designs in order to present the best aspects of both in one design. Our new homepage contains elements of Design 1 but also includes the plant from Design 2. On our home page, we got rid of elements such as the random quote section and “Welcome [user]” prompt at the top of the screen, separated our two paths into two different clickable buttons, and created efficient and smooth pathways.

Considerations: We realized we had to account for the people already doing activities so we added another button that led to a drop-down menu in which users can pick an activity and see who is online and available and also interested in doing the same activity.

Revised Design:

After User Testing: Subjects enjoyed the simplicity of the design, but there was confusion around how the activity matching aspect worked; for example, one subject submitted an activity and then wanted to check the available activities right after, assuming that the two home screen buttons were both meant to be clicked in order. After sending out an activity, all subjects seemed like they were waiting for additional steps to happen and were confused about how they’d get connected to someone. Additionally, the “add a description” and “add a photo” features were mistaken for required elements for a post, although we initially designed them as fun add-ons should the user want to use them. This posed a problem to users because each subject reacted differently to that page - one got excited and said she would upload a funny selfie, while another flat-out said she didn’t want to put an image because it would be unnecessary.

Prototype Adjustments: From our user interviews, there were a few common issues throughout. For instance, we need to add ‘back’ buttons on the “I have an activity” path. Currently, there are no ways for the user to exit from this once they click on it, posing an important usability issue. Additionally, all users tested suggested a clearer confirmation page for when they sent out an activity that they created. It is currently unclear what happens when they send out an activity and what the next steps they should take are. This should be outlined in the next prototype. The users also expressed confusion at the list of people after clicking the activities. It was unclear whether this was a group activity or a list of individuals. This needs to be clarified, and perhaps we could think about creating a group activity function as well. Additionally, users expressed that they would find the app more meaningful if they were able to send out activities earlier so that they could pre-plan their day. We could therefore add a function in which users can specify a bracket of time for the activity instead of solely relying on spontaneous connections. Lastly, the users commonly expressed that the photo function when creating an activity should be optional. The prototype should be adjusted to specify which fields are optional vs required for the user to fill in.

From our user interviews, there were a few common issues throughout. For instance, we need to add ‘back’ buttons on the “I have an activity” path. Currently, there are no ways for the user to exit from this once they click on it, posing an important usability issue. Additionally, all users tested suggested a clearer confirmation page for when they sent out an activity that they created. It is currently unclear what happens when they send out an activity and what the next steps they should take are. This should be outlined in the next prototype. The users also expressed confusion at the list of people after clicking the activities. It was unclear whether this was a group activity, or a list of individuals. This needs to be clarified, and perhaps we could think about creating a group activity function as well. Additionally, users expressed that they would find the app more meaningful if they were able to send out activities earlier so that they could pre-plan their day. We could therefore add a function in which users can specify a bracket of time for the activity instead of solely relying on spontaneous connections. Lastly, the users commonly expressed that the photo function when creating an activity should be optional. The prototype should be adjusted to specify which fields are optional vs required for the user to fill in.

Overall, subjects enjoyed the simplicity of the design, but there was confusion around how the activity matching aspect worked; for example, one subject submitted an activity and then wanted to check the available activities right after, assuming that the two home screen buttons were both meant to be clicked in order. After sending out an activity, all subjects seemed like they were waiting for additional steps to happen and were confused about how they’d get connected to someone. Additionally, the “add a description” and “add a photo” features were mistaken for required elements for a post, although we initially designed them as fun add-ons should the user want to use them. This posed a problem to users because each subject reacted differently to that page - one got excited and said she would upload a funny selfie, while another flat out said she didn’t want to put an image because it would be unnecessary.

We wanted the fonts to be readable and relatively simple. We didn’t want to use too formal of a font so we chose to keep it sans serif. For the color scheme, we wanted to stick to our plant theme and have the dominant colour be green. From that, we found a colour palette online that included some other accent colours to create an aesthetic interface. We decided to keep the homepage pretty simple and straightforward using photos that people post with their activity and intuitive icons that represented the event. In order to account for people’s sense of recognition, we created a direct messaging page that mimics that of Instagram. Consistent with other social connecting applications that people are already familiar with. Kept a menu button on the bottom of the pages in order to allow users to easily access the different functions that the app can perform.

HIGH-FIDELITY PROTOTYPE

USABILITY HEURISTICS

Our prototype was far more successful compared to our last round of user testing at meeting the usability criteria we had set. One of the main lessons taken from this round is the power of simplicity; compared to our last prototype, this one simplified the activity adding/joining process down to a more user-friendly interface. The homepage immediately presents all available activities and the ‘add an activity’ feature is more clearly indicated with a ‘+’ button. We saw that the minimal design eased user confusion much more through this but also contributed to more confusion at times; for example, several users approached the home screen unsure of what it expected from them. To some, it was not immediately apparent that the images on the homepage, representing current activities, could even be clicked on. So, we think that adding more details about each activity (time taking place, time posted, user who posted it, etc.) on the images themselves will help communicate to the user that these items are clickable and should be interacted with.

The remaining usability issues that remain are to clear up the symbols in order to better communicate their functionality. For example, getting rid of the clock icon on the home screen and adding additional information onto the pictures. And, changing the chat function icon to something like a speech bubble would improve the learnability of our interface since it will be more recognizable to the user.

Through this round of user testing, we also realized the different interpretations our app could be taken in: one user noted that they could see this app being used as a way of communication between Wellesley students about more everyday things like lost and found or free and for sale. And, some think it would be a valuable way just to see what’s happening around campus on a consolidated platform.

DEMO

REFLECTIONS

This application has many adaptable uses for different communities. If we had more time to work on this project, some things we would consider incorporating:

• Lost and Found Page
• Free & For Sale Pages
• Student Organization Event Pubbing

I learned a lot from my teammates and the entire premise of the class. I enjoyed the project-based work in tandem with conceptual aspects incorporated into class lectures and labs. I would highly recommend this class, CS220, as an introductory course to Human-Computer Interaction!