CS 147 - Equalizing Society - Assignment 8 Interactive Hi-fi Prototype Crystal Escolero - Design and Product Management Jessica Guo - Development and User Testing Trevor Rex - Development and User Testing Miguel Patrick Taruc - Development and Documentation Problem and Solution Overview People want to better their community, but they don t know how to donate their time, goods, or money effectively. Using donation challenges created by nonprofits, we help users fulfill local needs that they re passionate about and discover new causes along the way. Tasks & Final Interface Scenarios Simple: Learn about Needs Through our initial needfinding, we gathered several observations which led to the larger idea that people who want to donate often lack the proper knowledge to do so. This comes in the form of not knowing how to start or donating items are not actually effective or needed. Therefore, we made it one of our tasks to help users become educated in needs they are passionate about, and as well as made it possible for them to learn about other causes that they may not have even thought of.
Moderate: Follow Friends Another observation we gathered through our needfinding interviews and class feedback was the effectiveness of social influence. People are often motivated by both feeling they are contributing to a bigger cause, and by showing others in their social circle what they are up to. Both of these things can be accomplished through our app. With challenges, users donate to challenges along with the hundreds or thousands of others who gave to the same cause. They can also see their friends activities and show friends their own donating activities and progress.
Difficult: Track your Donations After our low-fi prototype, we received feedback that users would like more detail on their donation history to see how it has changed or progressed. Seeing how much they have donated gives the user positive feedback and encourages them to continue donating. This idea also allows the app to be more personalized to the user, if they have certain preferences for what type of donating they prefer (volunteering/giving money/giving goods).
Design Evolution Initial Sketches: Low-fi Prototype: From our initial sketches and experience prototyping, we realized that the purpose of our app was very narrow. When designing our low-fi prototype, we built off of the initial sketches but also broadened the scope of the app to include a variety of causes, not just food donations. At this stage, the app now included learning/donating to all different kinds of organizations, a bottom navigation bar, a profile page, a profile to track donations, and a news feed for friends.
Medium-fi Prototype: Based off of feedback from low-fi testing, we made a few changes in our design when implementing our medium-fi prototype: 1. We added user-preference selection screen upon first opening the app. Users tap what needs they are interested in addressing, and adjust the ways that they want to contribute (time, money, and/or goods). This would allow the app to personalize what challenges show up for the user. 2. We added area-specific features to the feed, including trending items and
challenges that local friends have completed. 3. We split the causes on the discover page into categories (e.g. your favorites, near you), added a favorite feature so users could more easily see the causes they re most interested in. Finally, we added an option to filter the challenges within a cause based on the type of donation needed.
Hi-fi Prototype: We did a major redesign to make the UI better between our medium-fi and hi-fi prototypes based on heuristic evaluation feedback. More details of what was changed are in the next section. Major Usability Problems Addressed Level 3 and 4 Heuristic Violations
H3: User Control & Freedom / Severity 3 I can t add causes to favorites. The button still exists even though it was one of the fields I selected when I first signed in. I wasn t sure if that meant I had already favorited it. I also was not sure what the purpose of the first screen is when we sign up. Is it something you are using in the back end? Is there a way to communicate with us that this is what you re doing? StumbleUpon has something that might be similar to what you re looking to do. The button also isn t clear that it s a button because it isn t green like other buttons. Reviewer A didn t understand that the initial cause-selection meant favorites. Fix: We decided to get rid of the favorites feature, which was a way for users to save causes they were interested in. In our hi-fi prototype, we got rid of causes altogether as they seemed to be an unnecessary middle-man between the user and donating to a challenge. Now, users can find and search through challenges directly, and each challenge is tagged with the field it belongs to. The favorite feature was removed from the app, as causes were altogether removed. H2: Match b/w System & World / Severity 4 For the tab bar at the bottom, the flag icon seems like the wrong icon as does the compass. A flag typically communicates a warning or reports a problem. Instead maybe use a racing flag. Discover could be a magnifying glass, double star, or a medal or ribbon you might win in a contest. You might also consider adding text below each icon.
Fix: After this heuristic feedback as well as feedback from our studio, we decided to combine the Me and Challenges tabs into one section called My Progress. This seemed more intuitive because the Challenges tab only served to track the user s progress, and the Me tab had very little functionality, which is now a small side feature added to the top of the My Progress page. The Challenges tab was combined with the Me tab into one My Progress profile/tracker. H3: User Control & Freedom / Severity 3 The feed doesn t say which challenge a friend progressed on. One has to click learn more to see which task it is. The feed in general is missing features that make it seem worth exploring. Fix: In our hi-fi prototype, we added more functionality so users can click directly on the friends who show up on the feed as well as see the challenge name, a short description of the challenge, and get linked to the challenge by clicking on it.
Users can see the name of the challenge, and can click on various places in the Feed to explore the app. H2: Match b/w System & World / Severity 3 How do you donate slider is very confusing. I m not sure what the sliders are for. Additionally, the title is confusing. Do you want to know how I typically donate, or how I want to donate using this app? Fix: Similar to the first heuristic, we decided to get rid of this feature altogether. We thought that making the user initially choose preferences and tailoring to those would limit the user s experience, and we wanted the user to be able to discover new challenges that may not have showed up if we limited his preference scope. Users can still search for tags they are interested in, and we are operating under the assumption that the app would eventually be able to tailor more to the user s preferences after they have used it for a period of time.
The initial preference selection was removed from the app. H5: Aesthetic & Minimalist Design / Severity 3 In the discover page, the scrolling between items looks weird. The only indicator is the cut-off cause lable. Instead, have arrows or circles underneath that show where you are in the scrolling from side to side. It may also help to have lines separating the sections or even background color changes. Fix: In our hi-fi prototype, we did a major redesign of our discover page. While there are still different boxes that users can click on, we do not separate them out based off of location or favorites. Instead, users can just search for topics that challenges are tagged with. Because we no longer separate challenges by category, there is no longer side-to-side scrolling allowed, making the UI less confusing for the user.
The Discover page was redesigned so it is no longer split into categories and can only scroll vertically. Other Changes: Challenge pages include what organization sponsored/created the challenge - This change incorporated some of our initial needfinding discoveries that some donations received are not the ones which are needed. To give more power to the places that receive donations, we present donation challenges which they create to ensure these are goods that truly represent the need. Challenge pages include first steps on how/where to donate - This change was implemented due to heuristic feedback as well as to help the user better complete the task of learning about needs. Instead of having to search up where to donate themselves, we provide them with the first steps on where to go and what to give. Redesigned our color scheme and use real images instead of icons - This was based off of heuristic feedback that our design looked flat, and the color scheme gave off a gloomy feeling. Bottom navigation bar is moved to a list that pops in from the side - Again, this was based off of feedback that the navigation bar took up too much space on the screen and was not always intuitive to use.
Prototype Implementation Tools Our prototype was built using Android Studio and Bitbucket. We chose to use Android Studio because two of the members of our group had experience in Android programming, while none had experience with ios. Bitbucket is a service that is similar to github which allowed us to collaborate using git. This was extremely helpful in being able to work in parallel on different parts of the app. We initially had a lot of struggles using Android Studio because of different version updates not being compatible when we tried to pull each other s code. However, once we got those errors fixed, we were able to operate smoothly. A downside of programming with Android is that we had to lay all the XML out programmatically rather than just using our storyboards, but this was also helpful in that it helped us redesign our app in an Android format rather than using flat storyboards. Wizard of Oz & Hard-coded Data In order for our app to work, we do not actually verify if a donation was real or not. This app trusts that the user is truthful in whether or not they ve completed a donation. Also, some of the features were hard-coded in so someone testing the app could get the sense of what it would look like after using the app for a longer period of time. While all of the organizations in our Discover page and their needs are real, they did not actually post challenges, and these were created by us to be hard-coded into the app. All of the in progress and completed challenges were pre-populated, as well as the graph with the
user s donation history. Finally, the friends and trending challenges that are on the Feed are hard-coded in with preset challenges completed. Limitations & Future steps If we were to continue working on this app, there are several features we would wish to add in the future. First, we would want the user to be able to connect to Facebook and other social media in order to add friends. Going off of this, we could add a way to suggest new friends to users. In addition, there could be a better way of completing donations. It would be ideal if users had a way to donate money from directly within the app, and if donations could be verified in some way. Finally, we would want all of the hard coded information (challenges, non-profits, etc.) to be real groups that post to the app. Summary It is our hope that with DoNation, users will have a fun, social way to better their community. Moreover, we hope that users will appreciate the freedom to search any cause they re interested in. We believe that donating can be personalized for both the giver and receiver, and that every donation should be celebrated by friends. The process of arriving at our final hi-fidelity prototype was ten weeks worth of iteration and careful thought. We began by finding real needs in our community that stemmed from the everyday person s lack of knowledge about donating and frustrated nonprofits who weren't receiving the help they really needed. After iterating through several solution ideas and prototypes, we ended up a low-fi prototype that allowed users to learn about local needs, track their donation history, and follow friends. We used the feedback from our low-fi and medium-fi prototypes to drive the changes for our final design and implementation. While we have not yet been able to implement all the features and ideas we wanted, our team is proud of how far our ideas and designs have come.