Created: 2018-2019
Project: Full visual and structural redesign of MACC Web App for a major pharmaceutical client
Goal: Universal Graphics designed, developed, and currently maintains a web application/digital storefront for one of their clients, a major national pharmaceutical giant. The project is called the Market Access Customer Cloud, MACC for short. It is a private digital storefront that displays all the physical, digital, and printed products users can order. The users are pharmaceutical reps and with this website, they can customize and order these products to distribute to healthcare professionals. Unfortunately, the original app was difficult to use, didn’t have a responsive layout, and didn’t match the client’s updated brand. The users often had to contact Universal Graphics to figure out how to get from point A to point B and sometimes they weren’t even able to reach their end goals at all. The point of the redesign was to create a cleaner user-friendly interface with a cohesive structure that would allow users to reach their goals, be responsive across all digital platforms, and reflect the client’s brand.
My Role: As the solo UI Designer at Universal Graphics, I was responsible for taking on this large scale project. I had to understand the problems with the original app, figure out what the users needed in order to have an easier journey customizing and placing their orders, design an entirely new site that solved these problems, and hand off the assets to the developers. Ultimately, it was my job to provide the users with a much more pleasant and simple ordering experience. My process included research, writing user personas and empathy maps, creating low-fi and then hi-fi wireframes, producing multiple iterations of certain features and pages, designing the final screens with graphics and company related branding, organizing a style guide, and handing off my exported files and assets to the developer team. In total, I designed 126 screens and created nearly 200 thumbnail product images. The final layouts and UI components for just a few of the most important pages and features are documented below.
Rethinking the Original Web App
These are a few screenshots of the original MACC digital storefront. After researching what the users were having problems with and assessing the overall design in relation to industry standards and best practices, I made a basic list of all the problems that would need to be solved with the redesign:
Too many clicks to get from Point A to B (unnecessary subpages)
No main navigation
Unorganized and confusing
Not enough logical direction or visual hierarchy for the user
The pop-ups and lightboxes are not responsive on all screens
Links that lead to nowhere or wrong pages
Users want a user account
Solutions and Goals
Make user journeys obvious, efficient and easy so they don’t need to contact us for help or direction
Develop a cleaner interface that contains uniform images and icons, working links, main navigation, and directional CTA buttons and messages that guide them to their goals while maintaining the aesthetic integrity of the client’s brand standards
Flexible features and modules to accommodate future changes
A Simpler Log In Page
This web app is private and access is only granted to select groups of people that are approved by the client. The Log In page is where it all starts. This new layout is more secure, visually accessible, and less harsh on the eyes than the original one was. It gives clear directions about what has to be done on this screen i.e. “Log in to your store”. The form fields are clearly labeled below that. The active and error fields are just two examples of the many different field states that I made for the full form components library.
Navigation and Card System
The original web app did not have intuitive navigation. The footer contained a few links to other pages and categories, but there was no organization and users typically expect to see these links at the top of a page rather than just at the bottom. The products on this app can be broken down into 3 categories: MACC Products, Pull Through Templates, and Convention Meeting Materials. So I developed a simple top nav bar for these categories and I devised a flexible card system for each page’s unique products as some required dark vs. light backgrounds. I also added an intuitive and detailed filter feature for the MACC Products page with collapsible categories and checkboxes.
Order Journey for Printed Pieces
Once a user chooses and clicks on a print product, it opens on its own page rather than triggering a cumbersome lightbox popup that cuts off most of the information. This page has a clearly labeled customization field and a button to move onto the next step of the order process. The next screen contains a longer form to enter the user’s and recipient’s contact information. In some instances, a person may need to send a product to multiple people at once. Accounting for this possibility was a challenge, but after a few iterations I finalized a clean and simple layout where multiple addresses could be added, deleted, and reviewed. The client also requested to have an option to upload an external Word, Excel, or PDF document that contains multiple addresses, so I added an insert field to a new tab and labeled it accordingly. When the user is ready to place their order, they are taken to a confirmation screen to ensure that it went through successfully.
Devising Behavior Patterns
Some products on the storefront are strictly used for digital purposes and users can email them to one or more people. Multiple recipients can be added to this form in the same way they can be added to the previous one with multiple mailing addresses. Though the mail and email form fields are different, their features function the same way so users can learn and expect the same behavior across the whole site. Once they send a digital file, they will once again receive confirmation feedback.
Order Journey for Downloads
A user’s order journey for a downloadable item is the most simple process of all. These pieces don’t require any customization or forms to fill out. The user can just click on the download button and they’ll receive confirmation feedback just like all the other processes.
User Account Pages and Components
The client requested that this new app have personalized account features for each user. I added a profile icon in the top nav to expand a dropdown menu that allows users to view their favorite products and order history, change their password, or log out. Designing these screens prompted me to add other relevant assets such as warning cards and empty states.
Takeaways
Working on this project as the only digital designer at the company was a big venture. It really allowed me to have a hands-on approach and take the initiative to learn new processes and programs in order to produce the best product in the most efficient and thorough way possible while respecting the user’s needs and industry best practices. I had the challenge of designing a whole system and interface for as many common scenarios as possible and creating a flexible but consistent order journey pattern for each print, digital, and downloadable product. Solving this problem required thinking ahead and considering how features and structures could be adaptable to most user situations. I successfully designed a large scale system that directs behaviors and guides users to reach their end goals with proper labels and directions along the way. My design is currently in the process of being developed.