Derick Lopez

This was my iteration for the UI

Yet we decided to go with Sara's iteration

This is the final direction we picked for the design style. This screen shows mid process of the customizing fountain experience via web. The user is changing the lights using presets. The water direction has already chosen so it locks into one color once the user starts adding lights. We also want the gradient background to be responsive according to what stage they are at in the process. So right now it's pink and blue because they just did water and now they are in lights. (colors according to tabs) But once they enter the message the gradient would be blue to orange.

persona | Julie Stone



young mom / local business woman
32 yrs old with an 8 yr old son- Billy Stone
middle class family who enjoy family activities & events
they love Kansas City
love the idea of giving back to the city that they love




script | working process


DESKTOP
Toss-a-Coin is an initiative platform that utilizes Kansas City's fountains as a city pride's landmark and a hub to allow the community to contribute in the form of donations to an specific cause. Here, Julie Stone is planning a fountain show for her son’s birthday.
Julie is at work and sees a link to “Toss A Coin”
She Starts by selecting how much you want to donate. After this Julie can start customizing her show. Well, that is because it is an interactive experience. We aren't just going to take your money without letting you have some fun and joy!
Julie donates $50
In the menu (interface) you have many tools to customize the show. But first you have to choose the amount that you want to donate, and don't worry not amount is too small for you to be able to enjoy the experience.
duration- 30 min if you want it to last longer, donate more
chooses where money goes - example Breast Cancer or something
You can also create a big show for someone you love or for an specific celebration. Then you can set the time and date that you want the show to happen and then you are set. Enjoy your magnificent masterpiece with the entire fam!
then she goes through the entire process for her little kid’s birthday
She can start with the water and its direction. She can also pick from a variety presets for water direction or her own direction by individually clicking on each fountain spot.
little kid is a boy- colors blue and green
Next thing to choose are the lights. Just like the water, there are presets to use or Julie can individually change each light’s color. This simple layout helps any user create the show they want without any hassle.
message- happy birthday Billy Stone! Big 8!
Next she’ll write her message
time- tuesday (october 20) @ 5:00 pm
and the time and date for the show.
She then previews her show and saves it to her “tosses”
a mock preview of Julie’s show will be played so that she knows that she will enjoy her show.
and has to get back to work (aka can’t share it yet)



MOBILE
voice says all functions of mobile but then we only show what Julie does
She then later in the day checks her phone to “invite” family and friends to the show.
message added: Shh! This is a surprise for Billy. But please come to the show at 5pm and join us for dinner afterwards at the Plaza. Sends to Husband, Sister and kids, Mom, Dad, and bff Jane and kids.
Toss a Coin also features a mobile use. From her phone julie can check the fountain calendar and schedule, view other people’s videos and photos, invite friends to her event, share her video, or add a donation. Julie first sends her friends an invite to her show.
She browses a few more shows (just scrolling) and saves them to “favorites” for ideas for future tosses.
Goes to calendar to see what else is happening on that day (October 20)
Julie then goes to her calendar to see other events on October 20th.


KIOSK

Finally Julie and her family can come to the fountain just before the show to enjoy the fountain with her family.From your phone you can keep track of any events happening at the fountain as well as setting up calendar notifications.
They go to the fountain and just tell Billy it’s to show him the new kiosk functions at the Plaza.
(Julie gives him quarters to play)
Julie gives Billy some quarters so Billy can play with the fountain and kiosk on his own.
So he plays with it, changing the direction of the water with some of his friends that are at the other kiosks. All of a sudden the screen stops and says “Fountain is reserved for Billy Stone’s Birthday. Enjoy the show!”
Billy then gets to see his show and loves it.
Then the show begins and Billy is really excited jumping up and down.
A picture is taken and video is recorded for the occasion, then these sent to Julie’s phone. A copy of these is also sent to her e-mail for storage on her desktop.



After the show is over, Toss A Coin’s interface will record the video and send you the final show so you enjoy it again and again! So the next time you want to have a fun personal experience and give back to the city or an organization you care about, just remember to Toss a Coin!