Archives: Projects

Plum Duo™ Infusion Pump – ICU Medical

About this project

ICU Medical Plum Duo Infusion Pump

ICU Medical is a global leader in IV therapy, offering products and technologies for infusion, oncology, and critical care. Having a major market share in large-volume infusion pumps, ICU wanted to develop a new, flagship device called the Plum Duo™.

This new model would not only double the capacity of their award-winning Plum 360™ pump, it would support many new features with a highlight on safety and efficiency.

My involvement

I worked directly with Sales & Marketing, Product Owners, Safety & Compliance, System Architects along with domestic and international Software Development teams. I would take this project from concept through to market release as the Lead UI/UX designer.

The challenge

I knew that this project wasn’t going to be a simple as putting “two of the current model in the same chassis and add a touch screen”. Incorporating new features would require work to revise existing use case scenarios and create new ones. Plus, moving to a touch-screen interface meant new interaction models would be required. Ones that maintained or increased safety through risk mitigation of possible introduction or increased chance of unintentional user interactions. Making sure to leverage the power of a graphical user interface without unneeded clutter and visual noise would need to be balanced with stakeholders’ visual preference and opinion. There were lots of opportunities for an improved user experience that would bend but not break the status quo and still remain compliant with standards and regulations.

Tools used

Design

Adobe illustrator was used for the visual design of assets. Its ability to export in various formats as well as provide custom naming, supported the development teams’ proposed naming convention.

The main design tool I chose to use as the primary design tool for this project was Axure RP. With the scope of this project and type of deliverables, documentation being a major one, Axure RP was a perfect match. I find it surpasses other tools in reporting capabilities and while prototypes may not look as slick or flashy as some other tools out there, Axure RP is more than capable. Data driven variables, gesture input, conditional logic, you name it – this tool delivers and the ability to run prototypes offline or through a web browser came in real handy during usability testing.

Accessibility

In addition to HE75, accessibility was addressed using WebAIM for contrast to pass WCAG AA requirements and the ‘Let’s get color blind’ Chrome extension was used to simulate multiple 3 forms of color blindness: Deuteranomaly (green), Protanomaly (red), and Tritanomaly (blue). The simulated output colors were also run through WebAIM’s contrast checker to be sure that they still passed.

Facilitation

In addition to Axure’s cloud based platform, the handoff of all artifacts was facilitated through Github. Using a repository structure defined with development team input, each repository was based on a product, its deliverable type, and release version.

Deliverables

Task Flow Diagrams

Existing functionality and use cases were validated for reuse in the new platform then reviewed in depth to understand workflows and hierarchy. New features were organized under appropriate use case(s) and incorporated into new or existing workflows. With system level and atomic requirements applied, creation of task flow diagrams began ranging from complex tasks to scalable navigation models. Each mapping out all input options and related conditional logic for system response including error handling. After iterative review / design cycles, diagrams were finalized. The flows were not only foundational for chunking out content for preliminary UI layouts patterns, but helped software development teams with coding system level logic and state machines.

User Interface Layout

Following the ANSI/AAMI HE75 standard, touch-target and typography sizing was derived based off of the display’s PPI so that they would render at desired physical

dimensions for proper interaction and readability. Using those as base-level constraints, I then calculated a grid for the UI components to adhere to. Late stage feature additions and/or revisions to requirements sometimes could not adhere to the grid, but the best effort was made to find an acceptable balance between change requests, UI constraints, and UX outcomes.

Concepts

Once the content areas were defined, effort was placed on creating the UI content itself. Various concepts were created, evaluated and iterated upon to arrive at the final design. Throughout the process, design evolution reflected the changes in content prioritization, feature additions and changes, and changes in stakeholder visual preferences. Many concepts were prototyped to interactively demonstrate interaction models and system visual feedback.

Wireframes

Once concepts were approved, they were brought down to a low-fidelity, gray-scale variant that sanitized them of color, text values and other conditional attributes. This allowed the wireframes’ UI images to scale over time without requiring updates if a color or label changed.

The design leveraged common components, sometimes called ‘masters’, for reuse and consistency in the design. This permitted global behavior to be defined at that level and any instance of a common component would possibly include instance-specific behavior in addition.

All attributes were annotated using footnote ID numbers that corresponded to callouts on the UI image. The annotations were broken up into separate tables: General Description, Visual Design, and Typography.

