Design Refinement

What is the Design?

Our product creates a seamless and frictionless environment for high school and college students to discover and participate in volunteering opportunities. Users are led through a minimalistic platform focused on helping match the user’s interests, location and time requirements with possible opportunities. There are also mechanisms in place to encourage users to bring friends, sign any necessary forms (specifically for high school students), and hold users accountable for showing up to the events they sign up for.

Heuristic Evaluation

In this phase we performed a heuristic evaluation on another design team's project, and received an evaluation on our design in response. A big part of examining each individual interaction we had with the other team’s product and through the Heuristic Evaluation framework made it clear that we had overlooked a lot details in our design. As people familiar with the service and what we hope our users will do, we neglected to think of possible user errors and alternative paths to the same result. Plotting out all the possible ways that users can interact with our product (i.e. how to get back to a previous screen when they accidentally click on something they didn’t intend to) is a crucial piece of our design moving forwards.

Also, because each individual worked on different sections of the platform largely independent of each other, we struggled with consistency across different pages and linking the pages together to create a seamless experience. Going forwards, all of the different pages will be created using the same platform. The centralization will allow our team members to reference each others’ work to maintain cohesion.

What Changed?

Changes were made between the paper prototype and the current design in order to streamline the user experience, bringing pertinent information to the forefront and reducing the frivolous features that seemed to go unutilized in previous testing.

The largest trade off we made while moving from paper to digital prototyping was the implementation of smaller displays of functionality. Because of the limitations of Figma, the prototyping software we are using, creating even 1 drop down on a page with 2 options would require several pages to be generated. Because of this the functionality of the dropdowns and altering presented opportunities based on what users would have put in dropdowns is almost non-existent. While we would like this to be more fleshed out for the final, we made the decision early on in this phase to focus on the more important core structure, navigation, and consistency of the site.

Summary of Major Changes:

The most notable structural changes occured to the browsing page. In the paper prototypes the browsing page included a list view and a map view of events in the area. This was created due to a user need to better understand spatially how to get to volunteering events. However, we found through testing that people often preferred to use the list view over the map view because it was more standard to how people were used to taking in information and often the user didn’t care exactly where the event was, as long as they knew they were able to get to the location. The replacement was a streamlined list view, including pertinent scheduling information like dates and times as well as the relative spatial information that the users need( distance from you). By removing this frivolous feature we reduced the complexity of the userflow and made users able to easily navigate to, from, and through the browse page.

As per our heuristic evaluations we made several key changes to the visual consistency of the site as well as increased interactivity between pages. Our paper prototypes lacked many back buttons and links to other pages within the site. This was found from feedback and noticing the user were getting stuck in the site and asking “how do I go back to X page”. By the introduction of a “nav bar” the user can jump between the home page, free browsing, and searching. Additionally we introduced back buttons on any page that is not top level. This allows the user to be able to navigate out of pages incrementally if they accidently made a mistake or decided they no longer wanted to view that particular page.

In order to encourage page to page interaction in the “Event Information Page” we expanded the “Social Media”, Other Events like This”, and “More by this Organization” slide show to be all be on one flaty level where you can get to each section by scrolling. We chose to do this because we found people often kept wanting to scroll “mindlessly” though the information page but seemed less inclined to click on things. We wanted to minimize the activation energy needed to access this information. Additionally the fact that you get to this information by scrolling allows the user to not scroll if they want to not see the information.

From a stylistic standpoint we opted for a clean greyscale color palette with pops of bright pink. We wanted to make the site as clutter-free as possible because we found that users often got overwhelmed with the spreadsheets and busy flyers often used for reaching out about volunteer opportunities. By sticking to a limited color pallet we ensured some visual consistency. We additionally stuck with a flat shaped icons to make the entire site feel more cohesive.

From an information standpoint, more informative text was added to signup forms in order to increase clarity. Through the paper prototyping feedback we noticed user questioning what certain elements of the forms meant or why they were included. We hope this extra informative text will give the user the context they need despite the added clutter.

Breakdown of Changes by Page

Key Insights

One insight we gained is the how important it is to of keep feature both subtle and easy to find. For example, in the beginning, our “more info” and “sign up” buttons were really obvious as they popped out from our white background, and were relatively large in size. Through testing, we found users felt like such obvious features were too overwhelming and there were unnecessary information. Hence, we iterated our design so many of our features were instead, tucked away in ways that make it both easy to find, and also non-intrusive. Another example is the “quick sign up” button that appears while users are browsing our events. Previously, another iteration included a version of the grey “more info” button, which was not as visible, and resulted in users will missing it completely.

Generally, within that insight, we learned that for the standard user flow through a website, the location of a particular element should be either nearby the previously used button or be in a conventional location similar to the vast majority of other sites.

