| title | author | image | tags | redirect_to | |||||
|---|---|---|---|---|---|---|---|---|---|
The new and improved Docviewer |
CsabaPeter |
../img/posts/Docviewer_mockup.png |
|
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.
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.
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
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 its original state
After finishing the user tests I evaluated the answers and there were a few things that needed to be changed. First of all, the left sidebar icon was very unfamiliar for most of the participants and they 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 like that the rotate buttons were on the bottom of the page, so I moved them to the top navbar.
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.
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!