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!

Toss-a-Coing: Progress

This was exploration for the interface design. In the end we decided to reduce the amount of options that we want to give to the users. Yet the screen seems to work better in a dark background given that is a screen outdoors. This makes it easier to see under the sunlight.

KCPlex: Script

Howdy!
I want to introduce you Toss-a-coin!
If you don't know what it is then I will explain it to you.
Toss-a-Coin is a initiative and a 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, and initially to the preservation of the cities fountains.

But wait! There is more...
Remember we called Toss-a-coin a platform. 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!
This platform will let you interact with our fountains when you approach them. For example you can create  a fountain show with a message as a gift for your significant other! So why don't you toss-a-coin in the fountain and have a grand ol' good time!?

Let me walk you through step by step:
( walkthrough for each platform is different)

 for the console.

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. Then, it is time to get to it! and there are some fun things that you can do with the fountain. For example: you can change the color of the water coming out the spouts in the fountain.... you can also change its movement... lastly you can write a message for everyone and your loved ones to see.

for desktop

Same as above but adding: You can also create a big show for someone you love or for an specific celebration (go royals!?). Then you can set the time and date that you want the show to happen and then you are set. Enjoy your magnificent masterpiece buddy!

for mobile

Revise customization and add: From your phone you can keep track of any events happening at the fountain as well as setting up calendar notifications.

Another way that you can donate towards a good cause is by donating during special events. These events will have a goal to which a collective effort is needed. Everyone that donates can have a part in the way the fountain show behaves in the end result. The end result being a magnificent show and celebration of the collective achievement.

Toss-a-coin stimulates the communities interaction with the city's fountains. This also grants individuals a new way to donate and contribute to the development of the city and causes for good.
This also gives Kansas City a city of fountains a unique way to utilize fountains in a purposeful and fun way which integrates the community with their city.

So Toss-a-coin and make KC better!

KCplex is now Toss-a-Coin

This frames are meant to flesh out the interface in accordance with the functionalities of the app and the in-situ interface. 

KC proud: in depth platforms

We're beginning to organize the event and start to imagine how things will be designed at the event. We want to incorporate the functionality of our logo in the space as well.

This shows using the "made in kc" logo as navigation on lamp posts and tents. This is where we imagine printmakers and other artists selling goods would be. There would also be tents and lampposts utilizing the other sections as well, such as food. 

we also thought volunteers running the event could have a t-shirt so that people attending will know who to ask for help or info. exploring different applications here as well. 

Other than just the branding style, we've also added "search" to be a major component in our mobile and web. We realized that our previous design was limiting and time consuming. We were only thinking about the user discovering things through using the device instead of also considering the user that comes to the app or web knowing what they want to find. So we're having the search bar be very dominate and the first thing you see, so you can just simply search what KC has to offer. But we're still keeping our 4 major sections (community, food, made in KC, and places/events) so a user could browse as well.

We've decided to add a splash page onto the website, so we image that the logo would be changing. The following images show exploration of color and application.

Once you enter the main site, we were thinking it could be image heavy and then type would reveal on hover. (notice the logo changes with the hover) Here we are also showing how the search would work once in the main site.

This shows the user entering the "places + events" section. (notice the logo changes again, functioning / corresponding with the section)

We also added the "add to calendar" option once they are in an event that they want to attend.

 

KC city proud: Logo/name ideas

Logo/Name iterations

KC city pride: Progress

We revisited our previous mobile wireframes and added a few more screens. We've also picked a location for our kick starter event (3rd Platform) and started to imagine the way the space will be organized. We choose the West Bottoms because we think that's a location that needs some attention and it's just logically works providing enough space. Our next steps are to incorporate the mobile app into the event space. We are going to have beacons set up at the entrances of the event that will pop up options to use at the event, such as coupons & uploading photos.

option one:
have things physically organized like they would be on a website, into categories. So having one location for food, etc. This makes for easy navigation but not much intermingling with different companies.

option two:
have things all mixed up and incorporated together, more like a fair or something.
This kinda goes off our goal for people to discover things they wouldn't normally go up to.
But the problem is that it could get confusing & difficult to navigate.

KC city proud: Building up an idea

I have an idea in which mobile devices can interact with the space that we are trying to build, to serve as tools or extensions that empower the users and the sponsors to connect with each other in a much easier and efficient way while at the same time maintaining human interaction as the main avenue for the final result.

