The Client

APANA™ is an IOT startup which uses cutting edge wireless technology to collect water usage data from large retail outlets such as Costco and Walmart. Not only do they provide real time analysis to alert clients if there is a water leak, they provide analytics to gain insight into how to reduce overall water usage.

The Problem

APANA™ engineers had solved the problem of gathering all of this data, but had only piecemeal ways of conveying water usage to clients. The goal of the customer analytics site was to put this data together in an easily navigable and digestible overview of all of their sites worldwide.

The Solution

Using Wireframes and data models with the Sisense data analytics visualization tools and my abundant SQL kung fu, I designed and built a single multi-language site to browse the water usage across all of a customer’s physical sites in aggregate, as well as per individual site.

The Success

The site was successfully deployed, and was in use by a Japanese company who ended up investing heavily in APANA™, and I believe the site helped to convince them.

Wireframes

apana-frontend

Screens

apana_analytics_all

APANA™ is a startup company which has created an IoT technology to manage water consumption at large retail facilities. Orders were piling up, which is a very happy thing! However, the back office ability to coordinate the complexities of rolling out an install of IOT devices to a facility was proving to be overwhelming. I worked carefully with operations to design a system to plan and coordinate every aspect of these complicated order fulfillments.

Wireframe

apana_admin

Screens

apana_admin_screens

Impact Feedback is a system developed by Blu Sky to help colleges track and curtail alcohol and marijuana consumption. I worked on a redesign of a version 2 of the product, and supervised the creation of visual mockups of the system. I’ve only included one of the the wireframe sets that comprise this system here, the staff portal.

Wireframes

wireframes_staff

Mockups

mockups_staff

The Client

Product Care Association is a Canadian company in Vancouver BC that manages the recycling of beds, paints, lightbulbs, and such throughout Canada and some states in the US. They coordinate the collection, transport, and processing of recyclables and manage the allocation of funds for these services.

The Problem

• The various companies which they call “partners” used an outdated and confusing system to report the collection, transport, and processing of recyclable materials in order to be remunerated for their services.
• They had also had some bad experiences with failed projects that were over budget and did not end up meeting their expectations. They kept asking, can you really handle this or not?

The Solution

• They hired Blu Sky, where I did a full requirements analysis which was iterated numerous times before signoff. 
• I reduced the legacy system’s dozen or more 1998 era style screens, down to one much simpler screen. 
• I added a reporting and printout screen so users could review their submission history.
• I also did all of the front end programming for this using angular.js
• We also integrated this with their Microsoft Dynamics system
• I wireframed and implemented custom tables and screens for the Microsoft Dynamics system

The Success

• PCA was very happy with the system and the project was considered a great success
• They began to require a UX driven process with requirements documentation, wireframing, usability testing, visual mockups, etc. from their other vendors, because they saw how successful it was on this project. This became THE WAY for them, and I was The Mandalorian!

Wireframes

• I create very comprehensive wireframes. I design logins, password resets, popup dialogs, error messages, emails, printouts, etc. As far as possible, no detail is left out. Having been a front end developer, I hate leaving developers hanging with unfinished design details.
• Interactive wireframes were used for usability testing with end users all over Canada

wireframes

Mockups

• Their branding document indicated some very strange lime green / forest green / purple colors, with unusual button shapes and quirky cartoon logos. 
• I really loved this and embraced it. I made the data panel groupings also reflect the button shapes, and I grouped buttons using the shaping scheme as well. I also made sure that the highlight colors showing form input focus reflected these colors as well.

pca_mockups

Rand Corporation contracted with BluSky to create a web based questionnaire and program to help spouses of alcoholic military personnel. They were having a difficult time getting engagement, so I was able to step in and design a new mobile-friendly landing page with a clear action item. I also created an A/B test ad campaign on Facebook which linked to this site, and their engagement levels improved significantly.

Wireframes

Mockups

Rand Corp