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
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.
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
A Big New Role… at a Small New Company
In February 2022, I joined Journey.Ai, Inc. as the Lead Product Designer. Journey is a Denver-based startup building a decentralized platform for trust, identity, privacy, and personalization.
Introduction
A Big New Role… at a Small New Company
In February 2022, I joined Journey.Ai, Inc. as the Lead Product Designer. Journey is a Denver-based startup building a decentralized platform for trust, identity, privacy, and personalization.
The Company
What Does Journey Do?
Journey is building a decentralized platform for trust, identity, privacy, and personalization. Their patented Zero Knowledge Network fully encrypts personal information in online processes such as onboarding, authentication, document verification, and payments to protect users.
The Company
What Does Journey Do?
Journey is building a decentralized platform for trust, identity, privacy, and personalization. Their patented Zero Knowledge Network fully encrypts personal information in online processes such as onboarding, authentication, document verification, and payments to protect users.
New Partners
Building Business Relationships
With a new software suite, Journey has been able to land several new partners:
New Partners
Building Business Relationships
With a new software suite, Journey has been able to land several new partners:
Graphic Design to Product Design
Before my arrival, Journey had employed a graphic designer for a few years. In addition to graphics, he designed most of the UI concepts. As the company expanded their UI offerings, they repeatedly encountered difficulty achieving satisfactory designs. Thus, the company set out to hire a Lead Product Designer.
Business Strategy
A Three-tiered Approach...
Journey uses a tailored approach for each of their three primary customer types, as seen below:
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
A Three-tiered Approach...
Journey uses a tailored approach for each of their three primary customer types, as seen below:
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
Selling the Back-End Software and APIs Has Failed
Journey, a company with innovative patented software solutions, has been unsuccessful in selling access to their back-end software and APIs. To demonstrate the real value of their solutions, they need to create front-end software to showcase their products in action.
Deliverables
Three Platforms
Over a 9-month period, my team designed and launched the following products, which form the ecosystem supporting Journey ID's primary business:
Actions
Agent iFrame
Admin Console
📱
Mobile App, Responsive Web APP
Actions
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. Multiple actions can be grouped and sent in a single "pipeline." *Multiple actions are often sent in a single “pipeline”
Actions
Agent iFrame
Admin Console
Deliverables
Three Platforms
Over a 9-month period, my team designed and launched the following products, which form the ecosystem supporting Journey ID's primary business:
📱
Mobile App, Responsive Web APP
Actions
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. Multiple actions can be grouped and sent in a single "pipeline." *Multiple actions are often sent in a single “pipeline”
Deliverables
An Interconnected System
The three Personas, and User Interfaces, work together as an ecosystem.
Deliverables
An Interconnected System
The three Personas, and User Interfaces, work together as an ecosystem.
Ramp up
Determining Key Stakeholders
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 SE Director. I deemed the three of us as the “Design Triumvirate” and created a new private group chat with this name.
Ramp up
Determining Key Stakeholders
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 SE Director. I deemed the three of us as the “Design Triumvirate” and created a new private group chat with this name.
Design Strategy
Speed Matters, Focus on the important 80%
We followed a design strategy that prioritized speed by applying the 80/20 rule for the MVP. We then made iterative improvements based on feedback and testing.
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
Solid foundation - Tailwind
To expedite development and ensure accuracy, we utilized Tailwind CSS components and Figma UI Kit to begin building a Design System and corresponding component library tailored to our projects.
Design System
Solid foundation - Tailwind
To expedite development and ensure accuracy, we utilized Tailwind CSS components and Figma UI Kit to begin building a Design System and corresponding component library tailored to our projects.
Pattern Documentation
For our project, we customized the Tailwind UI design system to better fit with the unique requirements of our product. This involved carefully documenting each customization. By establishing a tailored design system, our goal was to improve the user experience of the Admin Console and create a consistent interface. This approach not only made the design process more efficient, but also helped with scalability and sped up development timelines. Our detailed documentation is a valuable resource that enables designers and developers to maintain a smooth and efficient workflow.
Pattern Documentation
For our project, we customized the Tailwind UI design system to better fit with the unique requirements of our product. This involved carefully documenting each customization. By establishing a tailored design system, our goal was to improve the user experience of the Admin Console and create a consistent interface. This approach not only made the design process more efficient, but also helped with scalability and sped up development timelines. Our detailed documentation is a valuable resource that enables designers and developers to maintain a smooth and efficient workflow.
Uber
Enrollment and Authentication
Uber Mobile App
When briefing the design of the Identity Drawer, the company president suggested looking to the Uber app for inspiration. The drawer should enable customer interaction with an agent, similar to the Uber app.
Uber
Enrollment and Authentication
Uber Mobile App
When briefing the design of the Identity Drawer, the company president suggested looking to the Uber app for inspiration. The drawer should enable customer interaction with an agent, similar to the Uber app.
User research
Journey’s Identity Drawer
This journey map describes how Journey.AI has improved security. It focuses on the identity drawer and mutual authentication process for large money transfers made through the 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. This helps confirm the agent's identity. The agent also introduces themselves verbally and then asks the user to do a 3D facial scan for further verification. This process not only makes transfers more secure but also keeps the user experience smooth and easy.
User research
Journey’s Identity Drawer
This journey map describes how Journey.AI has improved security. It focuses on the identity drawer and mutual authentication process for large money transfers made through the 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. This helps confirm the agent's identity. The agent also introduces themselves verbally and then asks the user to do a 3D facial scan for further verification. This process not only makes transfers more secure but also keeps the user experience smooth and easy.
Wireframes
Exploring Layout Options
I sketched out screens for the Identity Drawer and Actions and received feedback from co-workers, family, and friends. This helped to evolve the design and confirm the direction.
Wireframes
Exploring Layout Options
I sketched out screens for the Identity Drawer and Actions and received feedback from co-workers, family, and friends. This helped to evolve the design and confirm the direction.
Design in figma
Hi-Fi Wireframes
I sketched out screens for the Identity Drawer and Actions and received feedback from co-workers, family, and friends. This helped to evolve the design and confirm the direction.
Design in figma
Hi-Fi Wireframes
I sketched out screens for the Identity Drawer and Actions and received feedback from co-workers, family, and friends. This helped to evolve the design and confirm the direction.
Identity Drawer States
The drawer features 3 states. The default state occupies about 2/3 of the mobile screen. If the user swipes down, the drawer goes into a "Truncated" state. If the user swipes up, it goes into a full "Scroll up" state.
Actions
An "Action" is basically synonymous with a "Request" for the end-user/customer. These actions include things like registration, identity authentication, or making a payment. These user 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
An "Action" is basically synonymous with a "Request" for the end-user/customer. These actions include things like registration, identity authentication, or making a payment. These user 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
Implementing Brand Styles
Journey's mobile app screens will appear as overlays on top of existing mobile screens. To maintain a consistent and trustworthy appearance, companies are able to customize the styling of these screens. Following focus groups with partners, we have 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
Implementing Brand Styles
Journey's mobile app screens will appear as overlays on top of existing mobile screens. To maintain a consistent and trustworthy appearance, companies are able to customize the styling of these screens. Following focus groups with partners, we have 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
Common Pipelines
A “Pipeline” is a collection of Actions. Below is an example of a typical Member Enrollment pipeline including the following actions: • Facial Scan Enrollment • Scan Driver’s License • Verify Social Security Number • Document Signature • Success Screen
FLows
Common Pipelines
A “Pipeline” is a collection of Actions. Below is an example of a typical Member Enrollment pipeline including the following actions: • Facial Scan Enrollment • Scan Driver’s License • Verify Social Security Number • Document Signature • Success Screen
Agent iFrame
Co-existing with a CRM
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management system.
Agent iFrame
Co-existing with a CRM
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management system.
Pulling from Previous Experience for the Agent iFrame
Before joining Journey, I spent nearly a year designing call center software at my previous company. This prior experience made me very familiar with this field and agent personas.
Pulling from Previous Experience for the Agent iFrame
Before joining Journey, I spent nearly a year designing call center software at my previous company. This prior experience made me very familiar with this field and agent personas.
Desktop App
Agent iFrame Design
An Agent "iFrame" is a UI Component that is used by Contact Center agents to send pipelines to customers. This component lives inside the Agent Desktop app. The left side shows the customer info, and status, along with pipeline categories below. The right side shows recent activity.
Desktop App
Agent iFrame Design
An Agent "iFrame" is a UI Component that is used by Contact Center agents to send pipelines to customers. This component lives inside the Agent Desktop app. The left side shows the customer info, and status, along with pipeline categories below. The right side shows recent activity.
Admin Console
Creating the Omnipotent B2B Web App
Mobile Actions, and iFrames are great on their own. However, to complete the Journey SaaS product, there needs to be a central hub to compose, control, and monitor activity.
Admin Console
Creating the Omnipotent B2B Web App
Mobile Actions, and iFrames are great on their own. However, to complete the Journey SaaS product, there needs to be a central hub to compose, control, and monitor activity.
Web app
Online Admin Console
The Admin Console allows users to compose pipelines and agent iFrames, test their custom UIs, monitor activity, and utilize advanced settings and developer tools. The app is currently live on the web.
Web app
Online Admin Console
The Admin Console allows users to compose pipelines and agent iFrames, test their custom UIs, monitor activity, and utilize advanced settings and developer tools. The app is currently live on the web.
Design
Pipeline Orchestration
In this process, the user may select a pre-built pipeline template or build from scratch. While building a pipeline, the user configures actions (requests), select and configure a delivery method, publish, and send a test pipeline. On the right side of the screen is a live preview on a mobile device.
Design
Pipeline Orchestration
In this process, the user may select a pre-built pipeline template or build from scratch. While building a pipeline, the user configures actions (requests), select and configure a delivery method, publish, and send a test pipeline. On the right side of the screen is a live preview on a mobile device.
Usability Testing & Focus Groups
Putting the Product to the Test
With the Admin Console taking shape, it was time to get it in front of real people. Through moderated usability testing with recruited participants and a live demonstration at a partner summit, we gathered the feedback needed to validate our direction, surface friction points, and confirm that the product was landing the way we intended.
Usability Testing
Focus Groups
Usability Testing
Real Feedback, Real Improvements
We recruited 5 participants for moderated usability testing sessions to evaluate the intuitiveness of the Admin Console. Overall feedback was positive, but one friction point stood out: several users struggled to locate the "Build from scratch" button when creating a new pipeline. The button had been styled as a simple text link, causing it to blend into the surrounding UI. In response, we elevated it to a tertiary button with bold text, significantly improving its visibility and making the starting point for pipeline creation immediately clear to new users.
Actions
An "Action" is basically synonymous with a "Request" for the end-user/customer. These actions include things like registration, identity authentication, or making a payment. These user interfaces have been built for iOS, Android, and Responsive Web.
Usability Testing
Focus Groups
Usability Testing
Real Feedback, Real Improvements
We recruited 5 participants for moderated usability testing sessions to evaluate the intuitiveness of the Admin Console. Overall feedback was positive, but one friction point stood out: several users struggled to locate the "Build from scratch" button when creating a new pipeline. The button had been styled as a simple text link, causing it to blend into the surrounding UI. In response, we elevated it to a tertiary button with bold text, significantly improving its visibility and making the starting point for pipeline creation immediately clear to new users.
Future Development
Dashboard and Integration Updates
We have completed several key Post-MVP design initiatives. These include an updated dashboard with advanced data visualization, added integration capability, and comprehensive settings for the Agent Authentication app.
Future Development
Dashboard and Integration Updates
We have completed several key Post-MVP design initiatives. These include an updated dashboard with advanced data visualization, added integration capability, and comprehensive settings for the Agent Authentication app.
Video Demo
See the Admin Console in Action!
Below is a video demonstration of the Admin Console software live on the web. This presentation shows the following features: • Create a pipeline • Brand styles • Sending a pipeline
Video Demo
See the Admin Console in Action!
Below is a video demonstration of the Admin Console software live on the web. This presentation shows the following features: • Create a pipeline • Brand styles • Sending a pipeline
Live Product
Try the Journey Web App
The Admin console is live on the web. Just sign up with your Google account, and start building Pipelines!
Live Product
Try the Journey Web App
The Admin console is live on the web. Just sign up with your Google account, and start building Pipelines!
Retrospective
Speedy Discovery and Delivery, Errors with Illustrations
Looking back at this project, I'm 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 its interactions. This collaboration was crucial in aligning our design vision with the company’s strategic goals. Additionally, I 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. While visually appealing, these illustrations sometimes distracted users and didn't always enhance the user experience. In the future, I'll ensure that every design element serves a clear purpose and contributes to a seamless user journey.
Retrospective
Speedy Discovery and Delivery, Errors with Illustrations
Looking back at this project, I'm 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 its interactions. This collaboration was crucial in aligning our design vision with the company’s strategic goals. Additionally, I 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. While visually appealing, these illustrations sometimes distracted users and didn't always enhance the user experience. In the future, I'll ensure that 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.
