Dare2Share Live! Mobile App

D2S - LIVE - Red

Dare2Share is a non-profit that teaches Jr. High and High School kids how to engage their friends in meaningful conversations about their lives.  They came to me with an idea for an app that would allow kids to take several assets (videos and pictures) and share them on social media with friends.  The app would support a live video simulcast with an audience of over 10,000 people.  The non-profit wanted to see the conversations started using their social assets and in real time on a global map.  Additionally, I decided to add a curated social media wall so that groups across the world could see what was happening beyond their own location.  The app also included supporting material and activities that you could do in person with friends.

The big challenge was that this solution had to scale to involve 10,000 kids in one day.  Instead of spinning up our own database, I decided to use the Google Analytics realtime API to log social sharing events.  I came up with the idea to wire together the Google Analytics realtime API with Mapbox, an amazing map visualization tool.  The result was something that looks fantastic, works in near-realtime (15 minute latency), and was scalable.  The event came off without a hitch and the app worked beautifully.

I had a somewhat vague specification to work from, a color scheme and a logo. From this I designed the solution end-to-end, coded it, deployed it to the app stores, and managed the app/system performance across 10,000 installations.  I coded this app using javascript, html/css, and then I outsourced the Google Analytics API to Mapbox work in PHP, due to time constraints.  I leveraged the GoodBarber mobile app platform to build menus and have a reliable base on which to deliver the app and its updates.  However, almost everything was custom.

 

Urban Youth Workers Mobile App

UYWI_logo

Urban Youth Workers Institute is a non-profit that identifies and trains urban youth leaders, helping youth deal with issues such as drug recovery, incarcerated parents, racial issues, and becoming leaders in their communities.

One goal was to to have a publishing platform where articles could be read, videos could easily be distributed, and live events could be advertised and livestreamed.  So, I wanted the main focus of the app to be on the content itself, maximizing reading space and user interaction with the material. This led me to adopt a small sidebar navigation scheme. Although hamburger menus are “out of style” in the UX community, they do work well and users have loved the simplicity of this app.

Also, we wanted urban youth leaders to be able to connect with each other. So, I made sure that we included a feature that allows users in this community to find and connect with each other through messaging.

Our design also includes a full screen “What’s Hot” section so the non-profit can promote events, conferences, and training sessions, gaining the user’s attention right after they arrive in the app.

We also have included streaming radio and tv, for which I helped the organization setup the infrastructure to broadcast to the app.  Search for “UYWI 2.0” in the app stores to see the app firsthand.

Visual Studio Window Model

visual studio logo2

An Integrated Development Environment (IDE) is a difficult project to design for UX. There is enormous complexity, massive surface area of functionality, and developers can have countless windows and tools open at one time. Microsoft Windows had created the Multiple Document Interface (MDI) that many Windows apps use, but as I watched developers do their jobs, I saw it was woefully inadequate to support their workflow within Visual Studio.

I introduced docking functionality into the main document workspace, with tabs along the top, and tabs along the bottom for tools (docked on the sides). This model was controversial internally. However, after people starting using it in Visual Studio, they saw the power and simplicity of the design.  It allowed for developers to have a lot of windows open, and to divide their screens into manageable regions.

We further fine tuned it with usability testing by adding visual targets when windows are dragged to be docked. Developers liked it so much that this functionality even influenced the Windows Snap feature in Windows 7 and beyond.  Also, Adobe also added similar functionality to Photoshop and other products.  This “window model” functionality that I designed became an integral part of the Visual Studio product that has endured several versions to this day.

I also managed the process toward a “flattened” user interface, reducing lines, creating a cleaner workspace.

Visual Studio Dynamic Help

visual studio logo2

In studying C++ developers, particularly those that are climbing the learning curve, I found that they could spend as much as 60% of their time reading documentation versus actually coding.  Learning curves for new programming languages can be very steep, especially when combined with new frameworks that are overlaid on top.  To make matters worse, the Microsoft Software Developer Network offered gigabytes of documentation to comb through, and much of it was irrelevant if you picked a certain programming language.  So to give something to new developers, I created a system called “Dynamic Help” that was in several versions of Visual Studio.  Dynamic Help was like Pandora, but for documentation, actively serving up documentation in which you were interested.  I earned a patent for this design.

Dynamic Help consisted of a small HTML help window, a context aware engine inside the product that kept track of what language you are coding in and the framework you are using, and then help topics that are tagged with those “contexts.”  So as you use the product and write code, help topics would automatically appear that were relevant to what you were doing.  This drastically cut down on “false positives” for search terms and “F1” on-demand help behavior. For example, you could be coding in Javascript building a web page, so you wouldn’t want topics relating to constructors in C++.

Follow up feedback indicated that the system was very helpful to new developers, but experienced developers were not interested in it.  Some experienced developers understood that it was also the system that was delivering more relevant, on-demand “F1” style help when needed, weeding out content not relevant to their programming language and project type.

The Start Button

win95 start button pixelated

While working for Microsoft in the early days, I did user research that influenced one of the most iconic parts of UI for the Microsoft brand.

Early on, Windows 3.x was hideous. File Explorer & Program Manager? My colleague, Kent Sullivan, and I were determined to fix it. We did benchmark research between the Mac OS and Windows that showed us there were deficiencies in both user interfaces. Both suffered from a lack of a central place to “start.”

We recommended a single focal point in the UI as the “starting place” and the Windows logo was a natural one. However, it didn’t attract users’ attention without the word “Start”.  We did research trying both logo alone and with messages like “Begin Here” and “Start Here” and various design options.  Opening the cognitive textual channel helped users immensely, but the word “Start” next to the Windows Logo won hands down.

Our early research and work with the “Windows 4.0” and Windows 95 teams became a lasting part of Windows, even coming back after it had been removed in Windows 8.