Prototyping the philanthropy mobile application

During the second lecture we worked on the idea for our philanthropy mobile application. We were counting on the design process called “The Double Diamond”, where there design process goes from Discover -> Define -> Develop -> Deliver. We were still on the discover stage of our design process and wanted to work on the actual prototype to reach the “define” stage. After the lecture we started working on the paper prototypes. Each of us created paper prototypes using post-it notes, because their sizes were close to actual smart phone screen. At this stage we wanted to move from vision to specification.

One good thing about this kind of design style is the opportunity to go back and forth on different stages. The design process is therefore not so much of engineering process but organic.

After we worked on the idea, we decided to do some early think aloud protocols for the users. Therefore, we decided to use a working prototyping tool called Popapp.

Some early prototype sketches

We did the test for one user and received think aloud feedback of our system. Here is the feedback:

“Clicking + button and I think it has more details of the cause.
-Clicking on the map.
-Can’t see myself in the cause. Want to see where I am at right now. Random location in the work. Where am I? What are the buttons?
-Is this the only one organization? Can I scroll down?
-USER: This is my profile. My name, my picture. Funding. Where to upload my profile picture?
-CAUSE: Having people supporting this cause. I wasn’t able to see who of my friends are funding this. Can I see my name in here?”

The next step was to implement the changes to our prototype and produce a more finished design using different prototyping tools available on the market. We decided to use a prototyping tool called Balsamiq that gives the user the possibility to create wire frames that look sketchy and hand drawn. This kind of technique will give space to implement changes quickly since the prototype doesn’t look too finished.

Our prototype in Balsamiq looked like this:

After finishing the prototype we had another critique session where other designers gave feedback for our design. The feedback we received were mostly to simplify specific functions in the application and few recommendations, for example, to change the map function to news feed function where you can actually see who of your friends are interacting with the app in the real time.

One screen of our philanthropy app using Balsamiq Mockups

The whole feedback from the critique session looked like this:

“Causes not one click away. Erase buttons, keep simpler. Not more funding buttons. Put then just after you have clicked on the cause. Keep the application simple.
Add button not needed in the first page.
Not good idea to start your own cause so easily. Bigger process and after getting into the application.
Not so many buttons on the pages and on header.
Fundraising. Results of the companies, thanks to you you have managed to do this! This organisation works for this and this info.
What 100 Kr actually would do? What if I donate 100? Notification system? Upcoming money to your account here. Badges, one month… When you support this: small goals… What this 100 Kr have made. Feel good information.
Badges could have different colors and indicate who of your friends are active and paying and who not.
Target 18 age or more. Mouth to mouth thing works better to these causes.
What other people are donating should indicate?
News flow better than notification window!! Replace map of News flow.
Sow many things to do.. You need to narrow it down! News flow better than map.
Cut something off. Search on the bottom. Small bar at the bottom. All the pop ups you can get rid off.
Information not necessarily on top. -> put it on bottom.”

We discussed within a group if we wanted to implement some of the changes and work towards the higher fidelity prototype. There will still be a lot of work in order to get the app looking nicely and working properly. Our next step will be high fidelity prototyping phase where we are supposed to make a high fidelity working prototype and test it during a speed dating session. We are definitely closer to the “The Double Diamond” model’s develop phase.