Journey.AI
Journey.AI
Journey.AI
The Ultimate No-Code Business Solution
Shipping a multi-platform integrated software ecosystem from scratch
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.
Solution
Bringing the Customer Journey to Life with Fully Functional Mobile, Desktop, and Web Apps
Journey has decided to develop a multi-platform software suite, including mobile, desktop, and web apps, to bring their patented solutions to life. This interconnected software will be used in demonstrations to attract partners and clients and will eventually be implemented in production.
My role/The team
Lead Product Designer Collaborating with 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.
Project summary
Designing and Building Three Main Interfaces
User-Facing Mobile and Web Apps: Simple and intuitive interfaces for end-users.
Call Center Agent Desktop App: A more complex interface for call center agents.
Administrator Web App: The most complex interface for administrators to manage and monitor the system.
A Big New Role…
at a Small New Company
A Big New Role…
at a Small New Company
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.
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.
What Does Journey Do?
What Does Journey Do?
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.
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.
A Business Built on Patents
Journey’s patented Zero Knowledge Network protects users by fully encrypting all personal information in online processes such as onboarding, authentication, document verification, and payments.
Journey’s patented Zero Knowledge Network protects users by fully encrypting all personal information in online processes such as onboarding, authentication, document verification, and payments.
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.
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.
A Three-tiered Approach...
Fortune 500 Company:
Hey Journey, jump!
Fortune 500 Company:
Hey Journey, jump!
Journey:
Okay! How high?
Journey:
Okay! How high?
Enterprise Level
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.
Middle Tier Company:
Hey Journey, jump 8ft high!
Middle Tier Company:
Hey Journey, jump 8ft high!
Journey:
I am programmed to jump 6ft but I’ll see what I can do for you
Journey:
I am programmed to jump 6ft but I’ll see what I can do for you
Middle Tier
Middle Tier
This level of company has a successful business but does NOT have the capability to build its own front-end software. Instead, they will use the Journey UI; Journey will communicate with and accommodate some special requests from these businesses, but not to the extent of the Enterprise level.
Lower Tier Company:
Hey Journey, will you jump?
Lower Tier Company:
Hey Journey, will you jump?
Journey:
Please refer to our software user guide to see how we jump.
Journey:
Please refer to our software user guide to see how we jump.
Lower Tier
Lower Tier
These companies may sign up to use the software, but Journey will not dedicate resources to communication with, or requests from these small companies.
DESIGN STRATEGY
Speed Matters
Follow the 80/20 Rule
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.”
Solid foundation - Tailwind
Solid foundation - Tailwind
To expedite development and ensure accuracy, we utilized Tailwind CSS components and Figma design system.
To expedite development and ensure accuracy, we utilized Tailwind CSS components and Figma design system.
Big Picture Deliverables
Big Picture Deliverables
Over a 9-month period, my team designed and launched the following products, which form the ecosystem supporting Journey ID's primary business:
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
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."
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."
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”
🖥️
Desktop App
Agent iFrame
Agent iFrame
This UI component is embedded within call center software. It is used to send "pipelines" with user-requested actions. It can also be used to monitor the status of actions to see if they've been completed.
This UI component is embedded within call center software. It is used to send "pipelines" with user-requested actions. It can also be used to monitor the status of actions to see if they've been completed.
This UI component is embedded within call center software. It is used to send "pipelines" with user-requested actions. It can also be used to monitor the status of actions to see if they've been completed.
💻
Web App
Administrator Console
Administrator Console
This interface is used to compose "pipelines" for requests. For example, an Admin. might create a standard Customer Enrollment pipeline. The console also lets users send test pipelines, set the company branding, and include features for developers.
This interface is used to compose "pipelines" for requests. For example, an Admin. might create a standard Customer Enrollment pipeline. The console also lets users send test pipelines, set the company branding, and include features for developers.
This interface is used to compose "pipelines" for requests. For example, an Admin. might create a standard Customer Enrollment pipeline. The console also lets users send test pipelines, set the company branding, and include features for developers.
An Interconnected System
An Interconnected System
The three Personas, and User Interfaces, work together as an ecosystem.
The three Personas, and User Interfaces, work together as an ecosystem.
Inspiration from Uber
Inspiration from Uber
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.
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.
Studying Enrollment and Authentication Processes
Studying Enrollment and Authentication Processes
We studied screens from several apps to draw inspiration. Using the website mobbin.com proved to be very useful for this step.
We studied screens from several apps to draw inspiration. Using the website mobbin.com proved to be very useful for this step.
Journey’s Identity Drawer
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.
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.
Wireframing and Initial Feedback
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.
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.
Designing the Identity drawer
The drawer element is seen when the user begins an Action while using the mobile application. Pulling up the drawer could be triggered through a mobile notification, text message, email, etc.
The drawer element is seen when the user begins an Action while using the mobile application. Pulling up the drawer could be triggered through a mobile notification, text message, email, etc.
Identity Drawer States
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.
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
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.
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.
ACTIONS
ACTIONS
Enrollment and Authentication pairs
Enrollment and Authentication pairs
A large portion of the actions can be classified as “Enrollment” and “Authentication”. These actions work together.
A large portion of the actions can be classified as “Enrollment” and “Authentication”. These actions work together.
ID Documents
ID Documents
A category of actions involve scanning or uploading identification documents.
A category of actions involve scanning or uploading identification documents.
A category of actions involve scanning or uploading identification documents.
Other Interactions
Other Interactions
Aside from Enrollment/Auth and ID Docs, users may complete actions like making a payment, uploading an image, or scanning a document.
Aside from Enrollment/Auth and ID Docs, users may complete actions like making a payment, uploading an image, or scanning a document.
Brand Styles
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.
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
Logo
Primary Brand Color
Typography
Corner Radius
Logo
Primary Brand Color
Typography
Corner Radius
Pipelines
Pipelines
A “Pipeline” is a collection of Actions. Below is an example of a typical Member Enrollment pipeline including the following actions:
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
Co-existing with a CRM
Co-existing with a CRM
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management system. The iFrame can be seen with a heavy blue border below.
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management system. The iFrame can be seen with a heavy blue border below.
The Agent iFrame exists within a company's call center software and functions alongside a Customer Relationship Management system. The iFrame can be seen with a heavy blue border below.
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.
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.
Agent iFrame
Agent iFrame
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.
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.
Creating the Omnipotent Admin Console
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.
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
Administrator Console
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.
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.
Pipeline Orchestration
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.
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.
Moderated Usability Testing -> Iteration
We recruited 5 participants for usability testing sessions to gauge the intuitiveness of our application. Based on feedback from focus groups and testing, we refined the UI for previewing pipelines to enhance user experience. We discovered that some users encountered difficulty in locating the "Build from scratch" button when creating a pipeline, so we enhanced the visibility of this button by changing it from a text button to a tertiary button with bold text.
We recruited 5 participants for usability testing sessions to gauge the intuitiveness of our application. Based on feedback from focus groups and testing, we refined the UI for previewing pipelines to enhance user experience. We discovered that some users encountered difficulty in locating the "Build from scratch" button when creating a pipeline, so we enhanced the visibility of this button by changing it from a text button to a tertiary button with bold text.
Feedback from Stakholders and Partners
At a company partner summit, we unveiled the enhanced Admin Console, showcased its features, and allowed our guests to test it out. Our partners had a great time exploring the admin console, creating and testing pipeline requests by sending emails and messages to their own phones and email addresses. This live demonstration was truly impressive.
At a company partner summit, we unveiled the enhanced Admin Console, showcased its features, and allowed our guests to test it out. Our partners had a great time exploring the admin console, creating and testing pipeline requests by sending emails and messages to their own phones and email addresses. This live demonstration was truly impressive.
Design System and Pattern Documentation
Design System and 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.
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.
Future Development
Future Development
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.
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
Video Demo
Below is a video demonstration of the Admin Console software live on the web. This presentation shows the following features:
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
Capitol Raised
Capitol Raised
Capitol Raised
Capitol Raised
$5,500,000
$5,500,000
$5,500,000
$5,500,000
After the release of newly built software suite, Journey raised $5.5 million in a seed round.
With a new software suite, Journey has been able to land several new partners:
Retrospective
Retrospective
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.
Try the Journey
Web App
Try the Journey
Web App
The Admin console is live on the web
Easily Sign Up with your Google account
Easily Sign Up with your Google account
Easily Sign Up with your Google account
Easily Sign Up with your Google account
A three-tiered approach...
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:
Middle Tier Company:
Hey Journey, jump 8ft high!
Journey:
I am programmed to jump 6ft but I’ll see what I can do for you
Middle Tier
This level company has a successful business, but does NOT have the capability to build their own front-end software. Instead, they will use the Journey UI, Journey will communicate with and accomadate some special requests from these businesses, but not to the extent of the Enterprise level.
Lower Tier Company:
Hey Journey, will you jump?
Journey:
Please refer to our software user guide to see how we jump.
Lower Tier
These companies may sign up to use the software, but Journey will not dedicate resources to communication with, or requests from these small companies.
DESIGN STRATEGY
Speed matters
Follow the 80/20 rule
Our design strategy was to get to the 80% mark for the MVP, then take feedback, do testing, and then iterate.
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 I’m going to covertly do UCD.”
Thanks for viewing! 👋
Thanks for viewing! 👋
Thanks for viewing! 👋
Check out more of my case studies below
Check out more of my case studies below
Spectrum
A Seamless Sales-to-Engineering Experience
Building a centralized web experience hub to connect disparate departments
Spectrum
A Seamless Sales-to-Engineering Experience
Building a centralized web experience hub to connect disparate departments
Spectrum
A Seamless Sales-to-Engineering Experience
Building a centralized web experience hub to connect disparate departments
Spectrum
A Seamless Sales-to-Engineering Experience
Building a centralized web experience hub to connect disparate departments