Web
Modus Media Manager:
Adding Assets
Redesigning and enhancing the Media Manager asset upload process for admins by creating more intuitive controls, adding new capabilities, progress indicators, and simplifying the upload process.
Project Overview
Platform Background
The Modus platform has two main components:
• The Modus: Sales Enablement app (for sales reps).
• Media Manager (the admin tool that manages the app) (this project).
Company admins use Media Manager to fill in the Modus app for their sales reps with their branding, content, courses, and more so the sales reps can present and share content with prospects. Think of the Modus app like a prebuilt, but blank template. Companies just need to fill in the blanks with their branding (logos, colors, etc.) and add the content they want to show in the app in order to make it look like their own.
My Responsibilities
For this project, my job was to completely redesign, revamp, and add new functionality to the asset uploading process for admins in Media Manager.
My main contributions to this work included problem-solving, research, wireframes, designing interactive prototypes, presenting to leadership, creating stories in the backlog, testing the released product, and following up with feedback given to continuously improve the user experience.
Things to know before continuing…
For privacy reasons, I cannot show real Modus client instances. So for this project, I created a brand called ‘Grumble’ to show off the Modus interface and what is possible. Grumble is a healthy meal delivery service for personal, event, and business use.
Design Needs
Complete functionality redesign, new functionality, and restructure
My Role
Head of User Experience and Creative Services
Teams Involved
Leadership, Development, and Customer Success
Date of Project
2023
Operating Systems
Web
Design Tools
Adobe XD, Zeplin, and Monday.com
My Design Process
This is the process I used during this project to ensure the end product was user-centered, intuitive, and easy to use. This process involves understanding the needs and behaviors of the users, identifying their pain points, and designing a solution that meets their needs, while also achieving the determined business goals.
It’s important to note that this design process is not always linear and may involve going back and forth between the steps to refine the design.
Define > Design > Develop > Repeat
The Problem
Admins in Media Manager are finding it challenging to efficiently add and manage assets in the uploading process due to unclear navigation, unintuitive controls, and a complicated flow.
This is a screenshot of the original (old) design + problem areas.
Phase 1: Define + Research
1. Defined the Objectives and the Goals of the Asset Uploading Process
First, we defined objectives and goals for the asset uploading process, what success looks like, and defined starting points to work off of. This information was based off of our own understanding of the current flow, what it looked like from a development standpoint, and from previous client feedback / experiences.
As an admin, I want to effectively create and distribute content to my sales reps.
Known Admin Goals (End-users)
As an admin, I want to add metadata to the content I add in Media Manager.
As an admin, I want to individually edit and bulk edit assets during the upload flow to save time.
As an admin, I want to efficiently find and add multiple assets at one time.
As a developer, I want to clean up old code and start fresh on new functionality.
Business Goals (Modus)
As a developer, I want to focus on innovation that will benefit all clients.
As a customer support rep, I want solutions for our clients from support tickets on the same issues.
2. Reviewed the Existing Uploading Flow and Interviewed Current Users
Audited and analyzed the current uploading flow, asked what was working and what was not, and determined areas that could be focused on for improvement.
What does the current asset upload process have, that admins want to keep in the new process?
Content structure (admins and users like how the content is organized)
Adding multiple assets at once
A way to add settings in bulk to assets
Creating user-curated groups of content
What areas from the previous asset upload process can be improved for the admins?
Navigation and page structure
Main and secondary controls (button hierarchy)
Overall flow (simplify), there are many features on one page instead of a step-by-step process
How is this causing pain for the users?
The page doesn’t have a clear place to continue or cancel the flow, resulting in the abandonment of tasks.
Controls that do the same thing but look different can be confusing and misleading.
The complicated flow can make this task more stressful and overwhelming for admins.
After reviewing previous and current feedback, and reflecting on business and user goals, these items became the focus points for innovation.
New upload capabilities
Bulk-editing additions
Simplified + intuitive flow
Progress indicators
3. Reviewed User Feedback and Data Analytics
Collected and analyzed user feedback about the future vision, the focus points in mind (listed above), and any other functionality enhancements that could be made in the process. Looked for reoccurring ideas, issues, pain points, and improvement opportunities that could help during the redesign.
Findings:
“A way to add content without it being assigned in the asset structure.”
“More actions to take on assets during the upload process.”
4. Reviewed the Competitive Analysis of Similar Tools
Reviewed the competitive analysis and how we differ in the space in the focus points (listed above). This analysis included a feature comparison, an overview of where we are in the software space, and a rating differentiation on the different platforms to really understand their strengths and weaknesses.
A few public tools that were reviewed:
• Dropbox
• Google Drive
5. Reviewed Existing User Personas and Target Users
We reviewed our existing user personas to get an understanding of the users who will interact with Modus’s Media Manager. The main personas for Media Manager are the admins who are in charge of the administration of the app. In this use case, they will be creating and updating content in the sales enablement app for their sales reps (app end users).
6. Reviewed the User Journey Maps
Reviewed the user journey maps for each persona to understand the process each would go through while using or interacting with this sales enablement app or child functionality. Then added where the new proposed functionality could play a part during each step of their experiences.
(* = Modus Feature or Functionality)
Sales Managers
Marketing Managers
7. Created Storyboards
Once the user journey maps were reviewed, I focused on specific interactions, scenarios, and tasks within their journeys. The goal here was to visualize the actions and interactions between the platform and the user interacting with it.
Phase 2: Design + Prototype
1. Brainstormed, Collected Inspiration, and Created Mood Boards
Creating a mood board helps me shape future visions and helps the overall desired aesthetic come to life.
2. Sketched it Out and Created Low-Fidelity Wireframes
After gathering design inspirations and reviewing research findings, I started to sketch out possibilities for the uploading process and how the flow could possibly work.
3. Created High-Fidelity Wireframes and Shared in Review Meetings
Utilizing the sketches that were created, I started to make high-fidelity wireframes to get a grid system and solid base in place. Next, there was a meeting with company leadership, a development leader, and a marketing leader to get feedback on the direction it was going.
Testing Review Findings: (7 Tested Users)
• Tested users suggested indicators on overrideable areas in the bulk editing flow.
• Tested users suggested more options in the bulk editing flow (advanced settings dependent on asset types).
• 100% of tested users preferred the newly designed process.
• Tested users were happy about the new ‘unassigned’ and ‘assigned’ asset tags to differentiate if the assets had an assigned location in the asset structure.
4. During the wireframing stage and mockup stage, I referenced the Modus Design System I created
As the design process continued, I’d come back, add, or update components so that once the developers were ready to create this new functionality, they’d have this to work off of as well as the Zeplin files. This design system was also used for future functionality in order to ensure consistency and accessibility and provide brand guidelines.
Colors, typography, and buttons
Modals, search bars, and breadcrumbs
Icons and wording (taxonomy created by another team)
Navigation bars, menus, and many other components
5. Created Mockups, Solidified UI Design, and Created Prototypes
Once the design system and main components were approved and ready to go, I started to build out the main high-level structure prototype.
6. Presented to the Team, Collected Feedback, and Adjusted
Once the main high-level prototype was approved, collect feedback around the different sections and more specific flows.
Findings:
• The team commented highly on the new flow for uploading assets.
• There was a request to update the layout of the asset editing screens (beyond the original scope).
7. Started In-Depth User Testing
Once those prototypes were ready, they were brought into and presented in meetings by different people to get opinions from prospects, clients, and inside the business.
Highlights:
• Tested users commented highly on the updated upload modal when choosing files instead of dragging and dropping.
8. Made Adjustments, Tested, and Repeated
During the testing phase, many meetings were held to make sure everything was just right. Iterations helped make the product better.
9. Once a design was finalized and approved by all sides of the business, I mapped out the desired animations, hover states, etc. for the developers
Highlighted + fan-favorite animations:
• Hover animation with the drag-and-drop upload process.
Phase 3: Development + Refine
1. Listed Priorities and Wrote Stories
The project team and I wrote and kept track of the stories.
2. Tested and Supplied Feedback
The project team, QA, and I tested and kept track of the stories that were written before deploying.
3. Implemented
The updates were ready for showtime!
The Solutions to The Main Focus Points Listed Earlier
Improved upload capabilities
• Provided admins with a way to drag and drop assets.
• Created a new modal for uploading assets when manually searching for files.
Added bulk-editing options
• Provided 18+ new editing options when editing assets in bulk (before only had two options).
• Added multi-selection during the uploading process for efficiency.
Simplified + created a more intuitive flow
• Separated the steps of the upload flow into different sections vs it all being on the same page at the same time.
• Added hierarchy to the buttons, primary, and secondary controls for clarity.
Added progress indicators
• Added indicators to let admins know when and where assets are at during the uploading process.
• Added indicators to let admins know which assets were newly added to the library and added tags to inform the admins on the status / location of assets.
Take a look at
The Prototype Videos
Since these videos are based on a recorded prototype within design software, some animations and interactions are not shown.
Media Manager
Uploading Assets
In this example, you’re previewing how an admin would upload assets, view an asset individually, edit assets in bulk, and add the finished assets to the library.