Dunder Mifflin Paper Company, Inc. is a fictional paper and office supply sales company featured in one of my favorite shows ever, The Office. Dunder Mifflin is a mid-cap regional paper and office supply distributor with an emphasis on servicing small business clients. With a headquarter located in New York City, Dunder Mifflin has multiple branches across the country, including in Scranton, PA.
For the purpose of this case study, I reintroduced Dunder Mifflin as a paper supplier company with an online presence, giving its clients better paper buying experience.
Problem finding
User research
Problem statement
Goals
User persona
User journey
User flow
Storyboard
Information architecture (IA)
Wireframes & prototyping
Visual & brand language
Design system
Usability testing
I spoke to 5 paper users and business people to understand the challenges they are facing in order to meet their paper needs.
50% feels unsure of trusting paper supplier companies with large orders.
80% prefers to buy paper online to calling sales reps due to busy schedule.
100% feels anxious with standard shipping and delivery with no tracking system.
Problem statement
Dunder Mifflin still uses calls and in-person meetings rather than the internet, causing most customers to leave for the nation-wide chains, and is unable to adapt to an increasingly paperless world.
Users have to find contact information and call the sales representatives in order to place and order, making the process tedious and time consuming.
The copywriting and visual elements don't speak to the identity of Dunder Mifflin as a brand, they lack consistent emotional branding and a clear goal.
Cluttered information and unclear user journey lead to frustration in users, which in turn increases the drop-off rate.
Dunder Mifflin's old website followed dated UI paradigms from an old tech stack, with critical usability issues.
Deep-diving and identifying pain-points in the current Dunder Mifflin website.
I kicked off the ideation process with a comprehensive experience review of the current Dunder Mifflin's website, which helped define the focus areas for the rebranding.
With the Mobile App introduced, I want to highlight what Dunder Mifflin has to offer with a clear message and strong brand identity.
.png)
Dunder Mifflin clients still have to make phone calls to buy paper. Converting from calls to online helps users to save their time when ordering paper.
.png)
To ensure a proper design system is in place to reduce technical debt, and give consumers a better and precise online paper buying experience.
Dunder Mifflin App is primarily used by different personas across varying roles in businesses, education, and healthcare. It is also used by casual paper buyers.
Dunder Mifflin's users range from small business owners, CEOs, office administrators, office employees, etc. Users with busy schedule benefit the most from using Dunder Mifflin's app. However since Dunder Mifflin is also used widely across healthcare, education and fields, our personas have to be flexible and inclusive of teachers, doctors, students, interns, lawyers, and more.
A busy CEO who needs an easier and less time-consuming way to order paper from a reliable supplier whenever they're free because they have no time to talk to the sales representative.
I'm always in back-to-back meetings, so I need to get things done fast, in a click of a button. I want to know that I will get my orders correctly and on time.
A 9 to 5 worker from Cuba who needs an updated bilingual website or app with visualizations and order tracking system to buy paper supplies for their company because they're still improving their English proficiency.
I have a pretty busy schedule at my new job and I don't want to spend too much time translating words just to buy some paper.
A freelance artist living the busy life in NYC who is always in a constant need of varieties in their paper supply. As an artist, they like to work with different mediums to explore their creativity.
I'm very particular with my mediums, and I work with different types of paper all the time. I'd like to be able to see some options when I'm buying paper.
"A fast and easy way to buy 300 reams
of 5 different types of paper."
In order to comprehend the feel and touchpoints throughout the experience from the user's perspective to ensure no drop-off, I mapped out the journey of one of the personas when trying to buy a large amount of paper from a paper supplier.
User flow helps visualize the path taken by a prototypical user on a website or app to complete a task.
The user flow takes users from their entry point through a set of steps towards a successful outcome and final action. In this project, I highlighted three main flows that users might take.
A worker is overwhelmed and has been working overtime. Their manager has given them a task to restock their company's paper supply.
They don't have the time to stop working and call a paper supplier company to place and order.
They use Dunder Mifflin App to look for the paper type that their company needs.
They place an order of 200 reams of paper, and the app gives them an order tracking number with estimated delivery time.
As a return buyer, the ordering process only took them 10 minutes. They go back to their work feeling relieved, knowing that they can track their order.
After a couple of days, their order arrives on time, and they are feeling satisfied with their experience using Dunder Mifflin App.
A storyboard visually predicts and explores a user's experience with a product.
I then hand-sketched a storyboard for a persona to better illustrate and visualize their experience when buying paper using Dunder Mifflin App.
Scoping down to
a primary area of focus.
I took a call to focus on the seamless
'one-click-buy' experience.
Structuring the information architecture (IA)
At this stage its important to be unbiased by visual design decisions, and focus on how the user of the product is likely to react, behave and navigate through the experience. I started off by sketching some paper wireframes, then developed them into digital wireframes and high-fidelity prototype.
Crafting a visual & brand language that is functional yet bespoke of Dunder Mifflin.
The visual language combines functionality with imagery and microelements featuring Dunder Mifflin's products to assist users when deciding what to buy.
The personality of Dunder Mifflin as a brand was crafted to be friendly, assistive, and approachable without being intrusive and overbearing.
A FRIENDLY & ASSISTIVE TONE OF VOICE
Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.
Atomic design system is used to maintain convenience and stable design development process. Keeping in mind the idea of building up from small elements to templates and pages, start by mapping out the foundational elements, or atoms, that will be used in the design.
CLEAN · MODERN · MINIMALISTIC
Atoms
Molecules
Organisms
In my opinion, Dunder Mifflin App as a concept is something that would greatly benefit the business industry. The app helps users to buy paper online with less time, and helps Dunder Mifflin as a business to gain trust in its users.
While designing the app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. Keeping users always in mind while designing and referring back to users’ feedback are things that are integral to the design process.
