Account Management | Mediamorph Inc.

ROLES: WIREFRAMING, Information Architecture, VISUAL DESIGN

A web-based application for managing client accounts and users. The system uses a simple yet robust interface that allows administrators to create and manage accounts and users, manage products and user permissions, assign roles and more.

Wireframing

I chose Balsamiq as my tool of choice as it let me quickly bring to life abstract flows and interactions and helped get my ideas in front of key players and decision makers. Below is one such wireframe I sketched out from our user stories discussion. It highlights how a user with custom permissions can view and modify associated user groups.

Visual Design

After researching and going over various design patterns, I decided to adopt the card-style interface design. Card design styles, simply put, is a boxed piece of content that looks like it is featured on a playing card. Card-style boxes typically hold one unique bit of content or information that is easy to see and digest all at once.

The card-style approach solved a lot of our core issues that came up during early brainstorm sessions. Cards made it easy to categorize sections and group similar functionality together, thus, making it easy for users to find information. It provided the flexibility of reusing components and moving them around easily. From a usability stand-point, it helped users take quick actions. Another big consideration for using this approach was, our user base typically operates at varied screen sizes and resolutions, so having a design framework that gracefully degraded on these various platforms and resolutions was an important consideration. Using the card framework helped overcome this responsive design challenge.

Categorizing Cards with User Testing

One of the most helpful ways in creating the container-style framework was to first start with a usability test rooted in information architecture – card sorting. It was a great method for finding patterns in how users would expect to find content or functionality. We did this in an extremely lean fashion with internal users.

Taking the findings from the test, the next step was to create some options to define the look and feel with clean interactions, keeping usability in mind. Following were a few variations I went through, before we finalized on the winning one!

Version #1

Although the aesthetics won big on feedback, many of our test users found the interactions limiting. Additionally, the above design failed to factor in scalability when handling large numbers of groups.

Absorbing all that critique I went back to the drawing board to re-think some of the assumptions I had made, this time with a focus on simplicity and scale. After some much needed discussions with the team, I came up with the following design. What you see is two screens from the larger user flow.

Version #2

Keeping our target users in mind and their technical proficiency with modern interfaces was crucial. One way I overcame the scale challenge was adding paginated lists with search capability. Users loved it along with the ability to quickly perform CRUD-style (Create, Read Update, Delete) operations.

Next Steps

The final design was well-received by management and internal users. The next step was to test it out with a larger audience, and identify any pain points and repeating patterns. The team was focused on functional improvements and visual enhancements, with testing inserted at every step of the process.

Final Thoughts

Account management is a necessary evil - no user likes or cares about account management, they just want to access the service. But there are a few tenets, if followed, can make that process less frustrating for an end user. Here are three I learned over the course of the project: Strive to balance security with usability, make important actions discoverable and, last but not the least keep it simple.