Close

Winkk

Trusted Transactions in a Snap

Winkk mobile screens

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.


Roles

UX Design

UI Design

Information Architecture

Prototyping

Deliverables

User Flows / Task Flows

Information Architecture Map (Sitemap) of the mobile app

Wireframes

Hi-Fi Clickable Prototype

SVG Vector graphical assets in ZIP file

UI specifications via Zeplin

Engineering Support via emails and Skype sessions

Tools

Sketch

Zeplin

Overflow.io

Photoshop

Notebook


Problem

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.

Solution

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.


Competitive Analysis

  

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.

Main Takeaway

Winkk technology has a competitive advantage by using unique patented algorithm, but it lacks easy to understood and clean product UI.

Persona

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.


Information Architecture

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:

  1. Onboarding & Profile Setup
  2. Mobile-on-Mobile Simple Authentication
  3. Mobile-to-Desktop Simple Authentication
  4. 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.

Edit Profile - BEFORE

Edit Profile – BEFORE

View Profile - AFTER

View Profile – AFTER

 

Hyper Eye - login successful - BEFORE

Hyper Eye – login successful – BEFORE

Hyper Eye - login successful - AFTER

Hyper Eye – login successful – AFTER

 


Visual Design

Iconography

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:

Winkk Icons - delivered

Colors

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.

Winkk colors

Winkk colors

Winkk buttons

Winkk buttons

 


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.

Winkk prototype screens

Winkk prototype screens

Some desktop screens were needed to be mocked up as well as they were part of the user flow.

Winkk desktop prototype screens

Winkk desktop prototype screens

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!

 

Winkk White Paper technology diagram

Image source: Winkk White Paper, https://winkk.com/technology/