Document Editor (Web)

A web application feature that allows the user to edit information and generate customer documents to view and share.

 

Project Team 
VP of Product, Head of Development, and Myself (Product Designer).

Others Involved:
Throughout the project I collaborated with our lead mobile developer, lead web developer, customer service reps, and our Product Manager to understand backend requirements and user needs.

Project Phases Completed 
Product Research, Wireframes & Validation, High Fidelity Mockups, Development, UAT (User Acceptance Testing), Feature Deployed 

Tools Used
Google Docs (research & collaboration), Pen/Paper (sketches), Invision’s Freehand (wireframes), Photoshop & Invision App (Prototype) 

Wireframes used to communicate the feature’s design proposal.

Wireframes used to communicate the feature’s design proposal.

Need Defined

This feature request was needed due to inconsistent capabilities between our mobile and web applications. 

Users needed to be able to edit and share customer documents both in the field with their customers (mobile) and back in the office (web). Our web features were sorely lacking and needed improvement, quickly. 

Evaluating UX to be sure that each user need was addressed.

Evaluating UX to be sure that each user need was addressed.

Some elements were put on hold due to development capacity.

Some elements were put on hold due to development capacity.

Questions Asked

Product capabilities were evaluated between mobile and web, and the most pertinent items were incorporated into the feature’s design. 

We asked: which major features were missing and what did they provide to the user? Which features would the user care about and use daily? Are we introducing elements that will create conflict with current mobile capabilities or engineering? What did our team have the capacity to develop and implement well?

 
High fidelity mocks through Photoshop & Invision App.

High fidelity mocks through Photoshop & Invision App.

Edit, view, and share capabilities were considered in workflow & Ui.

Edit, view, and share capabilities were considered in workflow & Ui.

Solution PROCESS

With major product questions answered, I set out to complete hand sketches and digital wireframes. Our team met to review the solution’s direction, ask questions, and evaluate any problem areas.  

I worked through revisions of wireframes and high fidelity mockups which were shared with the Development team and discussed throughout sprints. Many smaller items were evaluated and put on hold or moved to future sprints due to capacity. 

Deployment & Follow Up

I worked with our VP of Product and the Development team through revisions, providing product specs and assets plus visual and UX direction throughout development and testing. 

Upon deploying this feature, I continued to work with the User Acceptance Testers, Support Team, and Development to test as well as revise smaller Ui elements in the coming sprints.