Please note that some artifacts and sensitive information will be post-processed or excluded for confidentiality issues. All rights reserved to the publisher and designed institution(s) with no distribution.


overview

J. Knipper and Company is a fully integrated direct marketing and drug sampling firm dedicated to the pharmaceutical and healthcare industry. Our client has a list of products for drugs and medical equipment ordering and distribution designed for different people or organizations such as doctors, sales representatives, and drug stores, etc. Because of that, it makes it difficult for users, especially head office users to get all relevant order information for a specific customer.

Knipper reached out to us for a product that allows users to find all ordering information at a centralized location. This project consisted of two stages. The first stage was meant to deliver a conceptual design to get approval for development from major investors. The second stage was for elaboration and providing a detailed design solution that covers all business requirements.

I was the only designer for the first stage and the supporting designer for the second stage to provide UI-related works such as wireframes, prototypes and style guide.


Process

We applied the double diamond design process(see picture below) for both stages. Compare to other projects, the subject to consult and research from were our main stakeholders:

  • Senior product analysts from all related products

  • Customer Representative Manager from all related products

  • Lead solution architect from all related products

Compare to the traditional approach where I will have more time to discover the issues and define user stories. In this project, we needed to provide design/prototype as quickly as we go due to the intensive schedules.

Image credit to Testingtime

Discovery & Define

For the discovery and define phase in the first stage, my desired outcomes were to:

  • Understand the business requirements and why so

  • Establish design strategies that are both economic and development-friendly

As I was the supporting designer for the second stage of the project, I wasn’t able to participate in user reviews or workshop sessions due to the tight budget. My day-to-day contact was either the principal BA who was responsible for most of the communication and/or the PO/lead designer who was responsible for the IA and user flow. My “discovery & define“ was to focus on:

  • Clarification on the business context/user flow

    • Why so? For whom?

  • Technical opportunities and constraints

There were some major challenges for this project regardless of the stage differences:

  • Unfamiliar with the context

  • Request for quick design and prototype

  • The volume of data required to process and design was quite overwhelming

  • Frequent change of requirements in stage II and looking for quick turnouts

  • Intensive schedules

    • We have review meetings three times a week which gave me a very short time to identify all the gaps

To address all the challenges and support the project, I tried the following things:

  • Consult with designers, BAs, and developers who had worked with the client before

    • We have helped the client ship multiple products. I got myself familiar with the background and filled the knowledge gap by having conversations with coworkers who had worked with the client, and going through relevant documentations/artworks

  • Reference the wireframes from previous projects and identify UX/UI patterns

  • Engage in design critique sessions with other designers when run into hesitations

  • Create and share documents for meetings and business requirements to ensure all feedback was up-to-date and captured beforehand

The meeting notes and business requirements were very important documents that helped us to align business requirements and identify user stories and allow us quickly move to the design iteration.

Design Iteration

As I did for other projects, I usually do a 3-point check-in between the design, the development, and the business. There are four steps for a user story iteration:

  • Internal alignment session

    • Align requirements on a whiteboard or via sketches is possible

  • Internal check-in session prior to presenting to the client

    • Verify all use cases and businesses pursuing

  • Stakeholder review

    • Present the solution to the client for a roundtable critique

    • Gather additional feedback via offline prototype

    • Technical feasibility check

  • Sign-off

    • The client will sign-off on approved user stories through emails or google sheets

We use low-fi prototypes to communicate and test with the client until all requirements were met. Unlike other projects, this project was rather demanding, quite data-heavy, and needed to identify alignments between different product teams. We were experiencing frequent change requests, thus an intermedium prototype would better serve us.

Example UX Sketches

Example UX Sketches

One of the challenges was to better manage the amount of data. This was a data-heavy project and the client was demanding to present as much information as possible so that users won’t need to drill down to several levels. Thus from a design perspective, we need to know the following things about the data set:

  • The priority

    • By usage

    • By target user group

    • By business channel

  • The hierarchy/relationships to other datasets

  • The viewing angle(sorting logic)

    • By target user group

    • By business channel

  • The way to acquire

    • By request only or

    • Always accessible

On the UI level, multiple view-switching components, such as tabs, accordions, and toggles, were used to prioritize, sort and present relevant data to users.

Sample wireframe

Sample wireframe

Sample wireframe

Sample wireframe

Hands-Off and Support

Once we received a green light on a user story, I prepared the wireframes and export them to Zeplin along with the most updated design system and all the necessary graphics to ensure a smooth transition between design and development. The wireframe inventory will not cover the user flow. Developers could reference the clickable prototype for such information. The design will stay supportive until a user story has been committed and tested.

Wireframe Inventory

Component Library & Style Guide

impact

This was my last project at AppCentrica and unfortunately, I wasn’t able to see it live. This was an intermedium investor check-in in which our client present the prototype I created. According to our client, it was well received.