Research and Investigation

Analyzing the old layouts, talking with users, and running tests to see what works and what doesn’t work is where things started. There were many things that were discovered from WCAG issues, such as a lack of intuitive UI and poor responsive design. The legacy mobile app also failed to meet the bar and allow users to interact with their documents and take action.

Create a Design System

Using WorkDocs as the test subject, I created a design system to address the WCAG and responsive issues. Standardizing colors, type, and iconography was vital to supporting the overall platform. The system made things easier for engineering to build faster and more efficiently, saving time and money. This system was later expanded to include other productivity apps in the Work Suite.

Build the Components

Leveraging the base of the design system created based on Atomic Design methodology, the more significant parts of the UI were organisms made up of atoms and molecules.

This approach allowed for intuitive UX interactions and reduced the need for users to reach for customer support. Additionally, the organisms were structured in a way that allowed product expansion as new features were brought into the UI.

Localization and Accessibility

Since AWS is a worldwide platform, the WorkDocs UI must serve various languages. Learning and understanding the details of each language, such as German and Japanese, was challenging. Breaks in sentences or words can produce different meanings that aren’t present in English, which is important to consider in the UI.

Making the product accessible was also key to its success. Allowing for tabbing through the product, working with screen readers, and color contrast for colorblind users was important for user success.

Information Hierarchy

Users who read, consume, and digest information heavily rely on an intuitive UI. The old UI did not achieve this and misused button colors, background colors, and text weights.

The flow was improved, allowing users to understand the section they were on, how to add comments, and what replies were added.

The final product

The result was a vast improvement and increased daily user engagement. Tracking results through data was key to seeing how the product was used and where areas could be improved over time.

The use of the design system, although simple, was the most important part of the product. WorkDocs UI needed to be light and take a backseat to the content users were uploading and commenting on. At the same time, the UI needed to be utilitarian and clear to a user how it functioned. The design system was able to achieve all of this.

The mobile app was a variation of the desktop app because it was built as a web app with a few native components. That means the app needed to leverage responsive design and components that could easily flex based on screen size.

The overall success of the product was an uptick in user satisfaction and engagement. However, no app is perfect, and there were areas I would have liked to see improved beyond the MLP delivery. Continued expansion of the design system while bringing in more research to understand user needs would have driven a more competitive product.