214-636-4114 info@rubyredfrog.com

Product Management + Ux/Ui

with case study

“Trent hit it out of the park with his UX solutions!”
Drager Product Group

Case Study

Dräger is an international leader in the fields of medical and safety technology. Dräger has been protecting, supporting and saving lives since 1889.

Target audience was hospital staff charged with ordering equipment and supplies.

Business challenge was that Hospital systems are ditching the distributor and contracting directly with manufacturers, while using their own storage and distribution channels. Drager’s existing distributor system is antiquated and not specifically targeted at US Market.

The problem we were tasked with was to assist Drager upper management in creating a presentation focused on gaining acceptance for redesigning their existing website. The focus was how to let site visitors optimize the online process to more easily view, share, and purchase medical and other products across many categories.

My role was to create a persuasive plan to be presented to CEO and board aimed at gathering support to move forward with new system design.

Who did you work with? Laura Edwards, Sr. Manager for the Center of Excellence Marketing, North America, Draeger 

The solution was a proposed UX/UI design based on industry best-practices and research on a newly emerging business model based on online medical-sales. The final product was in the form of an interactive prototype built within Marvell, a prototyping application.

Invision Prototype

Agile UX Flow

Agile and UX development don’t necesarily play well together. That’s not just my experience, it’s the same position held by The Nielsen Norman Group. But let’s not throw the baby out with the UX water. It just means you have to put more thought and effort into it – and trust one another. Below is a bit about my workflow.

U
STEP 1

Research & Empathy

This is where it starts. First I must stand back and survey the landscape; to understand the context of the project. Largely, I subscribe to the T-Approach. If it is an ongoing project (not a new one), the history may be vital to know as well. From there I begin to gather information, usually first hand from the client, but also on my own as well. I’ll interview as many participants as possible – stakeholders, managers, team members, and of course end-users. Much depends on this initial step, because everything builds on it. Of course, it has to all be in line with the scope and the requirements of the project. In the end, it should touch on these three things:

  • Branding: How the organization presents or wants to present themselves
  • Perception: That I understand the problem correctly
  • Results: The impact of the needed solution on the business

h
STEP 2

One Page Overview
If you’ve read about the Big Bang – that the universe began as just a single point, then expanded and stretched into all that exists – then maybe what I’m about to say will make sense, because that’s what my one page overview is. It’s that single point from which everything follows. In this small document, I try to understand the correlation between the requirements and features of the project – the timeline and ultimate goal. It needs to be as simple and easy to grasp as possible. A form similar to this may help. Creating this overview document often means reading between the lines, seeing the hidden, the subtle, and intangible issues that if not addressed, may endanger the success of the project.

STEP 3

Create Personas
Personas are a valuable way to explore user needs, especially in an AGILE environment. I usually develop several personas – seven or eight to start – to explore all the needs of the user base. I often do user-community research (I don’t just make them up). Focus groups are great. Talking with your customer support is too (support staff are often there at the point of friction), or with product managers whose job is to understand the user community. This is the environment the product to exists in. It also helps create what I call empathy-points for the project. If needed, I’ll start with a very brief story of each character, which is the imagined person-type for this product. I’ll even give these person(s) a face, name, and age to make them resonate and pop off the page. Of course, these parameters should be relevant and based on the requirements of the project. For more on Personas, please see the Persona section on this page.

I have to keep in mind:

  • The frustration/pain points — This is the point of friction or the problem the character is facing that requires a solution.
  • Goals — The ideal reason why the user is choosing to use the app – and will continue using it.

STEP 4

Wireframing
These are little sketches to get a handle on what each screen will look like, in a purely functional way. I prefer hand-sketching wireframes instead of creating digital ones. It’s simply because they’re portable and fast; You can also experiment a lot.  The goal here is to figure out what UI components (and even styles) may be needed. I’ll often go looking for UI inspiration. Because it’s always easier as I have a clearer understanding of what components will be required. Great tools for wireframing are:

  1. Moqups.
  2. Wireframe.cc.
  3. TemplateToaster.
  4. Mockplus.
  5. Axure RP.
  6. Balsamiq mockups.
  7. Justinmind.
  8. Fluid.UI.

STEP 5

Mood Boards
This may not be part of every designer’s process, because it involves look-and-feel. I try to break it down into 3 categories and then subdivide it into design components.

  • Design patterns — This is where I consider modern layout styles, usually needed for different devices. It’s good to identify them off the bat.
  • Color styles — Strictly speaking, color has nothing to do with the UI, nevertheless it helps me get a feeling for the brand and is a reference for color combinations.
  • UI components — Here, I focus on styling, not how elements fit together. For example, I may have a different selection of navigations and an entirely different selection for hero banner styles. Styling can give tension to a design, which brings it alive and makes it dynamic.

I often create Mood boards on Pinterest or within a folder on my desktop. InVision is also a good option for creating a Mood board, as well as a few online tools that have cropped up recently.

STEP 6