Initial wireframes also defined valid & default values, conditional logic states, and more. Essentially, the ‘when’ and ‘why’. However, a single source of truth for developers was needed and those details were moved out of wireframes to system-level requirements. This made iterative changes easier to maintain for the project.

Interactive Prototype

Interactive prototypes were created for multiple reasons. First, as a tool to help convey concept design intent for a shared understanding and informed decision making. Secondly as another tool that product owners and content creators could use to test text strings and labels for proper fit while maintaining compliant size for desired distance readability. And lastly, based of wireframes for usability testing. These prototypes were very functional but dynamically populated values, conditions, and limitations sourced from data tables based on cumulative decisions made by the user.

Usability Testing

I helped create the protocol and moderator guide for several rounds of testing. As an observer of the testing, I captured my observations and helped determine the cause of any usability issues revealed as well as provide insight as to various methods that could be employed to resolve them.

 

 

 

 

 

 

 

 

User Onboarding & Dashboards – FIRST®

Usability evaluation, report of findings with recommendations, Prototyping & Usability Testing

About this project

FIRST® is a non-profit organization that inspires young people to be science and technology leaders through 4 age based robotics programs. These programs involve volunteer adult members to lead and support youth teams as well as event based activities. 

My Involvement

I was brought in under a compressed schedule to evaluate and improve the user experience for the logged in user portion of the website. This is where teams are created and managed as well as where volunteers and youth members enroll and manage their participation. The catalyst for this effort was that the Team Registration section  (less than 1 year old) had received negative feedback from users due to accumulated difficulties getting teams and participants ready for that ensuing season. 

Usability Evaluation

The purpose of the review was to identify areas that contribute to poor usability of the current design, to provide an organized list of issues, their relative severity as it pertains to user experience, and to identify recommended mitigation strategies. 

Task flow creation

After reviewing the site, it was necessary to reevaluate the workflows for various key tasks. This was done through white board sessions with Product Owners and Lead Developers to incorporate business requirements as well as feasibility and risk. By mapping these out, it was then possible to refine them to improve the user experience by eliminating unnecessary steps. 

Prototype Creation

Due to the compressed schedule, concepts were created directly in the prototype tool surpassing formal wireframes. High visibility and regular review diminished the risk of getting off track to more than acceptable levels. 

   

I used Axure for this and created a responsive design that supported three layouts including mobile. By using an interactive prototype, we were able to iterate through the review process faster and we’d be one step closer to needs for usability testing.

Usability Testing

I recruited 5-8 users for usability testing of the subsections of the website. I worked with product owners to identify the key tasks and what we wanted to learn from the testing. After which, I created a moderator guide that scripted the task flow and follow up questions.

The testing was performed remotely using GoToMeeting, a combination of role based user accounts seeded in a development build and the UX Design prototype. Fortunately, several key stakeholders were able to observe the testing which turned out to be quite valuable during the debrief. I recorded each test session and captured observations in a spreadsheet.

After the testing was completed, all findings and observations were distilled into a formal report for each specific section of the website that was being tested. The output was reviewed with the team and any areas we wanted to iterate on were identified, defined, estimated, and prioritized in an agile backlog for future sprint planning.

Enterprise Medical – DEKA

Task-flow, Sketching, Asset Library, Wireframing, Prototyping

About this project

One of the greatest risks to Patient safety in drug delivery is human error. Doses must be calculated using a myriad of variables and a decimal point can be the difference between life and death. This project was focussed on improving safety  through managing the drug and it’s clinical uses across all levels of a healthcare organization. From pharmacist to clinician, the drug is controlled by an intelligent software that provides faster, safer delivery of drugs from a drug library to the infusion pump. Due to the confidentiality of this project, deliverables and product images are not able to be shown.

My Involvement

I was brought in as a lead designer and to lead a team in the design of desktop software that would support safety critical decision across multiple users and use cases. I worked with three different development teams that encompassed both the desktop software as well as hardware components related to the delivery of drugs. I met with subject matter experts in key roles of leading pharmaceutical companies to facilitate requirements gathering as well as review designs in various stages.  

Task-flow creation and analysis

