Date: Summer 2015
Stakeholder: Microsoft
Focus: UX Planning and Design
Project Duration: 1 week

Coding for Humanity

To celebrate the release of Visual Studio 2015, the Developer Division decided to partner with Humanitarian Toolbox and release some code into the community. It was a win-win, as we were able to showcase (and road-test) our latest offerings, while also helping the American Red Cross with the important issue of disaster preparedness.

Channel 9 film crew recording In the Code
Channel 9 film crew recording In the Code

AllReady is a web and mobile application that helps the American Red Cross volunteers manage disaster preparedness campaigns. I learned, early on in the project, about the value of actually being prepared for a disaster.

Many of us think of the American Red Cross when it comes to offering help after a disaster has occurred, but they actually do quite a bit of work educating communities to help them prepare for the worst.

The American Red Cross was asking for a web application and a companion mobile app to help volunteers organize their efforts. We built the web application on ASP.NET and the Apache Cordova team leveraged that work to enable a hybrid mobile application.

Channel 9, a Microsoft video platform for developers, filmed our progress throughout the week and conducted follow-up interviews during the live launch event.

Business Goals into Software Realities

I have to admit, I knew absolutely nothing about the world of disaster preparedness and emergency response. We only had a week to deliver, so it was critical that I create a common understanding, not only for the project managers, but for the developers and visual designer as well. We knew that there would be separate teams for the web portal and mobile app, so I decided to create a plan of user scenarios that would help organize both teams on what their deliverables would be.

Early data-model diagram of AllReady
Early data-model diagram of AllReady

After talking with stakeholders, I began by creating a data diagram, that would help organize exactly what we were collecting within the application. I then translated the diagram into a collection of "views" that the developers would need to deliver for each application.

This is where my prior experience as a software developer and database administrator paid off. It helped me anticipate the needs of not only the front-end developers, but the back-end as well.

The team quickly organized around the list and it had immediate impact. This proved to be a useful exercise given the fact that we had such little time to organize ourselves. The list of views served as a road map to ensure that we remained in scope for what we could deliver.

Wireframes on the Cheap
Early Balsamiq wireframes of AllReady
Early Balsamiq wireframes of AllReady

After we had an overall direction of where we were headed, I focused my attention on the usability of the application. I needed to start creating wireframes as quickly as possible, because the developers were already hitting the ground running.

To save time, I decided to focus on the web portal and design in such a way that the mobile team could leverage some of the same design work. Additionally, the wireframes helped us understand the type of functionality we were going to leverage within the applications.

This was particularly useful for the hybrid developers as they were trying to decide which functionality they could enable within the hardware of the phone. In this case, we decided that we wanted to highlight that Cordova applications had the ability to leverage the phone's GPS to search for nearby events and the phone's camera to "check-in" by scanning a QR code.

Due to the insane deadline, close collaboration was critical. We worked in the "garage" on campus and, sitting next to each other, proved vital in ensuring we were all headed in the right direction.

Using Balsamiq, I drafted up the core experiences to help the developers visualize the types of experiences we were going to need. Balsamiq provided the flexibility I needed to get the right fidelity, without getting hung up on expensive and time-costly details.

Empowering Everyone

An issue that came up toward the end of the week was the fact that our design was failing a contrast accessibility rating. Some color choices we were making were not passing acceptable contrast ratios. This is an issue because those with visual impairment would have had difficulty reading text and deciphering click-able links.

In the final hours, I utilized a JavaScript accessibility kit called Tota11y to address all of the contrast issues. While there was still much work to be done by the community, I'm happy that we were able to make the experience accessible to the widest possible audience, given the intense time constraints.