Gataca UX Design Work
Timeline for project: 4 Weeks
What I did:
Headed Designs for the startup
In charge of planning & executing the entire design process
Scheduling design timelines for Design + Development planning
Worked closely with the entire Gataca Team; CEO, CPO, CTO
Prompt: “Design a mobile app with focus on the users”
Step 0: Look at the Competition
Password Managers, Blockchain wallets, Other Digital ID Platforms
Step 1: Interviewed Users
Sent out a screener survey to company network of Europeans
Organized interviews with relevant potential users
Sent out a long form questionnaire to different forums
Step 2: Synthesize Data
Organized the entire startup to affinity map, and talk about the users
Step 3: Design
Step 4: Test & Iterate
Paper Version
Goals for the paper version:
Create an unobtrusive solution
Give users the option to learn about the application or get started right away
Make it fast
Paper Testing
The paper prototypes
Limited timeline to create and test prototypes
Most of the user base is remote and non-native English speakers (hard to explain my scribbles over the phone)
The earlier a digital prototype was ready to be tested it could be constantly tweaked and added to
In short, not enough time and resources to do so
Digital Protoype Testing Results - Version 1
Users read everything on the screen
Most testers tried to enter info manually
They didn’t click to see the difference, and didn’t know what kind of documents they could scan
Most believed the prototype was capable of more than just clicking, and didn’t think they could scan their IDs over a screen share
Users didn’t know what QR Codes were for, so didn’t understand why it was a top level option
Users always tried clicking the sections to navigate the app rather than using the hamburger menu
•All users tried to click the check mark
•Before finishing account creation users wanted to see the verified information to see how it worked
•No user thought the check meant verified information
•Even with the previous screen referencing that “All Documents Verified”
Users all thought this was required
”I Have to Check the Box To Continue”
Users thought the Gataca app was tracking their info
But they weren’t bothered by it because it asked
The tab navigation wasn’t immediately obvious to users
Most users went to this screen first due to the link from the home feed, with no other immediately obvious navigation
Data Usage tab was essentially hidden
One click to be able to revoke is great for users. However, it encourages revoking when they would otherwise be exploring the app
The top tabs for explaining every screen were read by a couple of users, but most didn’t notice it thanks to “banner blindness”
Hidden menu not seen by most testers
The ones who did check used it as a last resort
Usually only used after the testing when they were encouraged to explore
Usability Issues in Version 1
Hamburger menus:
Most users don’t check them
They aren’t intuitive to the average user
All navigation becomes hidden behind a click
The structure of the app isn’t immediately clear
Bottom Bar Navigation
Bottom Bar is the only navigation method which is the exact same across Android & iOS
All navigation is available from everywhere
Users immediately build a mental model of the structure of the app
They can reach the navigation at all times easily
Digital Prototype Version 2
Full structure of the app now visible at a glance
Simplified User Flows
1 action button which expands to 2 options, rather than 2 competing buttons
Clear app structure encouraged users to click around and explore
No one did that unprompted when there was a hamburger menu
Most users went to connections to revoke tracking
The ones who didn’t went to information saying they knew it was one or the other, when they were wrong they quickly went to connections
Users that did come to this screen tried to un-check the ticks
No one thought it meant verified information
Both “tabs” are now combined to guarantee the user has to think and search as little as possible
Users tried to uncheck the ticks without reading, without reading
The tick has too many connotations of being selectable, it isn’t intuitive as a verified symbol
Exploring Visual Styling
In the last few days of my work with Gataca an outside Graphic Designer delivered a branding and color-scheme which I implemented in a few different ways.
The following exploration is about the quick implementation of a given design and not a visual design created from scratch by me.
Color Blind Testing Sample
3 Most Common:
Original Screen
Red Weak Test
Blue Weak Test
Green Weak Test
Uncommon Colorblind Testing
Monochromacy Achromatopsia
Blue Cone Monochromacy
Red Blind Protanopia
Green Blind Deuteranopia
Blue Blind Tritanopia
App Flow
Path 1 - Ideal Path
Path 2 - Quick Setup Path
Path 3 - Full Set Up Path
