Blog Update #5a: Rationale of Medium Fidelity Prototype Approach
Our prototype will be a website, built using HTML/CSS. Our experiment only requires one prototype that can be toggled to simulate all 4 conditions.
Horizontally, we decided to cover the following features:
- Users already have their profiles created and linked to social media accounts
- Filter function
- Search function
We decided to Wizard-of-Oz’d users’ profiles to avoid the tedious creation process, and to Wizard-of-Oz’d the filter and search function because our experimental goals don’t emphasize on that. Since it is impossible for us to link participants’ social media accounts to our website, friends of participants will be Wizard-of-Oz’d.
Vertically, we decided to focus on two areas – the community-related elements and a segmented progress bar that highlights individual contributions:
- A list of donation events that users can view by clicking the “next” button
- A segmented progress bar in which a segment represents the donation by a donor
- When user hover over a segment of the progress bar, a pop-up shows up, with a thank you note to the donor
- Friends of user will be shown under the progress bar and when the user hover over his friend’s profile, a pop-up shows up, with a thank you note to his friend
- A draggable bar that user can adjust the amount of money to donate
- An input box for user to input the donation amount
- When user click the “Donate Now” button, he is directed to the payment page
- After the donation process is completed, a pop-up shows a thank you letter to the user
- The progress bar on the detailed event page is grown to show the contribution of the user after the donation process is completed
We decided to implement the whole donation process because we want the user to experience the donation process with community-related elements and segmented progress bar to test whether these elements will motivate the user to donate more money.
Event details and donors’ contributions will be fake data. The payment process will be Wizard-of-Oz’d and payment information will be filled out in advance to avoid the tedious form-filling process. We included these elements because we want to make the donation process as realistic as possible.
The overall appearance is not a first priority in our prototype as long as the layout is clear and doesn’t distract participants. However, the appearance of the progress bar is argued to be important. Key to the progress bar is the clear and intuitive visualization that informs the impact and recognition to each individual contribution.
We decided to build the website using HTML/CSS because of our group skills and since our prototype requires many interactions on the interface, it is faster to build the prototype by using HTML/CSS.
Blog Update #5b: Prototype Demonstrations
Video Demonstration: