Showcasing Patented Encryption and Revolutionizing User Experience
Journey.Ai, a Denver-based startup with patented software solutions, aimed to demonstrate the value of their innovations through a fully integrated digital ecosystem. While renowned for their groundbreaking Zero Knowledge Network, Journey needed a cohesive suite of mobile, desktop, and web applications to showcase their capabilities.
Company
Journey.AI
Industry
Cybersecurity
Project name
Journey Elevate
Timeframe
FEB 2022 - OCT 2022
Stack
Figma
Figma
Lucidchart
Lucidchart
Gitlab
Gitlab
Tailwind UI
Tailwind UI
Results and Team Feedback
Results
Team Feedback
3 Products
The user-facing mobile/web app, call center iFrame, and Admin Console were each designed, tested, and handed off for development in 10 months. This allowed Journey to begin live partner demos and support early-stage onboarding pipelines ahead of schedule.
87%
During moderated testing of the Admin Console, 87% of participants were able to successfully create and send a test pipeline without external guidance. Feedback highlighted the intuitive layout and real-time mobile preview as standout features.
92%
Internal and external stakeholders rated the new product suite an average of 4.6 out of 5 in terms of usability, clarity, and visual appeal. Several enterprise leads cited the platform’s ease of use and brand customization as a differentiator from competitors.
Results
Impact at a Glance
Over the course of 10 months, we launched a suite of products that brought Journey’s patented technology to life. Through usability testing and real-world demos, we validated the effectiveness of our design strategy and delivered measurable outcomes across user experience, product delivery, and stakeholder satisfaction.
Results and Team Feedback
Results
Team Feedback
Results
Impact at a Glance
Over the course of 10 months, we launched a suite of products that brought Journey’s patented technology to life. Through usability testing and real-world demos, we validated the effectiveness of our design strategy and delivered measurable outcomes across user experience, product delivery, and stakeholder satisfaction.
3 Products
The user-facing mobile/web app, call center iFrame, and Admin Console were each designed, tested, and handed off for development in 10 months. This allowed Journey to begin live partner demos and support early-stage onboarding pipelines ahead of schedule.
87%
During moderated testing of the Admin Console, 87% of participants were able to successfully create and send a test pipeline without external guidance. Feedback highlighted the intuitive layout and real-time mobile preview as standout features.
92%
Internal and external stakeholders rated the new product suite an average of 4.6 out of 5 in terms of usability, clarity, and visual appeal. Several enterprise leads cited the platform’s ease of use and brand customization as a differentiator from competitors.
On this page
Introduction
In February 2022, I joined Journey.Ai as its Lead Product Designer, a big new role at a small new company with the job of giving patented technology a face.
Journey.Ai, Inc. is a Denver-based startup, and I was brought in to help shape how its products look, feel, and work.
Introduction
In February 2022, I joined Journey.Ai as its Lead Product Designer, a big new role at a small new company with the job of giving patented technology a face.
Journey.Ai, Inc. is a Denver-based startup, and I was brought in to help shape how its products look, feel, and work.
The Company
Journey's patented Zero Knowledge Network fully encrypts personal information, so the most sensitive details people share online stay protected.
The network encrypts personal information in online processes such as onboarding, authentication, document verification, and payments. Journey is building a decentralized platform for trust, identity, privacy, and personalization.
The Company
Journey's patented Zero Knowledge Network fully encrypts personal information, so the most sensitive details people share online stay protected.
The network encrypts personal information in online processes such as onboarding, authentication, document verification, and payments. Journey is building a decentralized platform for trust, identity, privacy, and personalization.
New Partners
The new software suite did what the back-end alone could not: it helped Journey land several new partners.
New Partners
The new software suite did what the back-end alone could not: it helped Journey land several new partners.
Graphic Design to Product Design
For years, Journey's interfaces were designed by a graphic designer, and when its UI needs outgrew that, the company hired its first Lead Product Designer: me.
Before I arrived, Journey had employed a graphic designer for a few years who, in addition to graphics, designed most of the UI concepts. As the company expanded its UI offerings, it repeatedly struggled to reach satisfactory designs, which is why it set out to hire a Lead Product Designer.
Business Strategy
Journey sorts its customers into three tiers, and the tier decides how much of the product they use and how much custom attention they get.
Journey uses a tailored approach for each of its three primary customer types:
Enterprise Level
Middle Tier
Lower Tier
Fortune 500 Company:
Hey Journey, jump!
Journey:
Okay! How high?
Enterprise Level
This level includes publicly traded companies, often in the Fortune 500. These customers will have the resources to develop their own front-end software, so they will not use the Journey UI. They will make use of Jourrney's APIs and the Zero Knowledge Network. This is Journey's ideal partner, so we're willing to do just about anything they ask for.
📱
Enterprise Level
Middle Tier
Lower Tier
Business Strategy
Journey sorts its customers into three tiers, and the tier decides how much of the product they use and how much custom attention they get.
Journey uses a tailored approach for each of its three primary customer types:
Fortune 500 Company:
Hey Journey, jump!
Journey:
Okay! How high?
Enterprise Level
This level includes publicly traded companies, often in the Fortune 500. These customers will have the resources to develop their own front-end software, so they will not use the Journey UI. They will make use of Jourrney's APIs and the Zero Knowledge Network. This is Journey's ideal partner, so we're willing to do just about anything they ask for.
📱
Problem
Solution
Role & Team
Summary
Problem
Journey had patented technology that worked, but selling access to its back-end software and APIs had failed, so the company needed a way to show its value instead of explaining it.
Journey's innovative patented software had been unsuccessful as a back-end and API product. To demonstrate the real value of its solutions, the company needed front-end software that showcased its products in action.
📱
Problem
Solution
Role & Team
Summary
Problem
Journey had patented technology that worked, but selling access to its back-end software and APIs had failed, so the company needed a way to show its value instead of explaining it.
Journey's innovative patented software had been unsuccessful as a back-end and API product. To demonstrate the real value of its solutions, the company needed front-end software that showcased its products in action.
📱
Deliverables
In nine months, my team designed and launched three products that together form the ecosystem behind Journey's primary business.
The next three sections walk through each one: a mobile app and responsive web app, a desktop app, and a web app.
Actions
Agent iFrame
Admin Console
📱
Actions
Agent iFrame
Admin Console
Deliverables
In nine months, my team designed and launched three products that together form the ecosystem behind Journey's primary business.
The next three sections walk through each one: a mobile app and responsive web app, a desktop app, and a web app.
📱
📱
Actions
The mobile app and responsive web app are where end users do the work: enrolling, verifying their identity, and paying.
These screens enable users to complete various Actions, such as mobile enrollment, authentication, and data input. Common use cases include new customer enrollment, identity verification, and payments, and multiple Actions are often grouped and sent in a single pipeline.
Interconnected system
The three apps work as one ecosystem: admins build pipelines, agents send them, and customers complete them on their phones.
Each of the three personas has its own user interface, and the three interfaces are designed to work together.
Interconnected system
The three apps work as one ecosystem: admins build pipelines, agents send them, and customers complete them on their phones.
Each of the three personas has its own user interface, and the three interfaces are designed to work together.
Ramp up
Speed matters for a startup, so my first move was to find the few people who should shape the design, and I named us the Design Triumvirate.
Speed of delivery is always a high priority in IT, especially for startups. To deliver at high speed, one of my first priorities was to identify the key stakeholders who should be influential on the product design. It quickly became clear that design would be formed by three of us: myself, the President, and a Software Engineering Director. I deemed the three of us the Design Triumvirate and created a new private group chat with that name.
Ramp up
Speed matters for a startup, so my first move was to find the few people who should shape the design, and I named us the Design Triumvirate.
Speed of delivery is always a high priority in IT, especially for startups. To deliver at high speed, one of my first priorities was to identify the key stakeholders who should be influential on the product design. It quickly became clear that design would be formed by three of us: myself, the President, and a Software Engineering Director. I deemed the three of us the Design Triumvirate and created a new private group chat with that name.
Design Strategy
To ship quickly, we focused on the important 80% for the MVP and improved from there, even though the three of us had different ideas about how to get there.
We followed a design strategy that prioritized speed by applying the 80/20 rule for the MVP, then made iterative improvements based on feedback and testing. Each of us brought a perspective:
President & Co-founder
“Let’s save time by copying Apple and Google.”
Software Eng. Director
“I’m not a fan of design by committee.”
Lead Product Designer
“Ok, but we need to follow a UCD process.”
Design System
To move fast without losing consistency, we built our design system on Tailwind CSS components and a Figma UI kit.
That gave us a solid foundation for a design system and component library tailored to our projects, which sped up development and helped keep the details accurate.
Design System
To move fast without losing consistency, we built our design system on Tailwind CSS components and a Figma UI kit.
That gave us a solid foundation for a design system and component library tailored to our projects, which sped up development and helped keep the details accurate.
Pattern documentation
We customized Tailwind UI to fit Journey's needs and documented every change, so designers and developers could keep working smoothly together.
Our goal was to improve the user experience of the Admin Console and create a consistent interface. The tailored system made the design process more efficient, helped with scalability, and sped up development timelines, and the detailed documentation remains a valuable resource for designers and developers.
We customized Tailwind UI to fit Journey's needs and documented every change, so designers and developers could keep working smoothly together.
Our goal was to improve the user experience of the Admin Console and create a consistent interface. The tailored system made the design process more efficient, helped with scalability, and sped up development timelines, and the detailed documentation remains a valuable resource for designers and developers.
Uber
Enrollment and Authentication
Actions
The mobile app and responsive web app are where end users do the work: enrolling, verifying their identity, and paying.
These screens enable users to complete various Actions, such as mobile enrollment, authentication, and data input. Common use cases include new customer enrollment, identity verification, and payments, and multiple Actions are often grouped and sent in a single pipeline.
📱
Uber Mobile App
When it came time to design the Identity Drawer, the company president pointed us to the Uber app for inspiration.
The drawer should let a customer interact with an agent, similar to the Uber app.
Uber
Enrollment and Authentication
Actions
The mobile app and responsive web app are where end users do the work: enrolling, verifying their identity, and paying.
These screens enable users to complete various Actions, such as mobile enrollment, authentication, and data input. Common use cases include new customer enrollment, identity verification, and payments, and multiple Actions are often grouped and sent in a single pipeline.
📱
Uber Mobile App
When it came time to design the Identity Drawer, the company president pointed us to the Uber app for inspiration.
The drawer should let a customer interact with an agent, similar to the Uber app.
User research
Imagine moving a large sum of money through your banking app and getting a call from your bank: Journey's identity drawer lets you verify the agent before you trust them.
This journey map describes how Journey.AI has improved security. It focuses on the identity drawer and the mutual authentication process for large money transfers made through a banking app. When a user initiates a transfer, they get a call from a call center agent. During the call, the identity drawer pops up on the user's phone screen, showing the agent's name and picture to help confirm the agent's identity. The agent also introduces themselves verbally, then asks the user to do a 3D facial scan for further verification. This makes transfers more secure while keeping the user experience smooth and easy.
User research
Imagine moving a large sum of money through your banking app and getting a call from your bank: Journey's identity drawer lets you verify the agent before you trust them.
This journey map describes how Journey.AI has improved security. It focuses on the identity drawer and the mutual authentication process for large money transfers made through a banking app. When a user initiates a transfer, they get a call from a call center agent. During the call, the identity drawer pops up on the user's phone screen, showing the agent's name and picture to help confirm the agent's identity. The agent also introduces themselves verbally, then asks the user to do a 3D facial scan for further verification. This makes transfers more secure while keeping the user experience smooth and easy.
Wireframes
Before opening Figma, I explored layout options with sketches of the Identity Drawer and Actions screens.
I shared the sketches with co-workers, family, and friends. Their feedback helped the design evolve and confirmed the direction.
Wireframes
Before opening Figma, I explored layout options with sketches of the Identity Drawer and Actions screens.
I shared the sketches with co-workers, family, and friends. Their feedback helped the design evolve and confirmed the direction.
Hi-Fi Wireframes
With the direction confirmed, I moved the sketches into high-fidelity wireframes in Figma.
Hi-Fi Wireframes
With the direction confirmed, I moved the sketches into high-fidelity wireframes in Figma.
Identity Drawer States
The Identity Drawer responds to a swipe: down to tuck it away, up to see everything.
The drawer features 3 states: • Default: The drawer occupies about 2/3 of the mobile screen. • Truncated: If the user swipes down, the drawer goes into a Truncated state. • Scroll up: If the user swipes up, the drawer goes into a full Scroll up state.
Actions
Journey's apps are built around Actions: the requests customers complete, from registering to proving who they are to making a payment.
An Action is basically synonymous with a Request for the end user or customer. These interfaces have been built for iOS, Android, and Responsive Web.
ID Documents
Enrollment & Auth.
Other
📱
ID Documents
A category of actions involve scanning or uploading identification documents.
Actions
Journey's apps are built around Actions: the requests customers complete, from registering to proving who they are to making a payment.
An Action is basically synonymous with a Request for the end user or customer. These interfaces have been built for iOS, Android, and Responsive Web.
ID Documents
Enrollment & Auth.
Other
📱
ID Documents
A category of actions involve scanning or uploading identification documents.
Customization
Journey's screens appear as overlays on top of a partner's own mobile app, so companies can customize four things to keep the experience on brand and trustworthy.
To maintain a consistent and trustworthy appearance, companies can customize the styling of these screens. Following focus groups with partners, we identified the UI elements that companies most want to customize in order to provide a branded experience for their customers: • Logo • Primary brand color • Typography • Corner radius
Customization
Journey's screens appear as overlays on top of a partner's own mobile app, so companies can customize four things to keep the experience on brand and trustworthy.
To maintain a consistent and trustworthy appearance, companies can customize the styling of these screens. Following focus groups with partners, we identified the UI elements that companies most want to customize in order to provide a branded experience for their customers: • Logo • Primary brand color • Typography • Corner radius
FLows
Actions get bundled into pipelines, like a Member Enrollment pipeline that takes a new customer from a facial scan all the way to a success screen.
A Pipeline is a collection of Actions. A typical Member Enrollment pipeline includes these Actions: • Facial Scan Enrollment • Scan Driver's License • Verify Social Security Number • Document Signature • Success Screen
FLows
Actions get bundled into pipelines, like a Member Enrollment pipeline that takes a new customer from a facial scan all the way to a success screen.
A Pipeline is a collection of Actions. A typical Member Enrollment pipeline includes these Actions: • Facial Scan Enrollment • Scan Driver's License • Verify Social Security Number • Document Signature • Success Screen
Agent iFrame
For call center agents, Journey shows up as an iFrame that sits inside the tools they already use.
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management (CRM) system.
Agent iFrame
For call center agents, Journey shows up as an iFrame that sits inside the tools they already use.
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management (CRM) system.
Previous experience
I came to the agent experience with a head start: nearly a year designing call center software at my previous company.
That experience made me very familiar with this field and with agent personas.
I came to the agent experience with a head start: nearly a year designing call center software at my previous company.
That experience made me very familiar with this field and with agent personas.
Desktop App
An agent can send a customer a request and follow it through to completion without leaving their call center software.
An Agent iFrame is a UI component that Contact Center agents use to send pipelines to customers, and it lives inside the Agent Desktop app. The left side shows customer info and status, with pipeline categories below. The right side shows recent activity.
Desktop App
An agent can send a customer a request and follow it through to completion without leaving their call center software.
An Agent iFrame is a UI component that Contact Center agents use to send pipelines to customers, and it lives inside the Agent Desktop app. The left side shows customer info and status, with pipeline categories below. The right side shows recent activity.
Admin Console
Mobile Actions and iFrames only go so far, so the Journey product needed one central hub to compose, control, and monitor all of it: the Admin Console.
Mobile Actions and iFrames are great on their own, but completing the Journey SaaS product meant building a central B2B web app to run everything from.
Admin Console
Mobile Actions and iFrames only go so far, so the Journey product needed one central hub to compose, control, and monitor all of it: the Admin Console.
Mobile Actions and iFrames are great on their own, but completing the Journey SaaS product meant building a central B2B web app to run everything from.
Online Admin Console
The Admin Console lets customers compose pipelines and agent iFrames, and it is live on the web today.
Beyond composing, users can test their custom UIs, monitor activity, and use advanced settings and developer tools.
Online Admin Console
The Admin Console lets customers compose pipelines and agent iFrames, and it is live on the web today.
Beyond composing, users can test their custom UIs, monitor activity, and use advanced settings and developer tools.
Pipeline orchestration
Building a pipeline starts with a template or a blank slate, and a live mobile preview on the right shows what the customer will see.
The user may select a pre-built pipeline template or build from scratch. While building, they configure Actions (requests), select and configure a delivery method, publish, and send a test pipeline.
Pipeline orchestration
Building a pipeline starts with a template or a blank slate, and a live mobile preview on the right shows what the customer will see.
The user may select a pre-built pipeline template or build from scratch. While building, they configure Actions (requests), select and configure a delivery method, publish, and send a test pipeline.
Usability Testing & Focus Groups
With the Admin Console taking shape, we put it in front of real people through moderated testing and a live demo at a partner summit.
The feedback we gathered validated our direction, surfaced friction points, and confirmed that the product was landing the way we intended.
Usability Testing
Focus Groups
📱
Usability Testing
Overall feedback was positive, but one small button caused real trouble: several users could not find how to build a pipeline from scratch.
We recruited 5 participants for moderated usability testing sessions to evaluate the intuitiveness of the Admin Console. The Build from scratch button had been styled as a simple text link, causing it to blend into the surrounding UI. We elevated it to a tertiary button with bold text, which significantly improved its visibility and made the starting point for pipeline creation immediately clear to new users.
Usability Testing & Focus Groups
With the Admin Console taking shape, we put it in front of real people through moderated testing and a live demo at a partner summit.
The feedback we gathered validated our direction, surfaced friction points, and confirmed that the product was landing the way we intended.
Usability Testing
Focus Groups
📱
Usability Testing
Overall feedback was positive, but one small button caused real trouble: several users could not find how to build a pipeline from scratch.
We recruited 5 participants for moderated usability testing sessions to evaluate the intuitiveness of the Admin Console. The Build from scratch button had been styled as a simple text link, causing it to blend into the surrounding UI. We elevated it to a tertiary button with bold text, which significantly improved its visibility and made the starting point for pipeline creation immediately clear to new users.
Future Development
After the MVP, we kept going with a richer dashboard, new integrations, and deeper settings for the Agent Authentication app.
We have completed several key post-MVP design initiatives: • An updated dashboard with advanced data visualization • Added integration capability • Comprehensive settings for the Agent Authentication app
Future Development
After the MVP, we kept going with a richer dashboard, new integrations, and deeper settings for the Agent Authentication app.
We have completed several key post-MVP design initiatives: • An updated dashboard with advanced data visualization • Added integration capability • Comprehensive settings for the Agent Authentication app
Video Demo
A video walkthrough shows the live Admin Console in action.
The demonstration covers: • Create a pipeline • Brand styles • Sending a pipeline
Video Demo
A video walkthrough shows the live Admin Console in action.
The demonstration covers: • Create a pipeline • Brand styles • Sending a pipeline
Live Product
The Admin Console is live on the web, so you can try it yourself: sign up with a Google account and start building pipelines.
Live Product
The Admin Console is live on the web, so you can try it yourself: sign up with a Google account and start building pipelines.
Retrospective
I delivered fast and learned a lot about encryption and alignment, but my biggest lesson was that every design element, including my custom illustrations, has to earn its place.
I am proud of several key accomplishments. I collaborated successfully with the president, CEO, VP of Marketing, and Director of Engineering to gain a comprehensive understanding of the Journey product suite and how its pieces interact, which was crucial in aligning our design vision with the company's strategic goals. I also deepened my knowledge of encryption and the unique patents Journey holds, which was essential for creating secure and innovative user experiences. One area where I improved was balancing design aesthetics with functionality. Initially, I spent a lot of time creating custom illustrations for the mobile app. They were visually appealing, but they sometimes distracted users and didn't always enhance the experience. In the future, I will make sure every design element serves a clear purpose and contributes to a seamless user journey.
Retrospective
I delivered fast and learned a lot about encryption and alignment, but my biggest lesson was that every design element, including my custom illustrations, has to earn its place.
I am proud of several key accomplishments. I collaborated successfully with the president, CEO, VP of Marketing, and Director of Engineering to gain a comprehensive understanding of the Journey product suite and how its pieces interact, which was crucial in aligning our design vision with the company's strategic goals. I also deepened my knowledge of encryption and the unique patents Journey holds, which was essential for creating secure and innovative user experiences. One area where I improved was balancing design aesthetics with functionality. Initially, I spent a lot of time creating custom illustrations for the mobile app. They were visually appealing, but they sometimes distracted users and didn't always enhance the experience. In the future, I will make sure every design element serves a clear purpose and contributes to a seamless user journey.
Thanks for stopping by 👋
Feel free to dive into more of my
case studies below.
Thanks for stopping by 👋
Feel free to dive into more of my case studies below.
