Shade developed the first laboratory-grade wearable device that measures ultraviolet radiation. They engaged Very to build an app that would seamlessly connect the device to a smartphone, so that patients could easily access — and understand — their cumulative UV exposure at any point in the day.
The app had to allow for information sharing among other patients and physicians. And it was important to Shade that the app’s graphic elements and activities aligned with the established brand standards.
As always, we began by working with the client to define our main objectives:
- Understand the background, purpose, mission, features, functionality, and calls to action associated with the app.
- Provision Shade.io on all projects, tools, and resources to create the foundation for collaboration and asynchronous communication.
- Perform user testing to validate core functions, usability, and accessibility.
- Develop two visual prototypes to be shared with future investors, advisors, and early beta customers.
Mapping user pathways
To fully understand the app we were creating — and the challenges it needed to solve — we built out a See | Do map. A See | Do is a visual representation of what users “See” in each interface and what each component needs to “Do” (or what the expected outcome will be). This facilitates discussion early in the process around API requirements, user flows, core pathways, business workflows and components — so that every member of the team is on the same page.
Next, we stepped “Into The Grays,” designing Lo-Fi representations of UX elements that would eventually make up wireframes. This meant building a visual language for global UI elements such as components, buttons, button states, titles, and other common interface elements.
Testing our hypotheses
We tested those Lo-Fi prototypes with crowdsourced tools and office colleagues, gathering quick feedback on the proposed experience. As users performed specific tasks on the app, they were asked which layout they prefered. This “preference testing” ensured that we understood our user base — and that we were designing the app for them.
Our user testing also included “click testing,” which involves presenting users with a screen, describing a task, and asking where they think they should click in order to complete the task. We then performed path analysis, where we present a situation to users and see how they navigate a workflow we have designed. This helps us to see how they advance through the pages and if there are any holes or bottlenecks in the process of completing a task.
Our testing results led to recommendations for improvement of user experience, as well as a guide to implement the UX designs.
Building with brand in mind
Shade previously had worked with world-renowned IDEO on the physical hardware and some of the basic branding assets. This provided a solid foundation as we began to consider how to integrate the design and styles into a functional application.
At this point, we were ready to create fully interactive prototypes, with the brand assets and designs completely implemented. Shade wanted the interface to be responsive to the time of day and to use different gradients throughout the day — a design challenge that we overcame by testing different color configurations.
Our final deliverable was a Hi-Fi prototype and clear directions for the team to carry the design through when building the application.
Following our tried-and-true processes, we exceeded Shade’s expectations and delivered an experience that was not only engaging, but vetted and validated for usability — well before it hit the market.