WebDAM

Digital Asset Management Android App

My Role

User Experience Design, Visual Design, and Prototyping

The Problem

WebDAM created and built an Android app over a year ago but never released it. As the company continues to grow, WebDAM realized an Android app was necessary. But since the app was created over a year ago, I was tasked to design a new interface with a more intuitive flow that incorporates Material Design.

Final Prototype

Fig1. - This is the final prototype, built with Pixate


The Research Phase

Taking a look at the existing app, I realized there were a lot of things that could be fixed. The user flows were confusing and was hard to navigate throughout the app. Visually, the interface was not consistent and didn't align with later Android device specifications.

From here, I took a look at different enterprise apps and apps that have incorporated Material Design principles. Using this information, I went into creating user flows for the different actions users would be taking in the app.

Fig2. - User Flow


The Ideation Phase

I next started thinking about the layout of the app. I created sketches and wireframes for all of the different screens in the app. After getting feedback on the different layouts, I went into creating more full-blown mockups, and using those mockups, I created a prototype using Pixate.

Fig3. - Home Screen

Wanting to keep it consistent with WebDAM’s core platform, I created a home screen that shows only your assets. When the user clicks on the arrow icon within each asset, they will get a list of options that pertain to that folder or asset.

Fig4. - Home Screen Options

Because the stakeholders wanted to give users the same options that are available online, in the app as well, I created an options icon on the home screen. This icon gives the users the option to sort and filter what assets they are looking for and choose what size thumbnail they would like to view their assets in.

Fig5. - Sort Options

Keeping it consistent with Material Design principles, I created a pop-up that shows the different options that users can sort their assets by.


The Iteration Phase

Using the prototype, I got a lot of feedback on the layout, color, animations, and imagery for the different screens.

Using the feedback that I received, I went back and made changes to my initial mockup screens. Once I completed this, I went back and edited my prototype to incorporate the new changes.

Fig6. - Floating Action Button

For the floating action button, I came up with a couple different options for its animation. The first option would expand the floating action button, showing the three actions. Based on the feedback I received, this option wasn’t as visually appealing as the other options.

Fig7. - Floating Action Button

In the second option, the floating action button options would fan out from the main button, and they would be shown in the different WebDAM colors. While the animation was cool, I was told to go with a simpler animation.

Fig8. - Floating Action Button

In the last option, the floating action button options would spring out from the main icon. This animation got the best feedback because the animation was simpler, and the options were more understandable with the titles next to them.


Reflection and Next Steps

The main lesson I learned from this project was that with a redesign project, my ideas had to be scaled down. While I could have gone full out and created out of the box ideas, sometimes the best ideas are the simpler ones that focus more on the content and flow of the app.

As for next steps, there is still a lot of iteration that can be done, as design is never finshed nor perfect. Getting feedback from users, we will better understand what parts of the app work and what could use some refinement.

Fig9. - Home Screen

This is the final mockup of the home screen. It shows the folders in which your assets are located in.

Fig10. - Assets Screen

This is the final mockup of the screen that shows you the assets inside of a folder.

Fig11. - Image Screen

This is the final mockup of the screen that shows you the asset you clicked on. You can zoom in and out of the asset, slide left and right to view previous and next assets, or click on the arrow icon at the top to view actions for this asset.