Case Study: Lab FAQs+

Description: A mobile app based on a life sciences textbook designed to be a “lab assistant at your fingertips.”

Year: 2015

Platform: iOS & Android phones

My Role: UX & IA Design

What I loved most: The challenge of designing complex calculators for a foreign subject matter, and leveraging information from life sciences experts to help understand the content, shape job stories, and design useful solutions.

The Challenge

To create a digital, utility-enhanced adoption of the Lab FAQs paper textbook for the life science researchers, students and lab technicians who use it.

The Process

Background Research

Client Discovery

We kicked off the project with a thorough info-session about the textbook and its digital future as the client would like to see it. I used this discovery meeting to uncover UX priorities, like how much weight the book portion of the app should hold compared to other utilities. Our team had a dedicated product manager to create a functional spec.

User Research

In addition to receiving an extremely insightful user study report from the client, I tapped into my own network of students and professionals who practice the life sciences. (Thank goodness for my nerdy friendbase)! Biochemistry was a foreign language to me, so they helped familiarize me with the content, answer my probing questions, and describe complex concepts in the colloquial language they understood.

Inspiration & Competitive Landscape

The most helpful use of my biochem nerd network was conducting usability testing of competitor apps with them. My team and I collected a plethora of mobile experiences that covered various aspects of the app we would be designing — textbook literature, mol calulators, references to scientific tables, DNA converters — all sorts of things that were still very foreign to us. I read some of the book to pull real-life use cases, and researched the kinds of test materials that would accompany the textbook. From there, I was able to generate a user test protocol to see how effective these competitor apps were in helping a real user who actually understands these content and calculations to achieve the task. I was also able to start validating the importance and accuracy of the job stories we were using as a basis of user-centered design needs.

competitors

A crowded marketplace! We aimed to differentiate through thoughtful user-centered design.

The visual design team and myself still heuristically evaluated strengths and weaknesses of these apps as we ordinarily would do for a competitor analysis, and took notes from user reviews. We also drew inspiration from the best-in-class apps outside of life sciences but with similar functionality, such as eBooks and currency converters. The usability tests, though, were by far the most integral piece of the puzzle to learning what works, what doesn’t work, and where there is opportunity to champion UX in this marketplace.

Information Architecture

Calculator IA

Mapping the information architecture for the calculators feature was a major design challenge. The client provided us with all the calculations, converters, and mathematical reference tables that needed to be included in this robust section of the app. I conducted an in-depth audit of this document combined with its correlating contents from the textbook, and consulted with my network of life science researchers who had aided me with usability studies. Eventually, this massive (and arguably terrifying) spreadsheet was produced and would server as the basis for IA which would guide both the UX design and the engineering team’s software architecture.

calcspreadsheet

I felt like a biochemistry champion by time this audit was complete.

Site Map

Things began falling into place very quickly. The calculators section of the site map was iterated a few times due to the complex nature of how they could be combined.

calcIA1

The textbook’s table of contents was a very simple translation. Eventually, a robust site map was documented and changed very little moving forward.

sitemap

Flow Diagrams

Complex technical flows needed to be documented for our engineering and QA teams. We often drew them out on whiteboards during architectural discussions. The most complete and conclusive flows were ultimately incorporated in the fully-annotated UX spec.

flowdiagram

Interaction Design

Early Concept Sketches

Once the site map and content was better understood, we started digging into the UI design. Beginning with simple sketches, I’d frequently bring in the Creative Director and two developers to participate in collaborative whiteboard sessions. Their feedback helped to both push the possibilities but also adhere to our timeline and scope.

05a-wireframes_03

wireframesketches

Working off the master calculator audit I had completed earlier, the calculators section went through several rounds of revision. Drawing side-by-side helped to systematically identify functional patterns that would translate to a limited set of consistent UI components and opportunities to combine multiple algorithms into a single calculator. Group review sessions helped shoot holes through the design and brainstorm even stronger efficiency.

Wireframes Prototype

Once consensus and satisfaction was reached for wireframe sketches of each page template, I produced a fuller set of wireframes digitally. Before committing to the design, I created a quick, click-through prototype of the wireframes so that we could a) feel out the interactions on an actual phone, b) test the design with users, and c) clearly present the functional design to the client and our internal team.

08a-wireframe_prototype_01

Annotated Wireframes

After further wireframe tweaks, I assembled an annotated UX spec for our internal team, to be used cross-functionally across engineering, QA, and creative teams. During this process is generally when additional use case scenarios and edge cases arise, or implications that were not yet imagined.

While I’ve created extremely detailed wireframe specifications, I do find that leaner works better. Typically, I’ll detail the behavior of the core functional components once, and just reference them as needed. My annotations capture important design and development information like selection states, triggers, the type of content to be inserted, future enhancements to be mindful of, and optional “brownie point” bells & whistles to reach for (which are actually rewarded with homemade brownies of course).

annotatedwireframes

Some of the design decisions my team and I made were utilizing the textbook chapter colors as core color associations for the eBook, and combining similar calculators into single calculators that can handle variables with a simple touch.

Visual Design

I worked closely with our visual design team to help provide content plans and usability insights to assist their design. My role was to help ensure that the visual design strengthened the purpose of user interface design decisions, and that they could test designs with content that made sense.

mockup

Validation

Working closely with our Account Management team, I helped provide metrics and usability-focused analytics that we should build in so they can be tracked by the client. These were primarily generated from both 1) the client goals voiced during discovery and 2) internal design decisions that we felt needed validation.

The Outcome

The app has a 4.0 rating and has received positive and enthusiastic feedback from the life sciences community. The project therefore proceeded with continued collaboration between the client and my team for further development of additional country support and new features.

store

Learn more about my process and other case studies.

Advertisements