WalletCard / From Web App to Mobile App
There are multiple sites and web applications out there that lend themselves well to being converted into a mobile application. Beautiful visuals, high user engagement, and an inspiring motive all lead to a smooth transition into the hand held world. But what happens when you come across a project that’s not designed for that same engagement or aesthetic appeal?
WalletCard came to us with a database style web app that was born from shear functionality and a native background in excel sheets or paper filing.
Despite covering three different personas in the web version, they wanted to bring the mobile app to the people who were on the move and could benefit from having their certifications on a cloud based system. The employee.
A digital space that an employee could store certified and verified cards while also having the ability to share them with past, present, or future employers.
The Brief, Surveys, and Interviews
As a team we were lucky to have a client that arrived with so much data. Statistics, working web app, completed persona, and even a style guide. Unfortunately they also came to us with exactly what they thought their user needed and wanted without any data to back it up. All of their hard work had been aimed towards the employer and wouldn’t be much help when it came to truly understanding the primary persona.
The simple statistics of their users background, chosen type of mobile device, and general demographic were all in line with their own assumptions which was nice to validate through our own surveys. We also learned that our persona is someone who holds 2–5 certifications, finding places to receive training is rarely an issue, and despite carrying those cards on themselves daily they hardly ever interacted with them.
Without realizing it, interviews for this project became crucial to understanding the true frustrations that our eventual primary persona was having with the current system. Surveys solidified any hypotheses we may have had, but the feeling of truly being a cardholder didn’t come out until getting to speak with these individuals about when they needed their certificates and how.
When it comes to merging information from an employer and an employee it becomes far more difficult when that employee rarely visits the head office. For these users that process is where the frustration lies. Keeping all records up to date.
For an employee who works each day at the same facility the frustration shifts to the day to day aspects of inspections and protocols. Their certifications are easy to check for an employer but multiple employees hoped for an easier way to reference check lists of certain equipment or review more closely the steps to a safe work space.
Armed with the knowledge of our earlier research the UX contingent of our design group sat down to prototype screens based on the current web app, what our clients specifically requested, and our new understanding of our emerging persona.
Three different iterations came out of this process and with each one we set a simple goal for our user tests. This was to see which parts of the screens someone may reach for and hope to interact with. Blank space, information at a glance, and button placement were the big take-aways from this process and really helped us narrow down our projects direction.
After converting these three versions into two digital wireframe iterations we applied the user flow from the web app to help us move forward with our mid-fi user testing.
At this point the UI team had a much clearer idea of what icons and assets were going to be required for the final app and they got to work settling on a finalized style guide.
Mid-Fidelity User Tests
The testing done at this point clarified two different things for our team. Who was our final primary persona, and which iteration did they prefer the most.
In one hand they had an over simplified app that relied on a few extra steps to de-clutter the dashboard and in the other they had an app where all of it’s functionality was in a single screen.
Ultimately both of these options were navigated with ease but only one came out on top because of it’s efficiency. A big priority for our trades working persona. The pre-populated blank card was brought over form screen 1 to screen 2 to offer a secondary entry point when adding a card or resource. This also kept users from thinking something was loading when there’s too much blank space.
Getting all the Information
Another thing to consider when looking at how our persona would utilize such an app came from the interviews. It was clear at this point that we were designing something with minimal user engagement and we needed to be intentional with how an employee would input the necessary information the few times they actually visited the app.
A three step process presented itself as the most thorough way to accumulate the required information for each certificate uploaded. Each page had a specific reason to be on its own so that no other input would distract from the task at hand. Information, images, and notification settings.
Once uploaded there was nothing else required from an employee to be notified correctly about receiving a new certification, being warned about an expiring card, or show to a new employer when the time presented itself. No opportunities of forgetting to add something after the fact during an already busy schedule and multiple job sites.
What made this project what it truly became was the user itself. The user flow, current web app, and designs were all straight forward but the testing is where the inspiration came into play. Getting to witness someone else’s interpretation of our designs first hand and see them stop to actually think about their own interactions was incredibly valuable. Reminding us the importance of re-iteration, testing in as many design stages as possible, and that everyone has a different mental model.
Thanks to the data collected and the conversations had we settled on a design that serves a purpose and makes sense to the people who will eventually use it.