Please help us by completing this survey

Go to survey

The new and improved Docviewer

CsabaPeterCsabaPeter RSS Feed

Sometimes there is a strong need to rethink an app from the ground up, because it has became too chunky and difficult to use with a lot of features that no one actually used. That’s exactly what happened with sensenet’s Docviewer, so as the newest addition to the product team as a UX designer my first task was to reimagine and redesign the app. In this article I’ll guide you through the steps including user interviews, making wireframes to high fidelity prototypes, user testing, iterating and so on.


The first steps

My work began with sitting down with the team and discussing what our main goal was (simplify the app and get rid of unused features). After that I started looking around for best practices like how other document viewer apps look like and what features they have. I used Adobe Acrobat, Lumin, and Apple Preview as starting point. Since we wanted an app with mostly viewing capabilities and a little bit of editing qualities, Apple preview was the closest to our concept.

After clarifying the main path that we should take, I conducted a few user interviews (six to be exact) to find out what people mainly looking for when they open a document viewer. After the interviews were done and evaluated each interviewee’s answers I began to make the wireframes. After several versions there was a clear winner chosen by the team and from there the prototyping began.

Wireframes

Prototypes

After the wireframing I made high fidelity prototypes in light and dark mode. For the high fidelity prototype I used Sketch and followed Material Design principles. I also made a click through prototype in InVision which you can try as well in the following link: Docviewer

Prototype1

Prototype2

User testing

When the click through prototype was finished I did a user testing session which included 5 people. I asked the participants to follow through these steps: 1: Open the edit feature 2: Open the left sidebar 3: Go to page 2 and 3 then go back to the top of the page 4: Open the comment section 5: Zoom in and out 6: Rotate the page to the left and then back to it’s original state

Iteration

After finishing the user tests I evaluated the answers and there was a few things that needed to be changed. First of all the left sidebar icon was very unfamiliar for most of the participants and had a hard time finding it, so I had to find a more straightforward icon. Most participants liked the comment function and said it would benefit them. Also most of the participants didn’t liked that the rotate buttons were on the bottom of the page, so I moved it to the top navbar.

Iteration

User testing part2

I updated my design after the first set of user tests and I conducted a second round test with the same participants. The results were much better this time and everyone made through the tests without any problem. The new sidebar icon solved the problem and putting the rotate buttons to the top navbar helped a lot as well. I also changed the order of the icons in the top navbar so the zoom icons were next to the rotate and sidebar, download, print and share buttons were next to each other.

Iteration

When I had the second round of user tests I sent the results and the updated screens to the team who are working hard to make the 1.0 version alive which will not include the comment function and the editing capabilities but those features will come as well very soon!

Thank you for reading my first article! More will come in the future!

Have feedback on this post? Let @sensenet know on Twitter.

Need help or found a bug? Contact us.