Working closely with Product Managers, I distilled hundreds of individual requirements and their dependencies into task-flow diagrams. This visually mapped the logic in each use case and revealed conditions, dependencies and errors that were incorporated into requirement revisions. Once this was resolved, it paved the way for a faster design approach that would be able to satisfy safety needs as well as desired functionality. With annotated references to supporting requirements, these artifacts were a critical part of the traceability of design considerations for internal and federal review.

Wireframes

Asset Library

Using the task-flow diagrams, design work on the interface could begin. First on the list was to create a custom asset library of widgets. Each was documented with it’s own native styling and behavior then grouped into classes. This provided a key foundation for consistency and reuse throughout designs and development teams would benefit by limiting on-off widget coding. 

Typography

Typography and a Style Guide were defined for all widgets and text elements as this project would be heavily using forms. Safety aspects along with conditional dependencies imposed constraints on the layout of content. For that reason, the typography was handled up front so that we could design to scale. And as with the widget library itself, consistency and reuse were other key factors driving this effort.

Wireframes

Now that the base elements for UI design had been created, wireframing ensued. Key subsystems of the main application were each geared towards specific users and their tasks. As such, I took the approach to align individuals, including myself, with each subsystem. In addition, I managed the design and review process. We started off sketching designs to quickly iterate on concepts and refine the needs for the interface and a content strategy.

Using the team edition of Axure, we were able to check out / in our respective work into a SVN repository that would allow efficient and visible work. Custom report templates were created in Axure to allow us to quickly generate output documentation on a moments notice for key stakeholders which was also managed under version control. The documentation included the details for interactive behavior beyond what was native to the respective widget as well as the styling applied as defined in the style guide. 

Prototype Creation

Due to the complexity of conditional behavior and dependencies, it was decided that prototyping would be based off a duplicate of the wireframe pages. This allowed us to impose whatever means necessary to render the interactive behavior desired without tainting the integrity of the wireframes themselves. By using an interactive prototype, we were able to iterate through the review process faster with both internal and external stakeholders. The prototypes were eventually used in usability testing by a dedicated Human Factors team and allowed data to be collected without imposing on development teams progress on approved UI designs.

Desktop Data Aggregation – Rapid Insight

Usability evaluation, report of findings with recommendations

Update: In October 27, 2021 EAB announced the acquisition of Rapid Insight. The product formerly called “Veera 5” under the Rapid Insight brand has since been branded “Rapid Insight” under EAB.

Visit EAB and learn about Rapid Insight

About this project

Rapid Insight makes powerful and user-friendly solutions that help higher education leaders explore and analyze data in critical areas such as enrollment, fundraising, and academic performance.

Rapid Insight’s Veera 5 is a powerful data aggregation and automated data preparation software that does some amazing things. Veera had already undergone robust design changes for Version 5 and was in the pre-release testing phase. With a pending release schedule, the company did not have the time needed to perform a formal usability study. However, they did want to make sure that they weren’t overlooking things which might have a negative impact on usability as that was a key goal of the Version 5 build.

My Involvement

I was brought in strictly to evaluate the product to identify any usability concerns and provide recommendations for resolution or mitigation.

Usability Evaluation

The purpose of the review was to identify areas that contribute to poor usability of the pre-release version. The goals were to provide an organized list of issues, their relative severity as it pertains to user experience, and to identify recommended mitigation strategies. My approach was that of a new user and it was noted that any limitations in domain knowledge and business case requirements might limit review of specific use cases of more complex workflows.

 

 

 

 

 

 

 

 

 

 

Here’s a look at their release version

 

iOS Consumer Health App

Personas, Task Flows, Storyboards, Information Architecture

 

About this project

This project targeted end users which needed a native iOS application that managed diabetes insulin therapy being delivered via a wearable device. Funding for this project was placed on hold and I had left the project prior to completion. Content has been altered and client references have been sanitized from samples to maintain anonymity.

My Involvement

My role in this project was as a contributing leader for the development of deliverables and to facilitate communication and design reviews with key stakeholders including Product Management and Executive level.

Persona Creation

Personas were created to help use case development to empathize with and understand specific user types’ needs and pain points. Project constraints pre-determined that personas could only be based on a combination of resident Subject Matter Expert(s)’ personal experience and second hand knowledge conveyed by user advocate individuals. As such, these personas would be limited in their ability to validate design goal achievement without user research to back them up.

 

