tags: interactive, identity/illustration, information
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.
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:
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).
Icons changes during the system check:
This is just the debate over the “start” icon:
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:
How this would help the back-end proctors:
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).
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.
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.