Verificient Web App

tags: interactive,  identity/illustration,  information

 

– PROCESS –

Learning about the product and how and why it needs to evolve

Verificient approached me at the eleventh hour for a massive redesign of their web application before a funding presentation. They had a functional website, but they were relying on pop-up tips to lead people through the steps. Working with Siddharth Creative Group (SCG), we created new wireframes, revitalized the design, and simplified the content of the application so that it could be readily understood by participants without relying on invasive tool tips.

The first part of the process required considering user experience in order for me to understand the needs of the end user and how the system currently works. We considered the basic functions we needed to keep, the form they were currently taking and the usability issues we needed to overcome as we created wireframes.  Only after mad sketching and discussions with the creative director and mini-pitches to the client, was I able to start working on site’s user interface and design elements. As the lead designer, I created and/or customized a number of icons for the website in addition to each page layout.

verificient_overview

What is the scope of the project and how can we make the product better?

We started from the ground on this redesign to consider how the application function and what it needed to do. It was helpful that they brought me in from outside the project because it forced them to explain each aspect of the project and I was able to point out things I noticed and elicit discussion from questions I had.

Examples of significant points of change we decided the site needed were:

    • Eliminate the need for aggressive tool-tipping. Previous design used tool tips to lead new users through the registration process.
    • Preparing users to take the test properly to make sure they had the correct technology and enough time before the test. This involved creating an invitation page to let them know that it was a multi-step process that had minimum system requires before they even took the test.
    • A progress bar to show the participants what phase of set-up and test they are on in order to give them a sense of where they are in the process. In terms of usability, this is essential in providing comfort to the user that that they’re moving a long and that there is an end point.
    • Opening page, how the participants enter the process. For scalability, it was important to have some introduction of what participants would expect as they went through the process as more outside users began using the system. We wanted to create an inviting and informative page that told participants what they would need to take the test and what was going to happen.
    • More visual explanations in order to more effectively convey important information. Large amounts of text to explain a process isn’t going to get read. Since it’s important that online test-takers follow the procedures exactly it is especially important to communicate the rules.

verificien_oldnew

Develop the right tone of the piece and layouts that are effective and scalable.

The client wanted a flat, modern design for their revision. Their old design felt dated and not original to their content.

I started with the invitation page to solidify the general tone of the application. We continually tweaked the layout until we found something that worked just right. Another point of debate was what exactly the icons for the status bar should be. I worked designing the front-end (what test-takers would see) and the internal pages (what people proctoring the test would see).

verificient_profile

verificient_landingpage

verificent_ready

Icons changes during the system check:

loadstates

This is just the debate over the “start” icon:

verificient_statusbar

Designing to inform. Helping people through the process as quickly and effectively as possible.

We wanted to use graphics throughout the website in order to lead users through the process. For example, We spent a while in the video section where there were three forms of identity checks that a participant had to go through: and ID scan, facial scan, and a knuckle scan that had to be done in a particular order.

Student registration screen, ID Check series:

verificent_idcheck

How this would help the back-end proctors:

verificient_StudentReport

Other illustrations were used to encourage people to learn and remember the proper procedures. It was extremely important that they didn’t write off these pages willy-nilly because not following the rules precisely could cause them to fail the test. (Not that you or I would ever sign Terms & Conditions without reading them, coughcough).

verificent_policies

A designer is not an island. Working with strong team to get the project done well.

I was the lead designer and worked primarily with the creative director and project manager form SCG. We got final approval from the co-founders of Verificent durning major points of revision. After the structure was set and a few pages created, I worked directly with a freelance front-end developer turned my design Photoshop files into the final HTML webpage.

While the creative director was with me, we spent most of the time in exploration, nailing down the current application’s weaknesses and wire-framing layouts. After that, there was nothing else to do but roll up your sleeves and get messy. Iterate!

I only had a day and half working on-site with the creative director before he went on vacation with his family and a week before I moved to Pittsburgh to go to grad school. It was essential that we worked fast and efficiently. I had a terrific experience working with the SCG and Verificient teams to get this project done.

What were the final deliverables and what happened to the project?

At the end of my project I was able to turn around about 20 pages of design to the developer and they able to get a new version out for a hackathon before their presentation! The project ‘won’ the hackathon and of course they did supremely well at their presentation later.

verificient_congrats

 

← BACK