Persona

After conducting research, a user persona was created to represent the demographics, goals and frustrations of a target user group which in this case would be administrative staff, typically medical administrative assistants and office managers would most commonly be assigned such tasks. Its purpose is to help better understand the users and further drive user-centered decisions throughout the process.

User journey map

The user journey map was created to be used to visualize the steps a user takes when completing the task of ordering and tracking medical supplies. This helps to understand the user’s usual experience including their actions, goals, pain points, emotions, and pain points at each stage.

Pain points

Through the user journey map, specific problems, frustrations and challenges were identified throughout the process of completing the task. Each point is important because it identifies areas where users struggle so improvements and solutions can be developed.

Goal statement

The goal statement focuses on defining what a user wants to achieve and guides the design process toward meeting that need. Its purpose is to provide a clear, focused understanding of the user’s objectives which help to encourage effective and meaningful solutions.

User flow 

Through the user journey map, specific problems, frustrations and challenges were identified throughout the process of completing the task. Each point is important because it identifies areas where users struggle so improvements and solutions can be developed. The user flow was created as a diagram that shows the paths a user takes to complete tasks within the product. It provides a map of how users would be able to move through the experience in an efficient and intuitive way.

Sketching wireframes 

I created paper low-fidelity sketches of wireframes for mobile devices to quickly explore and communicate user interfaces with the most important features. These early ideas can be built upon into becoming a clearer, more structured format for testing and discussion.

Low-fidelity wireframes

After sketching the main screens, they were transitioned into low-fidelity simple digital layouts digital wireframes that outline the basic structure and functionality of the main screens without detailed design elements like color, typography, or images. Adding on to the designs becomes a lot easier now that we’re continuing with a design software.

High-fidelity wireframes

After developing and testing the low-fidelity wireframes, I translated the validated concepts into high-fidelity wireframes to bring the final user experience closer to the intended product. I refined the layout, visual hierarchy, typography, color palette, spacing, components, and interactive elements while maintaining the structure established during the earlier wireframing stage. This phase helped visualize the complete interface, create a consistent design system, and ensure that key user flows were clear, intuitive, and aligned with the overall product goals.

Usability study

A usability study was conducted to evaluate the interactions of the design. By observing the process of completing tasks through the screens we can identify any errors or improvements needed before development. 

One of the changes made following the usability study was improving the order card layout by adding more white space, making the information easier to read without removing any content. Another update introduced the option to remove an order listing once the delivery had been received, helping users keep their order history organized.

The search bar was removed from the beginning of the ordering process to support a supplier-focused workflow. Since multiple suppliers often offer the same products at different price points, organizing orders by supplier creates a more efficient experience. This allows users to purchase multiple items from a single supplier instead of placing separate orders across several vendors, helping streamline the ordering process and reduce complexity.

The ordering process was redesigned from a fixed, step-by-step flow requiring users to complete every stage before purchasing, to a more flexible system where users can add items and access the cart to complete purchases at any time. This change allows users to prepare orders gradually and place them when ready, creating a more adaptable experience. Separating product selection from purchasing also simplifies the workflow, making both tasks easier and more efficient to complete.

Style guide

In order to ensure visual and design consistency across all screens a style guide was created. This acts as a set of standards that defines how the final design should look.

Final design 

After applying the needed changes spotted from the usability study, the final high-fidelity design was completed for both devices. This was the detailed version of the app and website version of the product which reflects how it will look and function when developed. The final blueprint was now ready for development. Here’s a highlight of a few keyframes: 

Responsive website

A responsive web version of the app was designed too because it was initially requested. Once the mobile foundation was established, the design was expanded to desktop layouts, creating a flexible experience that supports users across multiple devices without compromising the functionality. The website version allows users to manage orders, track deliveries, and access supplier information from larger screens as well. This provides the ability for users to use both mobile and desktop devices. Delivering both versions helps improve accessibility and usability for users across doctor office administratives, which usually use desktop or have to be on-the- floor for certain tasks. Designing mobile-first was the most effective approach for this because it prioritized the essential features, simplified the workflow, and ensured the core user experience remained intuitive.