Task flow creation

Task flows are always helpful with working on safety critical projects. By mapping out the use case logic as defined in requirements they helped facilitate a closer relationship with product owner. They also created the opportunity for improvement of the requirements by streamlining use cases and eliminating wasteful loops and dead ends in the flow.

Story board creation

After reviewing the site, it was necessary to reevaluate the workflows for various key tasks. This was done thr

 

Information Architecture

Using the task flow diagrams, we could frame the hierarchy for the information architecture. This would become foundational in determination of optimum navigation methods. It would also help identify areas where content could be best split across multiple views on a mobile device with a limited display size.

 

Music System Touchscreen – Russound

Requirements Documentation, User Flows, Prototype, Wireframing

Russound_TS3

About this project

The TS3 Touchscreen is an offline user interface for controlling a multiroom audio system. It is mounted in the wall and hardwired to a central control system. Like it’s predecessor, it features a combination of mechanical and software buttons for user input along with visual, tactile and audible feedback.

My Involvement

I specified and designed multiple new screens to support the Russound DMS-3.1 streaming media player. The TS3 is the successor to the highly successful TS2 touchscreen and carried over a lot of UI elements including the industrial design and existing screens. This meant that with all the features in the new screen designs, they also needed to respect and leverage existing UX design attributes where beneficial. This presented notable challenges as new features needed to fit within the constraints of the existing industrial design, information architecture structure, and interaction design methodology.

Requirements Documentation

After performing thorough research and competitive analysis to identify market opportunities, the TS3 features and functionality were documented in a Product Requirements Document. This served as the cornerstone for the project using Waterfall  for hardware development. Scrum was used for the embedded software development to the value of this artifact was secondary to collaborative communication.

User Flows

rate_pandora_song

All features were broken out into tasks and User Flows were created to support the interaction design, identify conditional logic and limitations while eliminating redundancy. I used Axure to create the User Flows.

Wireframes

TS3 Wireframe

Annotated wireframes were then created. Each screen element was detailed with its behavior based on use case. I used Axure again as this work would be leveraged for prototype development. While Axure does provide wireframe annotations natively, I chose to create a template for better viewing when sharing or printing.

Prototype

TS3 Prototype Image

The TS3 prototype provided a functional guide for software developers to interact with and was used with participants during usability testing. This allowed concepts and ideas for how users might interact specifically with the DMS-3.1 Media Streamer to be iteratively tested and revised based on testing and developer feedback. This also became a powerful tool in presenting the project to key stakeholders during progress update meetings. As part of an agile process, this was a valuable artifact supporting collaborative discussions with development teams without requiring heavy documentation.

VIEW PROTOTYPE

 

Trail Cam UI – Moultrie

Usability evaluation, Information Architecture, Wireframing & Prototyping

About this project

Moultrie is a leading provider of trail cameras used for wildlife observation and surveillance. The 990i and 880 model trail cameras were two of their most popular products positioned at the top and bottom range of their product line. The company had received user feedback and wanted to take action. 

My Involvement

UX for hardware constrained user interfaces requires an additional set of skills that aren’t seen with web designs. These projects are always a fun challenge.

For Moultrie, I was brought in to evaluate the 990i and 880 model trail cameras with special attention on revising the IA and interaction design. Their goals were to improve overall navigation as well as the configuration of device settings and control of operations for each model.

While many features spanned both models, the major difference that impacted my work was the 990i had a 2″ TFT color display and the 880 had just a two line monochromatic LCD. So there needed to be specific attention on how navigation would apply to two discreet interaction models. 

Usability Evaluation

I took each model through their paces for both operation and configuration of all features and functions. During that process I documented my observations and conveyed areas that I felt had the most negative impact on the user experience. Some were based on the organization of content in the menu hierarchy and others were with the visual feedback and navigation methods provided through the interaction design.

Information Architecture

The content was organized in a relatively wide and shallow menu structure. This caused users to branch out further and further from the root menu’s parent category to accomplish many tasks.  This demand on users’ cognitive load lead to their becoming disoriented and lost in the menu and restarting from the ‘home’ position. Especially on the 880 model which only had a 2-line LCD to inform them.

