Trusted Transactions in a Snap
Winkk is a multi-factor authentication application for mobile and desktop.
Its security mechanism is architected on an optical cryptography platform (CypherEye™) – graphic-based dynamically-generated unique codes.
User Flows / Task Flows
Information Architecture Map (Sitemap) of the mobile app
Hi-Fi Clickable Prototype
SVG Vector graphical assets in ZIP file
UI specifications via Zeplin
Engineering Support via emails and Skype sessions
Hard to use mobile app and web app interfaces. Lot’s of UI decisions were made solely by engineers, without consulting a designer or UX researcher. Pre-sales demos of the app would not go well.
A user-centered design (UCD) approach to task flows and UI design. I re-created user flows, identified pain points, and built a new sitemap (information architecture). Then, I designed a new wireframes and an interactive prototype. In collaboration with product owners and engineers.
Discovery & Research
I strategically researched, which apps are on the market to get a sense of what the competition would look like, what problems still need solving, and what other apps have done effectively. I took a look at Trusona, Hypr, and Google Authenticator.
Winkk technology has a competitive advantage by using unique patented algorithm, but it lacks easy to understood and clean product UI.
Only one persona was defined. An average consumer struggling with passwords, and worrying about security, as he is re-using the same passwords between multiple services. This is a heavy internet user with multiple potentially high security accounts, such as banks, medical records and so on. This person wants to simplify the life, without memorizing and entering tens of different passwords.
User Stories and User Flows
I started with questioning product owners about the product. I installed the mobile application on my iphone, and tried to guess the common scenario. After this part failed, I asked to give me a demo and walk through steps. Together we recreated four main user flows. Each of them I tested throughly taking screenshot of each step, and documenting any inconveniences and bugs, which I identified as pain points. I made visual flow diagrams using Sketch. Available on Sketch cloud:
- Onboarding & Profile Setup
- Mobile-on-Mobile Simple Authentication
- Mobile-to-Desktop Simple Authentication
- Mobile-to-Desktop Secure Authentication
In addition I was given the MPV (minimum viable product) User Documentation and Product Specifications documents in MS Word format, which I’ve studied. At this point I decided to focus on a mobile-oriented design for my MVP due to the app’s focus on mobile communication. It was the relatively limited scope of the project. Later I included in my deliverables list the mockups for desktop as well.
Sitemap / application map
After the user flows and main functions have been identified, I worked on the structure of the application. The menu, the relations between different screens and elements of UI. Using Overflow.io online tool I built a sitemap of mobile application. It can be accessed here.
Sketching and Low-Fidelity Wireframes
Based on all the previous research, I created a series of conceptual sketches, and started to design them in Sketch tool.
Presentations to Product Owners = Design Iterations
The scope of this project didn’t allow a user testing. Instead it was a set of review sessions with product managers. First set of wireframes was presented to the product owners (product managers). The changes to UI were made, such as different CTA buttons, updated icons icons, text captions, some layouts. As well as bunch of new screens from missing task flow steps, and border case scenarios were added. Error messages, alerts notifications were also added to the set.
The process was repeated several times until product owners satisfaction.
To simplify and to unify the navigation cross platforms instead of hamburger navigation a new four icons bottom navigation was designed.
I started design with brainstorming putting my ideas on paper with pencil. Google search results inspired me for the rest of the icons.
Delivered asset set:
I tried to preserve the existing palette as much as possible keeping the main theme colors. These elements were created as symbols in Sketch. So, all the screens are using the same symbols preserving consistency and adherence to one style.
High-Fidelity Clickable Prototype
After the app’s user flows modifications were finished and applied to prior designs, I created a series of high-fidelity mockups which were based on the original low-fi wireframes. I used the native prototyping functionality of Sketch to connect artboards, and make key UI elements clickable. Launch the live prototype on Sketch cloud here.
Some desktop screens were needed to be mocked up as well as they were part of the user flow.
Final presentation to product owners concluded the design creation.
Sessions with Engineers, and final assets
Yes, work was approved, and re-design was officially finished. Email communications with all the deliverables links were forwarded to the engineers. What’s next? It took couple weeks for engineers to digest all the design work. Then they contacted me, and we had two long Skype sessions to go through all the details, pixel by pixel, word by word. After that we were on the same page. The product team contacted me time to time when they realized we missed something, and they need further clarifications. A post-production support.
Final specs were provided via Zeplin, a redline tool.
What I Learned
Again, the communication and collaboration are the key to the success. In this relatively small project the product owners, who drove the features of the product, and engineers were involved in various stages of the design.
This project was an example of successful communications and a fast pace. All work was done remotely, at friendly host places of Los Angeles County, California.
Unfortunately no user testing was done, and no user data were provided. I hope it will be done in next iteration of the design. My recommendation to this client was to add analytical tags for CTA buttons and screens, to both mobile and desktop. To start gather statistical data what UI elements are clicked, and which are not.
Thank you for reading!