Jasmine Kim
11 months
Solo designer, Team of 6
Figma | Miro | Jira
Overview
Core by 5th Kind is a Digital Asset Management (DAM) software that helps production and gaming studios manage their complex workflows — to view, share, and approve assets securely across their teams.
With production studio users’ increasing dependence on virtual workflows, I was tasked as their first in-house designer to investigate critical workflows for the new iOS app experience.
In order to meet the various needs of stakeholders throughout the project, I leveraged the UX framework to involve the product owner, project manager, sprint lead, client, and QA. Through a collective effort on an asynchronous workflow, we launched a beta mobile app for our key clients, Marvel Studios and Amblin Partners.
Problem
Our users from production studios needed an on-the-go mobile experience. However, they could not achieve everyday tasks on our outdated mobile app.
Objectives
- Scrap older mobile app and build a new iOS app with the Flutter framework.
- Identify and validate our user base and their mobile workflows
- Establish best UX practices to improve the usability of the mobile app.
Design Process
Our team experimented with a scrappy agile method and re-evaluated it over time.
Understand
Stakeholder interviews
Product Discovery
Research
Usability Audit
Competitive Analysis
Strategy & IA
Sitemap
User Flow
Design
Wireframes
Hi-Fi Designs
Test
User Testing
User Feedback
Understanding the Backstage Challenges
Stakeholder interviews | Product Discovery
Kickstarting the mobile project begged our first question: production studios consist of tens of thousands of people, so who exactly are we designing for, and what are their current experiences like?
In order to better understand this problem, I blocked out the first two weeks to sit down with both our domain experts and current users of our desktop product.
Picking the Brains of Internal Stakeholders
I conducted an unmoderated interview the VP of Client Services, the Support Team, and the CEO, who all agreed that the mobile experience was a growing frustration among the production studios using our software. I also noted from these interviews that we did not have clear documentation of existing use cases, i.e. were they even using our mobile app on a regular basis?
Multiple clients have pleaded to make the mobile app more streamlined and adorable.
- Paige, VP of Client Services at 5th Kind
Power Users Unveiling the Hard Truth
The PM and I sat down for a product discovery session with our power users, aka the admin users that set up projects and tagging systems for their teams to organize and share their digital files.
While they themselves were able to navigate our system due to their years of experience, they found that their producers, directors, and other non-admin users were not — in fact, they just needed a simple mobile version of our software that allows them to access these assets, on-set or during production.
Actors don’t bring laptops - we pass out mobile devices for script, but it’s hard to open and load these assets on the screens.
- Kelsey, Production Manager at Marvel
- Most on-set production people use mobile devices for video and photo reviews
- Producers, executives, and actors needed offline access due to their itinerant schedules.
- The app is currently a big learning curve that directors and actors don’t have time for.
- Conduct a proper heuristic evaluation of our current mobile app
- Generate a Usability Audit prioritizing areas of design opportunity
- Define the constraints and project scope
Research: A Hard Look at Our Product
Heuristic Evaluation | UX Competitive Analysis
There were many pain points reported by users that were not properly addressed, so I decided to evaluate the product myself as a first-time user. In order to scrap the older mobile app, I needed to understand how these pain points prevented the production staff from properly managing their assets, so I also conducted a competitive analysis to compare the mobile DAM experience.
Evaluating the Current Mobile App Experience
My priority out of this exercise was to identify and prioritize critical usability issues discovered in the evaluation. I found the N/ng Usability Heuristics especially helpful in validating these usability issues.
As I delved into the major touchpoints of the app — Log-in to Inbox, open Inbox Items, and open Files — I discovered many areas presenting critical usability themes (see screenshot below).
What I expected to take 3-5 minutes to complete these seemingly simple workflows took three times as long to figure out.
With limited time, I clustered these issues by their severity of impact. Using N/ng Metrics, I then ranked these issues on a scale from minor to critical impact (metrics report not shown due to NDA):
1 = not a usability issue, to 5 = usability catastrophe
Below is a close-up screenshot capturing some of the critical issues I marked from the mobile app’s major touchpoints.
So what were our competitors doing?
After researching some competitor apps that provided similar video and asset management platforms, I conducted a rapid competitive analysis to document best UX practices for these mobile experiences. Direct competitors were B2B enterprise mobile apps, while indirect ones consisted of mostly B2C mobile apps, such as Vimeo and Frame.
As I tested each mobile app, I noted the following observations:
- B2C competitors had an intuitive, visual-heavy dashboard of files that made it easy to navigate files and pages.
- B2B competitors shared the same naming conventions that appeared to match the mental model of production studio staff.
- Empty states were clearly defined by prompts or suggestions.
- Top critical usability issues in the current app were related to poor information hierarchy and accessibility for major user touchpoints
- The B2B competitors shared a similar naming convention system
- An intuitive navigation pattern from B2C competitor apps presented a design opportunity for our app
- Create a sitemap visualizing information architecture
- Define our personas and use cases
- Create a user flow presenting ideal navigation and priority use cases
Navigating an Unexpected Project Scope: The iPad
Personas | User Flow | Sitemap
In the middle of our strategy phase, we faced a client request to prioritize building a tablet app over the iOS app, precipitating a new plan. Because my research findings also applied to the tablet experience, the VP of Product gave the green light to validate these use cases for the tablet experience.
In building a sitemap, personas, and a user flow that applied to the general on-the-go experience for production studio staff, we were quickly able to define priority use cases for this project.
Refining the Structure of Our Mobile DAM App
To start, I worked with our contract designer to construct a sitemap for the current mobile app experience. This visualization helped our team get aligned on our existing features and design gaps.
What we came up with here is the refined version. The important takeaway from this sitemap was that our major touchpoints — Inbox, Package View (Inbox Item), and Viewer (Opened File) — carried quite a lot of desktop features that we had to refine as we consider a smaller screen with a more “simple” experience.
The box in red color, for instance, listed out a lot of desktop functions that we realized may not need to be included in mobile, after speaking with the users.
For instance, would film directors, project managers, or actors need a settings function on their mobile devices to pick apart which files need which viewing restrictions?
Our assumption was no, as this was the admin users’ jobs, and they used their desktops for more complex workflows.
Defining our Users, Needs, and Motivations
After asking plenty of such user assumptions, I dived into defining our project personas. While having coffee chats with Steven Spielberg and Scarlett Johansson remained a pipe dream, I was able to gather their goals and needs from speaking with on-set staff. Kelsey, our backstage informant and Marvel's Production Manager, helped us describe our personas:
Film executives are sometimes on boats
Directors and Producers will need to review film cuts and videos while they’re on the road or “off the grid.”
Talent approvals
Actors and actresses routinely approve or “kill” photo shots, even during their tight schedules.
Managers & on-set chaos
During production, Production Managers and Asset Managers distribute scripts on set via tablet devices, instead of paper scripts.
- The tablet experience requires different constraints due to layout, size, & more complex native features
- Film executives, talent, and managers varied in use frequency and file types they would view.
- Wireframing and iterating Tablet designs
- Hand off to UI Designer for High fidelity designs
Design, Iterate, Repeat
Wireframing | High Fidelity Designs
Sketching the End-to-End
The first few iterations consisted of exploratory sketches and med-fidelity wireframes that addressed critical user stories. The first challenge was the general navigation experience: how might a film director navigate throughout the app as soon as he or she logs in? Below are concept sketches the viewing experience on mobile vs. tablet devices.
Rapid Feedback Time
What was a major workflow barrier at the beginning of the project was getting aligned with our stakeholders on which use case to prioritize. So I decided to structure my weekly design critiques by giving a refresher on priorities, presenting designs, and save the Q&A and feedback at the end.
Delegating Visual Designs
Throughout the multiple iterations, I worked closely with our contract designer to delegate specific workflows and specs for high-fidelity designs.
It was important that our asynchronous team could access all design iterations and changes through a single source of documentation — We created a project file to better manage the design handoffs.
Defining atomic components helped us create more complex local components throughout the project. Below is a screenshot of what was the most important workflow: playback of production shots, cuts, and of course, the scripts.
Feedback & Testing
User Testing | Feedbacks
Direct feedback was a crucial part of developing this app, so the PM helped us organize a monthly moderated user feedback sessions with Marvel. Our participants consisted of Production and Asset Managers who were deeply interested in the mobile workflow.
Presenting to Our Users For Feedback
Feedback sessions were unfortunately not as regular as we had hoped, given our participants’ busy production schedules. However, when we did, we gained a lot of valuable verbal feedback and insight into our current mobile task flows, which then went through several design iterations.
This was a sample presentation we used for Marvel.
Formalizing Design Reviews and Testing
Given an expedited deadline, I dedicated most of my effort in testing and providing design feedback for the almost-finished app.
With the last push for testing, the PM, Client team, and I conducted the User Acceptance Testing (UAT). We all worked closely to ensure that our feedbacks were properly communicated to the dev teams.
Outcome & Takeaway
Below are the designs for the mobile experience - while we did prioritize the Tablet designs, we were also able to continue designing for the iOS app and I find that the old vs. new designs are captured quite well here to demonstrate my point.
Inbox Content View
Old vs. New Designs
By centering the navigation experience on the footer and major call-to-actions, the user can navigate much more refined actions,
e.g. sharing files, filtering files by file size
I love it. It seems straightforward and easy for who sends or receives assets!-Kyana, Executive Assistant at Marvel
Playback View
Old vs. New Designs
The playback experience is much more refined and consistent with best mobile UX practices. Take our Comments, for instance — users can immediately type on the comment input field.
Looks amazing! Clay [Spielberg’s assistant] liked it too. Can’t wait to see the app in action.-Shira, Vice President of IT at Amblin Partners
Exactly what we were envisioning, I’m happy. Now people can figure it out on their own once they go into this app.
-Matthew, Head of Digital Operations at Marvel
Our MVP living design system language resulted in saving our annual company cost by $51,350.
Previously, any development of a new feature at 5th Kind required immense tech debt and endless iterations, but by introducing a new framework and a design system to develop a brand new mobile app, we were able to cut down the costs of inefficiency and unideal sprint practices.
Our user feedback was unanimously enthusiastic!
We not only gained positive responses, but also secured our new client that had been relying on the mobile app as part of their POC, to begin their onboarding process in October. Here are the following responses from both of our clients.
We launched a monthly usability health check.
Through this project, we resurfaced a major internal workflow opportunity: formalizing usability checks as an initiative for Product. The COO and I are currently collaborating on this new initiative to set best UX practices that would disrupt our old ways of development and redesign our more complex desktop app as well.
Overall, I was excited to advocate for a UX framework to our first design-led project at 5th Kind.
As mentioned in the project, we initially spent half of the project focused on developing the app for iOS until we were hit with a new requirement to change the device. I was proud of the team for our quick adaptability to design for the new device with a hard deadline.
Given that we were a small team with limited resources and asynchronous workflow, we really needed to over-communicate our process. Our mobile team had developers from different global timezones and language barriers as well, so despite the inconvenient meeting times, it was worth our time.
With our new design system that continues to evolve, we were able to propose using better handoff tools, e.g. Specify, to make handoff meetings more efficient!