Another insight that we gained is on how we can best present information on a page. We were faced with the dilemma of conflicting user feedback for our event listing page. Some users wanted to go directly to signup from our browse page and were annoyed when we forced them to go through more information first. Others were disappointed when clicking on the event brought the user right to signup instead of bringing them to more information. And users got confused when both options, “sign up” and “more information” buttons were present. However, by talking to our instructor, we learned the concept of “dip, dive and devour” - of how users interact with information on a page. Often times, users first scan the page, absorbing as much information as they can in order to determine whether or not they would like to dive deeper into it. Other users, may already have an agenda in mind and want to go straight to the “action” or “goal” of the webpage. By understanding this, we were able to determine a design for our events listing page that displayed minimal headings, with the option to click for more information or go straight to the sign up page.

Remaining Questions

We took a better look into the best solution for the “more info” and “sign up” buttons dilemma. This dilemma arose after some users asked what these be buttons did and the difference between them was unclear, yet when taken off other users were confused about accessing the pages they expected the site to have but could not intuitively find their way to, believing there should be a shortcut through the workflow we had created. After talking with other users and Professor Marco, as well as taking a look at various other sites to see how they do “card” based layouts (AirBNB, eventBrite), we ultimately chose to make the card change as a user hovers, indicating it is clickable as well as having a “fast signup” button, more dedicated to users who knew what they wanted to sign up for already or just wanted to get through the process of signing up for anything. These two choice provided options for both experienced and novice users and we are excited and prepared to see how these changes will affect the user’s ability to navigate the site while hopefully not feeling overwhelmed or confused.

One of the largest questions we grappled with, even from the beginning of this process before user interviews, was the question of should we have a login option? On one hand it could potentially make things a lot easier for returning users and because so many sites have a login process, even ones that really don’t need one. On the other hand it would add just another level of stuff the user has to take care of and manage. While user’s occasionally mentioned the possibility of logging in, they commented that they were unsure what exactly they might want to log in for, leading us to believe that again, it might just be a feature people expect but don’t need on every site. Because of the relative few actions on the site as well as the major personas we designed for being “Obligated Oscar” who wants to get through the site and get out as well as “Here for it Harry”, who would probably be sent invites to specific events on the site but never fully explore the site himself, we have decided to exclude logging in.

Because of the decision to not include user login, there is an ongoing question of continuity and how much the user is involved with the site following their sign up. While we did add an “un-volunteer” page (an initial shortcoming and overlook on our part originally), it is accessed through one’s confirmation email of them signing up. Thus the burden of managing the events a user signed up for moves from the site to the user themselves. For users with a lot of commitments on the site this may get tiresome. One way we attempted to mitigate this was including a Google Calendar / ICal link so that users may use existing systems to manage their events, but this depends on them actually using and knowing how to use those systems.

A downscaling we did when taking the design from paper to online was removing the volunteer organizer side of the site. We did not design the organizer facing side of the site like event creation pges and organization creation pages. This allowed us to focus on our target user group, volunteers, and their experience trying to find opportunities.

∑ Individual Efforts < Team Results

Throughout this phase we each took ownership of a different page in the site and divided some other roles as well, documented below.

Philipa: For the design refinement phase I worked primarily on creating the event information page, the unvolunteering form, and the instant undo page. Beyond that, I also dedicated a lot of time to organizing the layers, frames, and groups to make sure linking and editing will flow more naturally. I also contributed to iterating on our design as per the heuristic evaluation.

Sam: In this phase, I began by figma modeling the RSVP page and contributed to the browse page and the more info page. I worked to respond to heuristic evaluation feedback by quickly iterating in figma on several different pages. I identified problems in user flow and worked with my team and the instructors to resolve these problems. I wrote about changes made in this phase and key insights in the final report.

Gracey: In this phase I led the digital prototyping of the thank-you confirmation page, analyzed our partner team’s current design to write a heuristic evaluation and contributed to discussions of our heuristic evaluation from our partner team. At the end of the phase I also put this page documenting the design refinement phase together.

Ben: For this phase, most of my work consisted of iterating through various parts of the website, especially the browse page which I created, as well as more generally across all pages for consistency. With the receiving of the heuristic evaluation, many ideas and shortcomings were implemented as well as identifying and brainstorming as a team and with users and the instructors to identify potential solutions to increasingly smaller problems. I played a part in conducting user testing and contributed insights on shortcomings and general overview of this phase for the final report.

April: For this phase, I started off prototyping the homepage on figma. As we continued to iterate on the website prototype as a group, I contributed to changing, developing and altering the other pages as well. I played a role in our user tests, and participated in our discussions around the feedback we received, especially in regards to our heuristic evaluation.