Product Management + Ux/Ui
with case study
“Trent hit it out of the park with his UX solutions!”
Drager Product Group
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.
As to the research for this project, I already knew what I was gonna do. The goal is to create a web app that allows hospital administrators and support staff an easy, efficient, and precise. An experience like this already exists and has set the standard for such applications: Amazon. Of course we’ve all used Amazon (right?), and even though this app is different in many ways, it remains a solid starting point, even though the target audience is very different.
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
One Page Overview
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.
- Axure RP.
- Balsamiq mockups.
- 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.
- 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.
Refine, Refine, and Refine
Example of 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.
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.
- 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 (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.
- 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?
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?
I usually start the design process with low fidelity sketches. This is the way I iterate through many design options quickly.
- 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?
At the beginning of my design process I created wireframes for testing purposes.
- 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
Once I tested out all usability mistakes, I started designing the final screens in Sketch.
- 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?
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.
We fit our timeline to best fit our client needs and resources.
It is vital that someone is an advocate for your customers. We are happy to take on this role, strengthening your message.
Initial market research is a vital part of any project. It insures high user adoption and satisfaction.
We work closely with every one of our clients to ensure all goals and other success criteria are met.