Moxtra

Product Design Internship, Summer 2017

How can we facilitate a more serendipidous experience for collaborators who use theĀ Moxtra web and mobile apps?

My role for 10 weeks at Moxtra was a cross between research and product design. I worked on misc projects ranging designing iconography, prototyping microinteractions, and drawing UI for file sharing screens. I defined goals, attended customer interviews, and made graphics for the web and ios apps. By the end, we launched new icons, web pages, and animations across the product.

The business collaboration product is mobile-first, but complementary web functionalities have been neglected in visual design and usability. I was tasked to define ways to facilitate a more serendipidous experience for customers and developers who use the product on multiple platforms.


Iconography

The style of the existing file sharing categorization icons were simple, friendly, rounded line drawings. But different sets of them are used on different devices with repetitive icons that served the same purpose. I consolidated the 40+ total variations of similar icons and shipped a new set of 12 "category" icons.

The new icons were easily integrated as a dynamic bottom scroll bar for uploading media and text files to group chats. The bottom pop up menu takes over a small part of the screen to maximize retainment of content for the primary file library space. By tapping on "add more" you can also upload from platforms such as Google Drive, Dropbox, and Evernote. The information is meant to be visually clear with no added complexity. We also learned it follows expectations when people navigate to the files section to upload media.

Organizing Categories

Similar findability issues when navigating "categories" on the web application surfaced during user testing and interviews. People generally clicked around to figure out how to upload and manage their files, but many couldn't find the annotations tool, which allows you to comment on recieved documents. They also expected more obvious ways to find, add, edit files and customize their binders. There was also some confusion with the difference between key words such as "binders" and "categories".

I used our new icons when iterating on a new document upload page for easier file sorting and management. Customer interviews confirmed initial hypotheses that people like seeing updates on the status of their files and collaborators. Some expected to see both the number of files in each category and comments from collaborators. Regardless, those who used this beta version created categories more quickly when using our default icons to customize and sort documents. The word "binders" was also removed and replaced to resolve confusion with unintuitive vocabulary.


Document Review & Recording

One way Moxtra differentiates from professional communications is with DocuMark, an embeddible SDK that allows you to review documents and annotate them with graphics and voice where ever you are. You can record guided tours of your file annotations, keep track of when documents are opened and changed, and view time spent on each page.

For a more engaging project experience, users expect to be more informed regarding the activity and presence of their collaborators for each project. This meant the annotations and history of collaborators need to be more visible that is now. I was part of the sprint to design a feed that not only tracks file changes, but shows collaborators, their comments, and read pages.

When people start recording their comments and notes verbally, the web page transitions into editor mode. The menu and activity feed becomes visible with mouse hover. A horizontal timeline-like navigation bottom menu contains all files within the folder can be pulled up from the bottom "thumbnails" tab. This way, anyone can easily review on multiple files during each session.

Launch Screen

I also animated graphics like this one in After Effects, CSS and Javascript. Animation buys time to load data in the background while preserving an experience that feels quick and responsive. For new customers, it kicks off a walkthrough of the app's functions and establishes first impressions of the brand. Check out this website I hacked together to document some early animations.