Production Interface Redesign
User Research | UX Design | Visual Design | 2014
Image.net is a site owned by Getty Images that provides free publicity photos and videos to media clients. The site distributes content provided by industry clients. I was tasked with updating the UX of the site section devoted to helping those industry clients manage the content that they make available through the site. The updates need to meet specific client concerns and to improve the client experience when navigating the site and uploading content.
Primary User Workflow
We interviewed clients to figure out how they were using the site and came up with two main types of users. Through our interviews we established the primary workflows for each type of user.
Beginning the Design Process
For this project, we knew it would be important to get early feedback from client users, so we followed an iterative design model, with each design followed by a set of user interviews.
We identified what our primary goals were for each round of user interviews.
- Continue to gather data on how clients work in image.net.
- Determine which design concept presents the best solution.
Then we developed the set of questions that we were going to ask each user during the study.
- Can you walk us through how you use image.net? Do you search, do you spend more time on the asset detail or folder level, what are some key actions you take regularly on assets?
- What are your general impressions with each design?
- You’ve just created a new project and uploaded assets, now how would you set permissions, view asset details, or publish content with each design?
- Anything else that can make these design work better for you?
Design Round One
For the first round of interviews we presented three design solutions to a small user group. The intention was to determine which user priorities were most essential and which design helped the users complete their work as efficiently as possible.
Key findings & recommendations
“I like being able to see the folder permissions easily, but figuring out how to get to them might be difficult.”
We found out that providing folder permissions was highly desirable, but there needed to be more clarity in how to access them.
“It’s really nice to be able to see the image thumbnails with the large image preview and folder structure at the same time.”
We found that viewing image details was just as important as viewing folder permissions. There was a challenge to figure out how to equally represent both.
“I think this design would be too cumbersome and difficult to click through the image thumbnails in a slider. Sometimes we have hundreds of images in a folder to get through.”
We got confirmation that this tool needs to be quick and easy to use. Anything that slows the user down is definitely out.
Design Round Two
For the second round of interviews we expanded the number of study participants, narrowed the design concepts down to two, and further refined the designs.
Key findings & recommendations
“There’s a lot going on with this design and so many different levels, it’s starting to become difficult to find my place.”
The benefit and downfall of one design was that we were attempting to display the entire folder structure, from the top product categories to the final assets. This was useful, but also provided a lot of information for the user to parse.
“It’s an interesting idea to to collapse the product list into a drop down, though I’m not sure how it will work for multi-layered products.”
The second design solved for the complex hierarchy of the first by collapsing the product list into a drop down menu. This worked because users tend to spend more time navigating the lower parts of the hierarchy, but it also introduced a new way of thinking that was both embraced and questioned by the users we tested.
“It’s super useful to have the image preview on the right, though I still want to be able to see the image at a much larger size.”
Users were leaning more towards having easy access to image details versus folder permissions. They were getting a larger image preview than what we had previously, but we still needed to find a better solution.
Defining the Visual Language
As we moved from wireframes to visual design, we started to define a visual language based on the current structure, but with a modern, fresh look. The main goal was to update the site look through flat ui elements and larger more touchable links. Although the project did not involve designing for mobile, the new designs would have the added benefit of improving the experience for mobile web users.