My biggest change to the IA was to align the content into a narrow and deep menu structure which allowed users to get back to parent categories quickly. This kept familiar territory much closer in their working memory and improved contextual awareness in the menu. Essentially, I put less content into more buckets where the buckets are the parent categories and strung together linearly in the root menu. 

Task flow creation

Task flow diagrams were created to capture the proposed IA and workflows for task completion compatible with both display types in consideration. 

click on image for detailed view

Wireframing

Once we had task flows at a point of satisfaction, wireframes were created. All elements of the UI were annotated along with conditional behavior. Layout and  visual design were also included, while adhering to the hardware limitations for each of the different display types. 

click on image for detailed view

Prototype Creation

Before a decision could be made, I was asked to provide an interactive demonstration of how the new IA and interaction design model would work. I created a prototype to demonstrate a single task for each model trail camera. By using this, we were able to collaboratively discuss the concept and arrive at a final solution faster with a more solid consensus.

click on image to launch prototype in a new tab

click on image to launch prototype in a new tab

B2B Responsive Web – SalesGoose

Created Task Flows, Sketching, Wireframing

About this project

SalesGoose is a B2B SaaS product which facilitates sales engagement for effective time management and accelerated decision making.

salesgoose in montior and iphone

My Involvement

I was brought in as a UX consultant to create the interaction design concepts to support mobile and desktop/tablet device users. This required an in depth review and revisions to product requirements to define necessary business logic. After which I took a mobile-first approach in a responsive design to facilitate cross-browser functionality.

*Project confidentiality prevents detailed versions of deliverables to be made publicly available

Task Flows

Using the product requirements and expected use cases as a guide, I created task flow diagrams to map out the steps and interactions users’ would make in completing the various tasks. A feedback loop was established as these were created to revise requirements for any omissions and/or errors in the business logic that were revealed. The tool I used for creating the task flow diagrams was Axure.

add_edit_clone_un-post_cbo__buyer_

Sketching first

Once the task flows were established, I sketched out concepts to review and revise based on evolving use cases. This was the most efficient way to iterate. The mobile first approach allowed content to be based on business goals rather than layout restrictions as when scaling a desktop UI down to mobile.

SalesGoose Mobile Sketch 1

Wireframes

Once a design was approved, I settled back into Axure to create annotated wireframes. These were reviewed with key stake holders and revised when necessary to meet incremental feature changes and use case scenarios as the project developed.

SalesGoose Wireframe Mobile

SalesGoose Wireframe Desktop

iOS Audio Control – Russound

Created Prototype, Performed Usability Testing, Wireframing

Russound TCH1

About this project

Russound’s RNET Touchpoint allows for direct access and remote control of a multiroom audio system from an Apple iPhone™ or iPod touch™. The Touchpoint provides control of any zone in a Russound RNET enabled multiroom audio system along with metadata feedback.

My Involvement

With the product in the final stages of development, I was given the opportunity to review the interface, features and functionality to identify areas that might negatively impact its usability. I prototyped the interface and tested it with surrogate users and created new wireframes.

Prototyping 

Zone Now PlayingZone ListZone SettingsZone Settings

I decided the best path to take was to create and test a clickable PDF prototype usingscreen shots of the current build limited the screens to specific key tasks. I provided notification screens when users went beyond the prototype capabilities. To save time, surrogate users were recruited from within the company which had no prior exposure to the product. 

Usability Testing

The moderator guide focussed on the tasks which I felt had the greatest UI deficiencies. The context which the questions were asked was based on use case scenarios. Because surrogate users were chased, their pre-existing domain knowledge afforded the ability to use language that might otherwise be leading.      Moderating sample

Reporting

Testing results revealed many features in the UI that had a low task completion success rate. I reviewed the data with the developers and discussed possible solutions to estimate development time and potential risks in prioritizing my recommendations. The data was captured in a spread sheet and then moved into a PowerPoint presentation given to key stakeholders for approval.

Wireframing

TCH1 Wireframe

I created annotated wireframes using Axure for all of the recommended changes which were approved. These efficiently conveyed to development teams the necessary changes saving development time.

Future Concept

Touchpoint Future

I’ve since revisited the Touchpoint project to create an alternate design concept that would lift the user experience up a level while addressing some of the limitations imposed by the original schedule and development constraints.  I created an interactive prototype using Axure that aims to streamline the tasks for selecting audio / video content to be distributed to various rooms in a residence.