Project Overview
Viewpoint is a construction project management software company and like many companies in the construction field several of their applications or screens are a little dated. I was asked by one of the Development directors to come up with a more engaging and easy to use error screen. The current screen lacked a call to action, any real direction and it was difficult for users to know how to report an error to support.
As part of the Viewpoint UX team we have what we UI uplifts. We take different sections or elements of our applications and try to make them easier to use or more visually appealing. I made this error screen a part of this initiative.
Process
The project was broken down to 4 phases:
• Research
• Design
• Presentation
• Work with Marketing
Research
The research for this project was pretty simple; Google SAAS Error Pages. I read several articles that helped point out what users need when they encounter an error as well as what not to do. Unfortunately, the current screen was a text book example of what not to do.
The research for this project was pretty simple; Google SAAS Error Pages. I read several articles that helped point out what users need when they encounter an error as well as what not to do. Unfortunately, the current screen was a text book example of what not to do.
Design
I took my new knowledge base and did a couple of quick sketches to get an idea around where to place different elements. It was during this time I had the idea of adding some form fields for the user to be able to submit comments around their error.
I took my new knowledge base and did a couple of quick sketches to get an idea around where to place different elements. It was during this time I had the idea of adding some form fields for the user to be able to submit comments around their error.
Presentation
As part of our UX uplift we are required to present our ideas. I put together a presentation demonstrating examples of what to do and not to do when creating error screens. I also explained how the current screen fell short of expectations. Lastly, as part of the presentation I showed my designs with an explanation of why I chose the direction I did. (The funny illustration was from a Google search and was always meant to be a placeholder, I was playing to my audience.)
As part of our UX uplift we are required to present our ideas. I put together a presentation demonstrating examples of what to do and not to do when creating error screens. I also explained how the current screen fell short of expectations. Lastly, as part of the presentation I showed my designs with an explanation of why I chose the direction I did. (The funny illustration was from a Google search and was always meant to be a placeholder, I was playing to my audience.)
Work With Marketing
As mentioned above I used an Illustration from Google as an image placeholder. I always knew we couldn’t use that for the final product, therefore I met with members of the marketing and they designed a final image for me.
As mentioned above I used an Illustration from Google as an image placeholder. I always knew we couldn’t use that for the final product, therefore I met with members of the marketing and they designed a final image for me.
Project Elements
Pencil Sketch – This was a simple sketch I created to help me figure out how I wanted things laid out.
The top line was my initial layout idea of an image with a message expressing an error.
In the middle I have my ideas for a pre-filled out form where it has all the user’s data already in place and all they have to do is type a message for support.
On the third row was an idea if I was unable to use an image that gave the user multiple options or escape routes.
Presentation – This is the actual presentation I gave when I demoed my design.
Original Error Screen
This is the original Viewpoint error screen. It lacked personality and direction. Users were generally confused when they encountered it.
Redesign With No Image
While the rest of my designs had an image, there are some in the company that prefer to keep things straight forward. I wanted to present as many options as possible and I thought this would be a good way to ease people into the ideas.
All designs moving forward show we take responsibility and do not blame the user. There is an attempt to explain what happened. The user has an escape route to return to the home page. They can also either submit a report or request additional assistance.
All designs moving forward show we take responsibility and do not blame the user. There is an attempt to explain what happened. The user has an escape route to return to the home page. They can also either submit a report or request additional assistance.
Redesign With an image and Three Buttons
This version is the first with an image. It follows the same patterns as the above design.
Redesign With an image and Two Buttons
This design is almost identical as the above one. However, this design assumed a report was submitted to support on the user's behalf. It also still allows for additional support as well.
Support Request
If a user wanted additional support a modal would appear. The modal would be pre populated with the user's contact info as well as the error number. Lastly, it allows the user add an additional message.
Support Request Acknowledgement
Acknowledgement message for the user after they fill out an additional support request.
Final Design
After presenting my designs, some of the feedback I had received was the smaller buttons got lost below the larger one. Also, it was pointed out that returning to the previous screen is an important function. Lastly, it was determined that an error report would be automatically sent on the user's behalf.
This is the final design using the image marketing created for me.
This is the final design using the image marketing created for me.