An idea could be to place beacons or codes that the users can scan in relation to a particular business or maker. Then, an app or some kind of software compiles the behavior of interest of the user (they like country music, BBQ, and long walks on the beach.) Then the software creates patterns which promotes other businesses, activities or products that relates to the taste of the user. This way, promoting exploration of local made talent and product while at the same time contributing to our final goal which is unifying local made things to create a much wider and stronger culture that is more inclusive and sensible towards the needs of a more general KC population.

Problem Statement: KC city local proud

Problem Statement: There is a disconnect between local communities in the KC area. The area has become very prideful community as a whole, but there are many sub sections of the community that could benefit from connecting with each other. 

First we made a mind map to see what sub-categories we could focus on fleshing out

Then we we reorganized the information into a site map, choosing fewer over arching tabs on a potential website or app. 

MX KC city Proud: Introduction/Business cards

MX KC CITY PRIDE: WIREFRAMES

ITS ABOUT FUNCTIONALITY.  At the moment I wanted to make sure that the essential functions for a learning experience where organized and practical. I want  it to be clean to be capable of sophistication and follow design trends intended to create culture. The frames go from landing page>section page>and article page.

KCcity pride

For our topic we decided to go with the growing popularity of our city, Kansas City. The pride of KC is becoming a community in itself and local businesses, citizens, etc are thriving off of it. But there are also sub-communities within KC such as: Cyclists, Healthy trends, buying locally, local makers, beer, foodies, coffee drinkers, basically everything you expect from a city with so much to offer.

Our goal is to connect all those and bring these smaller communities into one big community for the greater good of our city. Having all these different communities feed off of each other will increase our cities pride as well as bring all the people together and making them aware of all the hard work that's going on. 

Makers & Artists/Designers

West Side Local

Manos'

VML

DMH

Normal Human

Maker Goods

Brass Tacks

Bernstein Rein

Barkley

Easy Tiger

Band Wagon

Halmark

Two Tone

Owl & Mouse

Vahalla

Basement Soap

Casey Ligon

Made in the Middle

La Cucaracha

Hammerpress

West Side Story

Bunker

Restaurants

Q39

Barrel 31

Joes BBQ

Gates

Winsteads

Grinders

Music

Record Machine

Mills Record Company

Riot Room

Midland

Beer

Boulevard

75th Street Brewing Company

Beer Kitchen

McCoys

Coffee

Oddly Correct

Little Freshie

Roasterie

Filling Station

Parisi

Thou Mayest

MX_Community Building System : Research

Ideas:

Idea 1:: Art Community for dummies (proxy title)

The idea is based in the creation of a community of professionals, companies, students and new artists collaborating and sharing information to develop the artistic culture of an specific area. The website would help facilitate information such as gallerie locals, grants for projects and commissions/internships. This idea has the purpose of making the resource-searching process easier for artists so they can focus on what they care about the most, which is make art.

Research:

ArtsKC, Regional Arts Council (https://artskc.org/)
This is really close to the basic model of the idea, yet it lacks a higher level of inclusion with the audience and interaction with the users. We want to let the user have a greater role and participation in our plan.

There is a pattern with art communities' websites, they are either company based (controlled by a private entity) or entirely user based (the users are their greatest contributors. i.e. behance, deviantart)
My concept is based in balancing the roles these both parties have into the development of the community and create a closer contact between the artist and the industry. Ease them in the community as a progressive process which allows them to learn and provides growth opportunities.



Idea:: 2 KC city pride

Is a city wide platform or system intended to bring communities and the people of Kansas City together. To inform and educate people about the many things that make the people of KC feel proud about it. This will allow for a much simpler and efficient way of learning and sharing new things with the people of the city. It will also contribute to create connections between individuals, companies and organizations with the possibility to encourage the to contribute with each other. This will open new ways to create cultural, social and economic growth.
The identity is intended to be more sophisticated with quality produced material (writing,imagery, design)

Research:
City pride websites are oftentimes outdated or directly related to news casting or newspaper which aren't necessarily appealing to a general population. Organizations and communities are also separated from each other and intended for specific demographics. The purpose of the idea is to connect this different subcultures in order to contribute to the general cultural development of the city.