Design
At this stage, I should have everything in place, and may have implemented the design as a prototype in Invision. I’ll give myself a break so I can come back with a fresh eye. I’ll usually tone parts of the design down a bit as I try to create a visual path-of-focus for the user. I’ll often:

  • Remove what has no function — The goal of this is to remove unneeded elements from the design. The result is a cleaner design that is less confusing. At this time, I’ll start taking in feedback to refine the design.
  • Add detail — This includes work on the details of the design which might not be easily visible but can make a difference. For example, making sure the border radius of a button and the other components align properly, and have a specific ratio. Or I’ll be busy updating the text of a button from “Start” to “Let’s get started” to make it consistent to the tone of the brand.

STEP 7

Refine, Refine, and Refine
From here I’ll keep refining the design – even while the development process is in progress. These updates, realized during development, can be part of a better user experience and should always updated in the flat design artwork. This can be an essential part of the process, because making sure that any changes during the development are updated in the design makes the project easy to pick up for the next version. And there should always be a next version. 

Example of personas

Personas

Based on the interviews/workshop I set up three personas and referred to them throughout the entire product development process.
 

  • How were personas developed? To develop the personas I relied on stakeholder interviews and online research. 
  • Why were personas needed? Personas were decided upon straight away due to the professional environment the system is used in.
  • What factors went into persona creation? I provided motivational factors for each persona such as the repetitive nature of the tasks, time constraints, budget, approvals needed, inventory system integration, and other factors.
  • This information was vital to gain acceptance from upper management.
  •  How did these personas affect design? They had enormous impact. For example, the “Share” component of the interface was suggested because of the timely need to gather approval for orders from supervisors. This feature was described as “hitting it out of the park” by VP of Marketing, after testing.

User Journey

A user journey is where we start to document the details of how we want people to complete a specific key task within a specific situation, such as documenting the steps in how a user can get a car insurance quote by entering some personal details. These user journeys detail the objectives of each page/step, key features & functionality to aid completion of the page, design hypothesis, user assumptions being made (which we then validate at a later stage with users, if not already done so, any technical considerations, brief sketch of the page and ideally a reference to relevant user stories.

I devised three versions for the user journey of the same task and tested them with prototypes to find out which one works the best.

Guiding Considerations:

  • How was the process determined: Online research, stakeholder interviews, end-user questionnaire, industry standards, surveys of existing systems.
  • How tested: Product managers and stakeholders owners were shown the new process by using Invision.

Customer Journey

Customer Journey (CX)

A customer journey – or ‘Experience Map’ to give it its specific title – is where we start to understand (via various types of quantitative and qualitative research) and plot a customer’s complete involvement in how they interact with the product or service across many digital and human touchpoints (e.g. from researching a product on a desktop, to buying via their mobile and phoning a call-center to make a claim).

In order to get to know the users’ behavior better, I created a Customer Journey Map.

Guiding Questions:

  • What was the whole buying process from the point where the user does not even know the product exists, to adoption?
  • What happens after using the product?
  • What were the main touchpoints where the user contacted with the service?
  • What were the main pain points for the user during the use of the service?
  • What functions, solutions did you find out to treat these pain points?

Customer Empathy

Card Sorting

Card sorting is a technique that involves asking users to organize information into logical groups. Users are given a series of labelled cards and asked to organize and sort them into groups that they think are appropriate. 
I decided on the main categories of the Drager project with a Card Sorting session, asking these questions:

  • What is customers main purpose?
  • What type of card sorting method did I work with? (Closed or reversed, online or in person)
  • How did the participants gather the information?
  • What kind of new navigation structure do you suggest?

Sketches

I usually start the design process with low fidelity sketches. This is the way I iterate through many design options quickly.

Guiding Considerations

  • What was the main purpose of your sketches? Is it presenting, testing, brainstorming?
  •  How many different versions will you need?
  • Which version did you choose to go on with and why?

Wireframes

At the beginning of my design process I created wireframes for testing purposes.

Guiding Considerations 

  • Why was it useful to do this?
  • What kind of wireframes did you make? 
  • Low fidelity or high fidelity?
  • What tool did you use for this?
  • Did you use them for testing? 
  • How many iterations did you have?

Hotels.com work for App Store

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Sketch.

Guiding Considerations

  • What kind of visual style did you follow? (fresh, corporate, dark, light)
  • Did you follow any guidelines? (Material Design, iOS Style guide, etc)
  • What platforms did you design to?
  • Is there any little detail that you are really proud of?
  • What inspired you to use this style?

    Workflow

    We usually start with in-depth research to understand your business needs, then move to wireframes, sitemaps, prototypes, and development. This careful approach may seem overkill, but it goes a long way to assisting you in creating your content.  

    Time Management

    We fit our timeline to best fit our client needs and resources.

    Customer Participation

    It is vital that someone is an advocate for your customers. We are happy to take on this role, strengthening your message. 

    Market Research

    Initial market research is a vital part of any project. It insures high user adoption and satisfaction.

    Project Management

    We work closely with every one of our clients to ensure all goals and other success criteria are met.