Our collaboration with enterprise software giant EMC started almost 4 years ago. When we started this journey, we had no idea that we would end up designing 11 different applications (and counting). In our most recent project with EMC, we designed a suite of collaboration tools called Project LEAP. We worked with them to transform their current enterprise applications into one comprehensive set of task-specific, cloud-based mobile apps that can be mixed and matched to each user’s needs.
Last year, EMC came to us with a big vision: they wanted to reinvent enterprise content management and be the standard for years to come. Our goal was to completely reimagine and redesign a series of applications from EMC’s current lineup and transform these seemingly disparate applications into one cohesive product suite. This new suite would feature cloud-based, mobile-optimized applications firmly rooted in a great user experience, that would emphasize both content creation and collaboration. This was a big paradigm shift, and we needed to figure out a way to transition existing users without too much friction. Since we know from experience that users are resistant to change, we took the time to thoroughly interview existing users to understand their current workflow, making sure to identify all pain points. The new suite needed to provide a much better user experience to entice customers to voluntarily switch over from the legacy apps.
EMC’s software is often industry-specific, so in order for us to transform the software into a consumer-grade application, we had to break the applications down to its core features and flows. During working sessions with the client, we identified the key tasks for each primary persona and created a scenario for it. We then mapped out the scenario with post-its, using a unique color for each major category. This exercise helped us identify features, functionality, and content that would be most valuable to the user and highlight any area where more research or thought is needed in the design process.
Ideation & Wireframing
After the user scenario exercise, we identified 2–3 primary flows and began fleshing out concepts in our design tool of choice, Sketch. This step of our process often starts during working sessions where we quickly diagram an idea on the whiteboard to make abstract concepts more tangible to the client. Our wireframes were then imported into the prototyping tool, InVision and built into clickable prototypes, which allowed us to test our designs and flows. Our team also had daily internal stand ups to discuss user scenarios and brainstorm solutions. After which, we would present solutions to EMC twice a week. This iterative cycle helped us stay on track and keep the client engaged throughout the process.
When it came to visual design exploration, we had the freedom to deviate from their existing brand guidelines and push the designs to the next level. Three designers worked off of different mood boards, and produced three drastically different visual concepts. After presenting the designs to the client, they selected one main concept and picked specific UI elements from the others. Our designers consolidated the feedback and created a new design as the foundation for later visual design production.
Design, Test, & Repeat
After we completed the first round of design it was time to do some user testing. To conduct the tests we put together a fully functional InVision prototype where the user could complete all of the main tasks in the application. During these tests, we asked users to complete tasks and witnessed what areas worked great and where we needed to readjust. We discovered one of the problem areas was in the capture and classify application. This product was especially challenging because the existing enterprise application was feature rich and our task was to simplify it so that a new user could use it without needing extensive training. In our attempts to simplify we buried too many features for the existing advanced users. To solve for this, we designed an advanced mode that users could turn on and the UI would expose more tools. This allowed us to accommodate existing users but still keep the simplified UI for the new more basic users.
Tool: Capture & Classify
This tool enables an user to quickly get information into the platform using document image capture and recognition on a mobile device. The app would be able to recognize issues from the captured image, validate data, and catch issues like missing signatures. Uses would include capturing documents required during a process, such as a loan application.
Tool: Collaborative Authoring & Review
This tool is for real-time collaborating, authoring and reviewing team work like SOWs and RFPs. Assign sections of a document to your team or block them from editing by using the only “read only” mode. It allows users to track team progress and expose audit trails.
Tool: Split-end Functionality
One of the most challenging sections of this tool was figuring out how to “check out” and co-edit a document. In most collaborative tools, co-editing is taken care of behind the scenes and the user has no control over what’s being edited, so we needed to figure out how to make the process clear and simple for the user. Our solution for this was to have different modes. In the edit sections mode, clicking on a paragraph of text would reveal the collaboration menu to the right of the text.
Tool: Controlled Document Collection
This tool gives users the ability to structure multiple editable content or forms into one cohesive package. A mortgage broker could define a case structure with placeholders for: three W-2 forms, six bank statements, an employment verification form, and six months worth of pay stubs to send to potential borrowers. Each document could be completed by a different party. Once fulfilled, the case would move into the next phase (approval, rejection, etc.).
The final result was a lightweight ecosystem of applications that could be used independently or together to accomplish enterprise app functionality while using a beautiful user-friendly interface.