UX Challenge: Digital Asset Management

The Goal

The company that I’m working with provides Digital Asset Management (DAM) products for their clients, in order to organize and distribute content to their customers.

In this UX challenge project, my goal is to re-imagine the experience of opening, viewing, and interacting with a single asset for creative professionals on this DAM Product.

---

Defining Creative Professionals

The first step that I took was trying to find out who the users in this case are. From my understanding, a creative professional is “a person who is employed for their skill in creative endeavors”. Their works can encompass a wide range of areas such as writing, art & design, photography, theater, movies, television, radio… The media that they have to deal with day-to-day are text documents (PDF, DOC, RTF…), imagery (JPG, PNG, TIFF, RAW…), Adobe proprietary files (AI, PSD, PSD…), videos (MP4, MOV…), or audio (MP3, WAV…).

My immediate impression was that this is a very diverse group of users with very diverse needs. Having been designing products for over 9 years now, I have had the first-hand experience of attempting to come up with a one-size-fits-all solution. Those kinds of solutions will soon end up half-baked and serve no one at all. And that’s not what I am looking to deliver. Therefore, to truly deliver value and impact, I attempt to narrow down the kind of users that I want to tackle in the scope of this project.

The Users

From my personal experience working as a product designer for a certain comic platform, I have been a part of many projects in which the target users are comic creators such as artists, translators, typesetters, and proofreaders. They are the creative professionals that I am most familiar with at the given moment. Therefore, I have decided to narrow down my scope to this specific group of people.

The clients that I chose to go for include both the organization that employs DAM for their business needs and the individual users employed by that organization who interact with the tool on a daily basis.

The organization that I have in mind is a multinational comic publisher with a big catalog of over 10,000 titles, which amounts to hundreds of terabytes of high-resolution comic pages and assets. The organization would employ up to 1,000 employees and freelancers to publish and localize content in both print and digital format. With dozens of distributing partners and media outlets, having a central source of assets for storage and retrieval is a crucial need.

I have identified 2 potential users from the organization as the personas for this project:

1. A comic artist located in Japan, let’s call him Satoshi. He needs to collaborate with a writer in the US to work on a comic title. Satoshi uses a specialized manga drawing application that generate special file formats of high quality and resolution. He needs regular access to the organization resources such as brush presets, patterns, pre-drawn backgrounds, real-life photos for reference… He also needs to share ongoing work with other writers, project managers, typesetters. Most importantly, he needs to discuss with his colleagues and get feedback for the work he produced.
2. A comic proofreader located in the US, let’s call her Jenny. For her, it’s all about being able to read comics smoothly with the ability to scrutinize the details. When there is a problem, she needs to point out the specific details that need to be revised. When doing that, she will notify and involve the person in the conversation. When she deems that the unit of content is good enough, it can be forwarded to the next step in the workflow.

Use Cases

Of course, there’s a lot of things going on for these 2 users on a daily basis that it would take a significant amount of time and research effort to cover all. So, after narrowing down the users I want to tackle for this project, I have selectively picked out some use cases that I want to highlight. Here are the 3 use cases:

As a comic artist working on a comic title, when drawing, I need to acquire a background asset to use on my comic page. To do that, I need to:

1. Search for background assets using keywords, such as “zoom line”.
2. See the results and look through the small thumbnails to identify the most relevant to my intended one
3. View the image and its details to see if it fits my needs. I may want to zoom in and out to view the image clearer.
4. If the image is not exactly what I am looking for, I need to browse through similar images to it to see if there’s anything better. I would want to cycle through the search results hoping for the best, look at visually similar images, or those with the tags or keywords.
5. Once I find a suitable asset, I will download the asset to my computer to use.

As a comic letterer working on a comic title, I need to acquire a suitable font to use for a specific comic. To do that, I need to:

1. Search for a font to use using keywords such as “dialogue”.
2. See the results and look through the small thumbnails to identify the most relevant. It’s best that each font get a preview of how it’s rendered.
3. View the details of the font to see if it fits my needs. It would be nice if I can type in some text to preview how it’s rendered using the said font.
4. Browse through similar fonts to see if there’s anything better.
5. Install the font on my computer to use.

As a proofreader who wants to check the quality of a comic chapter, I need to:

1. Identify the chapter and open it.
2. Absorb the text and imagery content of the chapter and try to extract the story and meaning out of the chapter. I need to be able to flip through the pages, zoom in and out, as well as cross-checking with other sources or lookup for alternative words.
3. Point out problems with the pages. If it’s a typo, I want to highlight the typo and notify the writer about it. If it’s a visual-related problem, I want to point at it, or mark the problem area and notify the artist. If it’s other problems such as wrong page order or wrong chapter name, I want to leave a message for the whole chapter instead of individual pages.

Wireframes

I have decided to skip the user flows as it is literally a 2-screens journey for all the 3 use cases above (one for search results and one for asset detail). Instead of user flows, I’m moving on to wireframes.

Before getting to draw wireframes I went into more details of the information that needed to be presented on each screen.

Then, I sketched out a series of rough low-fidelity wireframes using Figma, keeping the use cases that I have listed above in mind. The search results screen included will not be made into high fidelity mockup, it’s just there so that I can visualize the flow better.

After I was satisfied with the low-fi wireframes, I decided to elaborate it further because I deemed it was still too soon to jump straight into visual. Hence, I created a hi-fi version of the wireframes to really flesh it out.

Visual Treatment

The last and final step in this project is the visual treatment. Normally I would prefer to work hand-in-hand with another designer with visual expertise. My job then would be more focused on ensuring the flow, information, and goal of the design are reached above all else.

From the mood boards given to me in the brief, I have deduced that the visual direction is:

• Editorial, magazine-like
• Rich and prominent imagery
• Plenty of white space
• Minimal, clean, but a bit playful on the side
• Non-conforming, non-grid
• Neutral colors with cautious use of warm accents

For the users that I’m singling out, I think that I will pick and choose some aspects out of the above for my visual direction. As we are dealing with enterprise applications, not landing pages, the extent to which the visual can apply may be limited. When designing for enterprise software, my most important principle is always clarity. Therefore, the playful, non-conforming, and non-grid aspects are of the lowest priority for me.

Below is a simplistic overview of the visual style guide that I’m going for for this project.

This is how the user interface looks like after applying the style guide.

Conclusion

I believe this is the limit of what I can achieve given the scope of this project. Although there are many more things that I wish I could do, such as go into detail about each and every interaction, even making an interactive prototype to demo its functionality, or flesh out the search results page, I hope that this has given you enough impression of my work processes and capabilities. Thank you for reading.

---