Prototyping: Large Mass Media Company

updated ux screens for database manager

One of North America’s largest mass media companies enlisted Cloud Technology Partners to support the migration and update of its current on-premise suite of applications to a cloud-based microservices architecture. As the UX Designer on an agile team of six, I was tasked with redesigning one of the core applications used to manage data, including configuration, settings and options, at each geographic location. Updating the application user interface and putting it on the cloud would save the company millions of dollars in man-hours, efficiency and system down-time.

In addition to simplifying and streamlining workflows, the redesign also enabled additional scaling for driving revenue. Finally, I integrated the client’s new design system to establish consistent branding and design elements across the entire suite of applications.

When redesigning the database manager, conducting user research and testing designs with users yielded a much better outcome because we clearly understood where we wanted to go. Not only could we decide what features to start with for an MVP, but we could also consider the challenges the client might face later as they integrated more functionality. Collaborating with users and stakeholders throughout the process helped me make better design decisions as well as explain my reasoning at each step.

 

User Experience Process 

  1. Stakeholder kickoff
  2. User research
  3. Visual research
  4. Information architecture
  5. Iterative design sprints
  6. Results & next steps

 

Stakeholder kickoff

I always start a project with a stakeholder kickoff meeting to understand and clarify the business needs and goals.

Design goals:

  1. Simplify and streamline workflows. New Information Architecture and designs should make information easier to find an act on, when necessary. Users also needed continuous access to maintain critical functionality.
  2. Create a clean, consistent design aesthetic. The company was in the process of establishing and implementing a design system on all applications in their suite of tools. My objective was to incorporate the design system with consideration to the unique context to make the application more usable for current and future users

After identifying the project priorities, I documented UX/UI requirements as user stories to define scope for the MVP and start work with a focus on users.

 

User research

I conducted user interviews and field observations directly with users to understand the complexity and variety of use cases. Because the application has a small pool subject-matter experts, and several user types, I had to take extra care phrasing questions in order to avoid biased responses.

user journey map

 

Visual Research

screenshots of design inspiration

What little public examples of database management tools focused heavily on data visualization rather than data manipulation. Instead of comparing apps with a similar theme, I researched apps based on use and functionality. I tested out major data management tools to find creative, useful design patterns that could be translated in the media company’s application.

Additionally, I could lean on the maturing design system, based on Material Design, for keeping everything consistent with the brand.

 

Information Architecture 

wireframes as user flows

Now that I had gathered plenty of data, I needed to create a more intuitive structure for the content and functions of the application. To do so, I worked with users to create tree maps using existing sections and pages of the tool. From that, I devised a more user-friendly navigation and clearer naming system.

 

Iterative Design Sprints

I believe in testing designs as prototypes early and often before writing a line of code. While that’s not always possible, in this case I were able to test designs while the development team were assessed and planned migrating the software from on-premise to the cloud.

Discoverdesign process of discover, define, develop and validate

I started with paper sketches to rapidly brainstorm different solutions and ideas, the best of which I turned into black-and-white digital wireframes in sketch.

Define

Once we/I had the first set of digital wireframes, I brought in the wider design team and key stakeholders to get feedback. The initial design concepts were intentionally basic because I wanted to avoid anyone’s visual preferences override functional usability.

Develop

With each design review, I incorporated feedback while increasing fidelity. Even working with a growing design system, I made sure to prioritize the users’ context and adapt components to suit their workflow.

Validate

With a high-fidelity, clickable prototype created in InVision, I conducted usability tests to unearth and fix any major issues.

 

Advertiser experience before and after

 

Design for future scaling

As a result of conversations with stakeholders and testing with users, we gained a much clearer understanding of the near- and long-term goals for the application. I applied those insights to improve the user experience for MVP and post-MVP updates as well as make recommendations to future-proof and scaling the app. Including the users and stakeholders early on and taking an incremental, iterative approach helped to give them a sense of ownership of design process, and let us learn and improve as we went.