PERSUASION, EMOTION,

AND TRUST DESIGN.

PERSUASION, EMOTION,

AND TRUST DESIGN.

PERSUASION, EMOTION,

AND TRUST DESIGN.

PERSUASION, EMOTION,

AND TRUST DESIGN.

HOW TO INCREASE CONVERSION AMONG HESITANT SHOPPERS & COUNTER THE EFFECTS OF CHOICE OVERLOAD?

PERSUASION, EMOTION,
AND TRUST DESIGN.

HOW TO INCREASE CONVERSION AMONG HESITANT

SHOPPERS & COUNTER THE EFFECTS OF CHOICE OVERLOAD?

HOW TO INCREASE CONVERSION AMONG HESITANT

SHOPPERS & COUNTER THE EFFECTS OF CHOICE OVERLOAD?

PROBLEM

How to create a seamless mobile shopping and checkout experience that minimizes friction, enhances usability, and boosts conversion rates.

SOLUTION

Design a mobile experience utilizing the PET (persuasion, emotion, and trust) Design principles .

MY ROLE

Conduct & synthesize research, and develop iterative solutions through user testing from low to high-fidelity prototypes.

RESEARCH PLAN —

SCHEDULE —

— PHASE 1 —

DISCOVERY

PLAN RESEARCH

1. Formulate Research Plan

2. Define User Audience

CONDUCT RESEARCH

1. Competitive Landscape

2. Secondary Research

RESEARCH

1. User Personas

2. Empathy Mapping

— PHASE 1 —

DESIGN R1

DESIGN INFORMATION ARCHITECTURE

1. User Flow Red Routes

DESIGN IN LOW FIDELITY

1. Computer Wireframes

DESIGN INFORMATION ARCHITECTURE

1. Refine Design & Incorporate
Prototype Functionality

— PHASE 3 —

VALIDATE R1

PREPARE TO TEST

1. Create Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 4 —

DESIGN R2

DESIGN IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

— PHASE 5 —

VALIDATE R2

PREPARE TO TEST

1. Create Modified Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 6 —

DESIGN R3

ITERATE IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

RESEARCH PLAN —

SCHEDULE —

— PHASE 1 —

DISCOVERY

PLAN RESEARCH

1. Formulate Research Plan

2. Define User Audience

CONDUCT RESEARCH

1. Competitive Landscape

2. Secondary Research

RESEARCH

1. User Personas

2. Empathy Mapping

— PHASE 1 —

DESIGN R1

DESIGN INFORMATION ARCHITECTURE

1. User Flow Red Routes

DESIGN IN LOW FIDELITY

1. Computer Wireframes

DESIGN INFORMATION ARCHITECTURE

1. Refine Design & Incorporate
Prototype Functionality

— PHASE 3 —

VALIDATE R1

PREPARE TO TEST

1. Create Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 4 —

DESIGN R2

DESIGN IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

— PHASE 5 —

VALIDATE R2

PREPARE TO TEST

1. Create Modified Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 6 —

DESIGN R3

ITERATE IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

24-38 years old

72% male user base

 Educated high income earners

Willing to pay high price for quality

USER AUDIENCE

24-38 years old

72% male user base

 Educated high income earners

Willing to pay high price for quality

USER AUDIENCE

PROBLEM

How to create a seamless mobile shopping and checkout

experience that minimizes friction, enhances usability, and

boosts conversion rates.

SOLUTION

Design a mobile experience utilizing the PET (persuasion,

emotion, and trust) Design principles .

MY ROLE

Conduct & synthesize research, and develop iterative solutions through user testing from low to high-fidelity prototyping.

RESEARCH PLAN —

SCHEDULE —

— PHASE 1 —

DISCOVERY

PLAN RESEARCH

1. Formulate Research Plan

2. Define User Audience

CONDUCT RESEARCH

1. Competitive Lanscape

2. Secondary Research

RESEARCH SYNTHESIZE

1. User Personas
2. Empathy Mapping

— PHASE 2 —

DESIGN R1

DESIGN INFORMATION ARCHITECTURE

1. User Flow Red Routes

DESIGN IN LOW FIDELITY

1. Computer Wireframes

DESIGN PROTOTYPE

1. Refine Design & Incorporate
Prototype Functionality

— PHASE 3 —

VALIDATE R1

PREPARE TO TEST

1. Create Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 4 —

DESIGN R2

DESIGN IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

— PHASE 5 — 

VALIDATE R2

PREPARE TO TEST

1. Create Modified Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 6 —

DESIGN R3

ITERATE IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

RESEARCH PLAN —

SCHEDULE —

— PHASE 1 —

DISCOVERY

PLAN RESEARCH

1. Formulate Research Plan

2. Define User Audience

CONDUCT RESEARCH

1. Competitive Lanscape

2. Secondary Research

RESEARCH SYNTHESIZE

1. User Personas
2. Empathy Mapping

— PHASE 2 —

DESIGN R1

DESIGN INFORMATION ARCHITECTURE

1. User Flow Red Routes

DESIGN IN LOW FIDELITY

1. Computer Wireframes

DESIGN PROTOTYPE

1. Refine Design & Incorporate
Prototype Functionality

— PHASE 3 —

VALIDATE R1

PREPARE TO TEST

1. Create Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 4 —

DESIGN R2

DESIGN IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

— PHASE 5 — 

VALIDATE R2

PREPARE TO TEST

1. Create Modified Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 6 —

DESIGN R3

ITERATE IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

SECONDARY RESEARCH —

COMPETITVE LANDSCAPE / COMPARISON — 

COMPETITIVE LANDSCAPE / ANALYSIS +

Analyzing the indirect and direct competitive landscape highlighted the issue of choice overload with congested page designs with too many products, while direct competitors utilized a more structured and organized approach to present product information.

SECONDARY RESEARCH —

COMPETITVE LANDSCAPE / COMPARISON — 

COMPETITIVE LANDSCAPE / ANALYSIS +

Analyzing the indirect and direct competitive landscape highlighted the issue of choice overload with congested page designs with too many products, while direct competitors utilized a more structured and organized approach to present product information.

RESEARCH SYNTHESIS —

USER PERSONAS —

In order to effectively understand the target audience personas were developed and further explored through empathy mapping.

EMPATHY MAPS +

Developing empathy maps allowed me to better understand the emotions of users during the browsing and purchasing stages and helped to shed my personal biases about the shopping experience.

RESEARCH SYNTHESIS —

USER PERSONAS —

In order to effectively understand the target audience personas were developed and further explored through empathy mapping.

EMPATHY MAPS +

Developing empathy maps allowed me to better understand the emotions of users during the browsing and purchasing stages and helped to shed my personal biases about the shopping experience.

"I spend hours
comparing bike
specs and reading
reviews before
deciding." Chris

"I spend hours
comparing bike
specs and reading
reviews before
deciding." Chris

INFORMATION ARCHITECTURE —

USER FLOW RED ROUTES —

The first step in mapping out the new product solution was to create user flow red routes to identify every step of the process. This also helped in visualizing the structure and or layout of the application and the number elements needed for each screen.

INFORMATION ARCHITECTURE —

USER FLOW RED ROUTES —

The first step in mapping out the new product solution was to create user flow red routes to identify every step of the process. This also helped in visualizing the structure and or layout of the application and the number elements needed for each screen.

LOW FIDELITY DESIGNS —

WIREFRAMES —

Utilizing the secondary research, the competitive landscape analysis, and PET design conversion strategies wireframe mockups were created.

LOW FIDELITY DESIGNS —

WIREFRAMES —

Utilizing the secondary research, the competitive landscape analysis, and PET design conversion strategies wireframe mockups were created.

HIGH FIDELITY DESIGNS R1 — 

COLOR PALETTE — 

COLOR
COMBINATION

CONTRAST
RATIO

NORMAL
TEXT

(14-18px)

LARGE TEXT

(18px or 14px+bold)

OBJECTS & UI

(18px or 14px+bold)

FOREGROUND

#000000

FOREGROUND

#D4F269

16.7:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#D4F269

FOREGROUND

#142545

12.1:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#FFFFFF

FOREGROUND

#142545

15.21:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

PROTOTYPE — 

HIGH FIDELITY DESIGNS R1 — 

COLOR PALETTE — 

COLOR
COMBINATION

CONTRAST
RATIO

NORMAL
TEXT

(14-18px)

LARGE TEXT

(18px or 14px+bold)

OBJECTS & UI

(18px or 14px+bold)

FOREGROUND

#000000

FOREGROUND

#D4F269

16.7:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#D4F269

FOREGROUND

#142545

12.1:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#FFFFFF

FOREGROUND

#142545

15.21:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

PROTOTYPE — 

FINAL PROTOTYPE —

PROTOTYPE —

FINAL PROTOTYPE —

PROTOTYPE —

VALIDATE R1 —

USABILITY TEST REPORT —

Participants successfully completed the red route flows without issues, noting the design’s familiar structure resembled other e-commerce apps, which supported usability despite a unique aesthetic. Suggestions included adding product thumbnails at the top of the Compare screen, making the hero image for the Ride Finder feature clickable, and incorporating common checkout aids like a cart item bubble and progress indicators. While the prototype was presented as a minimal MVP, participants still attempted to use inactive navigation menus and expressed disappointment at the lack of interactivity and limited product content.

ERROR RATING

PROBLEM

SOLUTION

CRITICAL

Multiple buttons not functioning correctly.

Fix prototype button linking and transition settings.

CRITICAL

Lack of contrast in grayscale wireframe designs fail to

establish clear visual hierarchy.

Clearer visual hierarchy will be created when low fidelity

designs are converted to high fidelity color prototypes.

MINOR

Lack of images for product cells hard to follow.

Incorporation of actual product images will solve this.

MINOR

Product page icon part call outs are too small and hard

to identify with small low contrast text.

Increase icon size, text weight, and text size to increase

legibility make more effective.

VALIDATE R1 —

USABILITY TEST REPORT —

Participants successfully completed the red route flows without issues, noting the design’s familiar structure resembled other e-commerce apps, which supported usability despite a unique aesthetic. Suggestions included adding product thumbnails at the top of the Compare screen, making the hero image for the Ride Finder feature clickable, and incorporating common checkout aids like a cart item bubble and progress indicators. While the prototype was presented as a minimal MVP, participants still attempted to use inactive navigation menus and expressed disappointment at the lack of interactivity and limited product content.

ERROR RATING

PROBLEM

SOLUTION

CRITICAL

Multiple buttons not functioning correctly.

Fix prototype button linking and transition settings.

CRITICAL

Lack of contrast in grayscale wireframe designs fail to

establish clear visual hierarchy.

Clearer visual hierarchy will be created when low fidelity

designs are converted to high fidelity color prototypes.

MINOR

Lack of images for product cells hard to follow.

Incorporation of actual product images will solve this.

MINOR

Product page icon part call outs are too small and hard

to identify with small low contrast text.

Increase icon size, text weight, and text size to increase

legibility make more effective.

"The large bike
images makes the
design pop like I'm
in the store. " - Ella

"The large bike
images makes the
design pop like I'm
in the store. " - Ella

VALIDATE R2 — 

USABILITY TEST REPORT R2 — 

During the second round of guerrilla usability testing all participants were able to complete the task successfully without asking for any additional instructions. Participants body language and ease of navigation suggest a familiarity with the basic layout, structure, and functionality of the mobile application prototype. So much so that one participant commented that was like they had used the application before because its structure and layout seemed similar to other e-commerce applications.

Participants completed the first task without issues, but were able to provide feedback about how to possibly increase signup conversion for the app. Two participants suggested highlighting the best rewards or perks of signing up on the splash page and/or hero image on the home screen. Another suggestion to streamline the signup process and make it even simpler was to offer the ability to sign up with Apple & Google id's. While another participant suggested offering an express checkout option for account holders to make purchase at the touch of a button.

The second task given to participants was again successfully completed without any issues. One participant offered an insightful suggestion, which was to offer the ability to save product comparisons to come back to to later for account holders. This suggestion led to the idea that it could be taken one step further, by offering account holders the ability to email themselves a PDF of product comparison to save in their email account.

This could include embedded hyperlinks to take the customer immediately to their shopping cart, so they would only have to interact with one CTA to place their order after having made a purchasing decision. Doing this could potentially avoid customers abandoning their cart or purchase due to seeing to many other products options (choice overload) while trying to complete a purchase.

All participants were able to complete the third task without issue. One participant provide insight into improving the effectiveness of the ride finder feature through the incorporation of a "Height" parameter since it is one of the main parameters for finding a well-suited bike. This participant also suggested including a filtering option for colors, since he typically only purchases certain products in certain colors. While it was not suggested by a participant, the idea of emailing a PDF based on the results provided by the comparison feature could also be extend to the "Ride Finder" feature as well, to increase account signup conversion.

The last task was the most easily completed task, which confirms the idea that users previous familiarity with similar applications structure/design/placement of certain elements "speaks the users language."

VALIDATE R2 — 

USABILITY TEST REPORT R2 — 

During the second round of guerrilla usability testing all participants were able to complete the task successfully without asking for any additional instructions. Participants body language and ease of navigation suggest a familiarity with the basic layout, structure, and functionality of the mobile application prototype. So much so that one participant commented that was like they had used the application before because its structure and layout seemed similar to other e-commerce applications.

Participants completed the first task without issues, but were able to provide feedback about how to possibly increase signup conversion for the app. Two participants suggested highlighting the best rewards or perks of signing up on the splash page and/or hero image on the home screen. Another suggestion to streamline the signup process and make it even simpler was to offer the ability to sign up with Apple & Google id's. While another participant suggested offering an express checkout option for account holders to make purchase at the touch of a button.

The second task given to participants was again successfully completed without any issues. One participant offered an insightful suggestion, which was to offer the ability to save product comparisons to come back to to later for account holders. This suggestion led to the idea that it could be taken one step further, by offering account holders the ability to email themselves a PDF of product comparison to save in their email account.

This could include embedded hyperlinks to take the customer immediately to their shopping cart, so they would only have to interact with one CTA to place their order after having made a purchasing decision. Doing this could potentially avoid customers abandoning their cart or purchase due to seeing to many other products options (choice overload) while trying to complete a purchase.

All participants were able to complete the third task without issue. One participant provide insight into improving the effectiveness of the ride finder feature through the incorporation of a "Height" parameter since it is one of the main parameters for finding a well-suited bike. This participant also suggested including a filtering option for colors, since he typically only purchases certain products in certain colors. While it was not suggested by a participant, the idea of emailing a PDF based on the results provided by the comparison feature could also be extend to the "Ride Finder" feature as well, to increase account signup conversion.

The last task was the most easily completed task, which confirms the idea that users previous familiarity with similar applications structure/design/placement of certain elements "speaks the users language."

PROBLEM

How to create a seamless mobile shopping and checkout experience that minimizes friction, enhances usability, and boosts conversion rates.

SOLUTION

Design a mobile experience utilizing the PET (persuasion, emotion, and trust) Design principles .

MY ROLE

Conduct & synthesize research, and develop iterative solutions through user testing from low to high-fidelity prototyping.

THE RUNDOWN — 

WHAT I LEARNED —

This project taught me how to drive higher conversion, build brand loyalty, and strengthen user trust by applying PET (Persuasion, Emotion, and Trust) Design strategies. I increased conversion through persuasive cues, such as typographic highlights in product cells that emphasized scarcity and social proof. To foster emotional connection and loyalty, I incorporated large product hero images and a 'Ride Finder' feature that delivered personalized bike recommendations. Finally, built trust by ensuring transparency with clear pricing, 24/7 support, and value-added perks like free shipping and exclusive account-holder discounts.

WHAT IT SOLVED —

The creation of this mobile app established the company’s first dedicated mobile shopping presence, significantly enhancing the customer experience. A user-centered design approach introduced custom bike pairing suggestions based on riding type, terrain, suspension preferences, and experience level, making product discovery more personalized and intuitive. Part icon callouts on product pages further improved clarity and usability, creating a more enjoyable shopping journey. By integrating PET Design strategies, the app not only increased conversions but also built stronger emotional connections with customers and reinforced trust through features like free 24/7 support and free shipping.

THE RUNDOWN — 

WHAT I LEARNED —

This project taught me how to drive higher conversion, build brand loyalty, and strengthen user trust by applying PET (Persuasion, Emotion, and Trust) Design strategies. I increased conversion through persuasive cues, such as typographic highlights in product cells that emphasized scarcity and social proof. To foster emotional connection and loyalty, I incorporated large product hero images and a 'Ride Finder' feature that delivered personalized bike recommendations. Finally, built trust by ensuring transparency with clear pricing, 24/7 support, and value-added perks like free shipping and exclusive account-holder discounts.

WHAT IT SOLVED —

The creation of this mobile app established the company’s first dedicated mobile shopping presence, significantly enhancing the customer experience. A user-centered design approach introduced custom bike pairing suggestions based on riding type, terrain, suspension preferences, and experience level, making product discovery more personalized and intuitive. Part icon callouts on product pages further improved clarity and usability, creating a more enjoyable shopping journey. By integrating PET Design strategies, the app not only increased conversions but also built stronger emotional connections with customers and reinforced trust through features like free 24/7 support and free shipping.

RESEARCH PLAN —

SCHEDULE —

— PHASE 1 —

DISCOVERY

PLAN RESEARCH

1. Formulate Research Plan

2. Define User Audience

CONDUCT RESEARCH

1. Competitive Lanscape

2. Secondary Research

RESEARCH SYNTHESIZE

1. User Personas
2. Empathy Mapping

— PHASE 2 —

DESIGN R1

DESIGN INFORMATION ARCHITECTURE

1. User Flow Red Routes

DESIGN IN LOW FIDELITY

1. Computer Wireframes

DESIGN PROTOTYPE

1. Refine Design & Incorporate
Prototype Functionality

— PHASE 3 —

VALIDATE R1

PREPARE TO TEST

1. Create Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 4 —

DESIGN R2

DESIGN IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

— PHASE 5 — 

VALIDATE R2

PREPARE TO TEST

1. Create Modified Test Script

2. Identify & Book Test Users

CONDUCT TESTING

1. Conduct Remote Moderated
Usability Tests

SYNTHESIZE RESULTS

1. Analyze Interview Videos

2. Notarize Findings
3. Create Usability Test Report

— PHASE 6 —

DESIGN R3

ITERATE IN HIGH FIDELITY

1. Refine Design Based On

Usability Test Findings

 72% male user base
 24- 38 years old & enjoys the outdoors
 Educated high income earners
 Willing to pay high price for premium quality

USER AUDIENCE

24-38 years old

 72% male user base

Educated high income earners

 Willing to pay high price for premium quality

USER AUDIENCE

 72% male user base
 24- 38 years old & enjoys the outdoors
 Educated high income earners
 Willing to pay high price for premium quality

USER AUDIENCE

24-38 years old

 72% male user base

Educated high income earners

 Willing to pay high price for premium quality

USER AUDIENCE

SECONDARY RESEARCH —

COMPETITVE LANDSCAPE / COMPARISON — 

WEBSITE FEATURES

Product Filtering

Product Details/Specs

Customer Reviews/Ratings

Photos & Media

Availability Check

Comparison Tools

Mobile App Shopping

Financing Options

AMAZON

Very broad: price, brand, reviews, Prime, shipping speed, frame size…

Varies by seller: some

detailed, some sparse

Extensive reviews, D&A, star ratings (but quality control varies)

Lots of images (user uploaded + seller), occasional 360° or video

Shows availability by seller/Prime

Can compare products via "compare with similar" tool

Amazon app with full

shopping experience

Amazon monthly payments or
credit card options

SPECIALIZED

Advanced bike type, frame, material, wheel size, suspension, drivetrain..

Very detailed specs, geometry
chart, tech highlights

Limited; some reviews but

less volume

High-quality product

images, some videos

Online & local dealer inventory

No built-in compare function

Website only (mobile responsive)

Affirm / Klarna options available

TARGET

Basic: type, brand,

price, wheel size, gender

Basic info,
often limited specs

User reviews star

ratings

Brand ambassador matching, CSAT/PS tracking, instant help

Online & in-store stock locator

None

Target app with bike listings

Target RedCard, BNPL
(Affirm, Afterpay)

TREK


Advanced: type, suspension, frame, brake type, price, travel, model gen…

Very detailed specs, tech explan-
ations, geometry, comparisons

Limited reviews; more reliant

on brand reputation

VI High-quality product

images, occasional videos

Online + dealer inventory locator

No bull:-In compare, but

spec sheets available

No dedicated shopping

app; site optimized for mobile

Financing options for
high-end purchases

COMPETITIVE LANDSCAPE / ANALYSIS +

Analyzing the indirect and direct competitive landscape highlighted the issue of choice overload with congested page designs with too many products, while direct competitors utilized a more structured and organized approach to present product information.

RESEARCH SYNTHESIS —

USER PERSONAS —

In order to effectively understand the target audience personas were developed and further explored through empathy mapping.

EMPATHY MAPS +

Developing empathy maps allowed me to better understand the emotions of users during the browsing and purchasing stages and helped to shed my personal biases about the shopping experience.

"I spend hours comparing
bike specs and reading reviews
before deciding."  Chris

INFORMATION ARCHITECTURE —

USER FLOW RED ROUTES —

The first step in mapping out the new product solution was to create user flow red routes to identify every step of the process. This also helped in visualizing the structure and or layout of the application and the number elements needed for each screen.

LOW FIDELITY DESIGNS —

WIREFRAMES —

Utilizing the secondary research, the competitive landscape analysis, and PET design conversion strategies wireframe mockups were created.

VALIDATE R1 —

USABILITY TEST REPORT —

Participants successfully completed the red route flows without issues, noting the design’s familiar structure resembled other e-commerce apps, which supported usability despite a unique aesthetic. Suggestions included adding product thumbnails at the top of the Compare screen, making the hero image for the Ride Finder feature clickable, and incorporating common checkout aids like a cart item bubble and progress indicators. While the prototype was presented as a minimal MVP, participants still attempted to use inactive navigation menus and expressed disappointment at the lack of interactivity and limited product content.

ERROR RATING

PROBLEM

SOLUTION

CRITICAL

Multiple buttons not functioning correctly.

Fix prototype button linking and transition settings.

CRITICAL

Lack of contrast in grayscale wireframe designs fail to establish clear visual hierarchy.

A clearer visual hierarchy will be created when low fidelity designs are converted to high fidelity color prototypes.

MINOR

Lack of images for product cells hard to follow.

Incorporation of actual product images will solve this.

MINOR

Product page icon part call outs are too small and hard
to identify with small low contrast text.

Increase icon size, text weight, and text size to increase legibility make more effective.

HIGH FIDELITY DESIGNS R1 — 

COLOR PALETTE — 

COLOR COMBINATION

CONTRAST
RATIO

NORMAL TEXT
(14-18px)

LARGE TEXT
(18px or 14px+bold)

OBJECTS & UI
(Graphics, Controls)

FOREGROUND

#000000

BACKGROUND

#D4F269

16.7:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#D4F269

BACKGROUND

#142545

12.1:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#FFFFFF

BACKGROUND

#142545

15.21:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

PROTOTYPE — 

"The large bike images makes the design pop like Im in
the store."  Ella

VALIDATE R2 — 

USABILITY TEST REPORT R2 — 

During the second round of guerrilla usability testing all participants were able to complete the task successfully without asking for any additional instructions. Participants body language and ease of navigation suggest a familiarity with the basic layout, structure, and functionality of the mobile application prototype. So much so that one participant commented that was like they had used the application before because its structure and layout seemed similar to other e-commerce applications.

Participants completed the first task without issues, but were able to provide feedback about how to possibly increase signup conversion for the app. Two participants suggested highlighting the best rewards or perks of signing up on the splash page and/or hero image on the home screen. Another suggestion to streamline the signup process and make it even simpler was to offer the ability to sign up with Apple & Google id's. While another participant suggested offering an express checkout option for account holders to make purchase at the touch of a button.

The second task given to participants was again successfully completed without any issues. One participant offered an insightful suggestion, which was to offer the ability to save product comparisons to come back to to later for account holders. This suggestion led to the idea that it could be taken one step further, by offering account holders the ability to email themselves a PDF of product comparison to save in their email account.

This could include embedded hyperlinks to take the customer immediately to their shopping cart, so they would only have to interact with one CTA to place their order after having made a purchasing decision. Doing this could potentially avoid customers abandoning their cart or purchase due to seeing to many other products options (choice overload) while trying to complete a purchase.

All participants were able to complete the third task without issue. One participant provide insight into improving the effectiveness of the ride finder feature through the incorporation of a "Height" parameter since it is one of the main parameters for finding a well-suited bike. This participant also suggested including a filtering option for colors, since he typically only purchases certain products in certain colors. While it was not suggested by a participant, the idea of emailing a PDF based on the results provided by the comparison feature could also be extend to the "Ride Finder" feature as well, to increase account signup conversion.

The last task was the most easily completed task, which confirms the idea that users previous familiarity with similar applications structure/design/placement of certain elements "speaks the users language."

FINAL PROTOTYPE — 

PROTOTYPE —

THE RUNDOWN — 

WHAT I LEARNED —

This project taught me how to drive higher conversion, build brand loyalty, and strengthen user trust by applying PET (Persuasion, Emotion, and Trust) Design strategies. I increased conversion through persuasive cues, such as typographic highlights in product cells that emphasized scarcity and social proof. To foster emotional connection and loyalty, I incorporated large product hero images and a 'Ride Finder' feature that delivered personalized bike recommendations. Finally, built trust by ensuring transparency with clear pricing, 24/7 support, and value-added perks like free shipping and exclusive account-holder discounts.

WHAT IT SOLVED —

The creation of this mobile app established the company’s first dedicated mobile shopping presence, significantly enhancing the customer experience. A user-centered design approach introduced custom bike pairing suggestions based on riding type, terrain, suspension preferences, and experience level, making product discovery more personalized and intuitive. Part icon callouts on product pages further improved clarity and usability, creating a more enjoyable shopping journey. By integrating PET Design strategies, the app not only increased conversions but also built stronger emotional connections with customers and reinforced trust through features like free 24/7 support and free shipping.

SECONDARY RESEARCH —

COMPETITVE LANDSCAPE / COMPARISON — 

WEBSITE FEATURES

Product Filtering

Product Details/Specs

Customer Reviews/Ratings

Photos & Media

Availability Check

Comparison Tools

Mobile App Shopping

Financing Options

AMAZON

Very broad: price, brand, reviews, Prime, shipping speed, frame size…

Varies by seller: some

detailed, some sparse

Extensive reviews, D&A, star ratings (but quality control varies)

Lots of images (user uploaded + seller), occasional 360° or video

Shows availability by seller/Prime

Can compare products via "compare with similar" tool

Amazon app with full

shopping experience

Amazon monthly payments or
credit card options

SPECIALIZED

Advanced bike type, frame, material, wheel size, suspension, drivetrain..

Very detailed specs, geometry
chart, tech highlights

Limited; some reviews but

less volume

High-quality product

images, some videos

Online & local dealer inventory

No built-in compare function

Website only (mobile responsive)

Affirm / Klarna options available

TARGET

Basic: type, brand,

price, wheel size, gender

Basic info,
often limited specs

User reviews star

ratings

Brand ambassador matching, CSAT/PS tracking, instant help

Online & in-store stock locator

None

Target app with bike listings

Target RedCard, BNPL
(Affirm, Afterpay)

TREK


Advanced: type, suspension, frame, brake type, price, travel, model gen…

Very detailed specs, tech explan-
ations, geometry, comparisons

Limited reviews; more reliant

on brand reputation

VI High-quality product

images, occasional videos

Online + dealer inventory locator

No bull:-In compare, but

spec sheets available

No dedicated shopping

app; site optimized for mobile

Financing options for
high-end purchases

COMPETITIVE LANDSCAPE / ANALYSIS +

Analyzing the indirect and direct competitive landscape highlighted the issue of choice overload with congested page designs with too many products, while direct competitors utilized a more structured and organized approach to present product information.

SECONDARY RESEARCH —

COMPETITVE LANDSCAPE / COMPARISON — 

WEBSITE FEATURES

Product Filtering

Product Details/Specs

Customer Reviews/Ratings

Photos & Media

Availability Check

Comparison Tools

Mobile App Shopping

Financing Options

AMAZON

Very broad: price, brand, reviews, Prime, shipping speed, frame size…

Varies by seller: some

detailed, some sparse

Extensive reviews, D&A, star ratings (but quality control varies)

Lots of images (user uploaded + seller), occasional 360° or video

Shows availability by seller/Prime

Can compare products via "compare with similar" tool

Amazon app with full

shopping experience

Amazon monthly payments or
credit card options

SPECIALIZED

Advanced bike type, frame, material, wheel size, suspension, drivetrain..

Very detailed specs, geometry
chart, tech highlights

Limited; some reviews but

less volume

High-quality product

images, some videos

Online & local dealer inventory

No built-in compare function

Website only (mobile responsive)

Affirm / Klarna options available

TARGET

Basic: type, brand,

price, wheel size, gender

Basic info,
often limited specs

User reviews star

ratings

Brand ambassador matching, CSAT/PS tracking, instant help

Online & in-store stock locator

None

Target app with bike listings

Target RedCard, BNPL
(Affirm, Afterpay)

TREK


Advanced: type, suspension, frame, brake type, price, travel, model gen…

Very detailed specs, tech explan-
ations, geometry, comparisons

Limited reviews; more reliant

on brand reputation

VI High-quality product

images, occasional videos

Online + dealer inventory locator

No bull:-In compare, but

spec sheets available

No dedicated shopping

app; site optimized for mobile

Financing options for
high-end purchases

COMPETITIVE LANDSCAPE / ANALYSIS +

Analyzing the indirect and direct competitive landscape highlighted the issue of choice overload with congested page designs with too many products, while direct competitors utilized a more structured and organized approach to present product information.

RESEARCH SYNTHESIS —

USER PERSONAS —

In order to effectively understand the target audience personas were developed and further explored through empathy mapping.

EMPATHY MAPS +

Developing empathy maps allowed me to better understand the emotions of users during the browsing and purchasing stages and helped to shed my personal biases about the shopping experience.

RESEARCH SYNTHESIS —

USER PERSONAS —

In order to effectively understand the target audience personas were developed and further explored through empathy mapping.

EMPATHY MAPS +

Developing empathy maps allowed me to better understand the emotions of users during the browsing and purchasing stages and helped to shed my personal biases about the shopping experience.

"I spend hours comparing
bike specs and reading reviews
before deciding."  Chris

"I spend hours comparing
bike specs and reading reviews
before deciding."  Chris

INFORMATION ARCHITECTURE —

USER FLOW RED ROUTES —

The first step in mapping out the new product solution was to create user flow red routes to identify every step of the process. This also helped in visualizing the structure and or layout of the application and the number elements needed for each screen.

INFORMATION ARCHITECTURE —

USER FLOW RED ROUTES —

The first step in mapping out the new product solution was to create user flow red routes to identify every step of the process. This also helped in visualizing the structure and or layout of the application and the number elements needed for each screen.

LOW FIDELITY DESIGNS —

WIREFRAMES —

Utilizing the secondary research, the competitive landscape analysis, and PET design conversion strategies wireframe mockups were created.

LOW FIDELITY DESIGNS —

WIREFRAMES —

Utilizing the secondary research, the competitive landscape analysis, and PET design conversion strategies wireframe mockups were created.

HIGH FIDELITY DESIGNS R1 — 

COLOR PALETTE — 

COLOR COMBINATION

CONTRAST
RATIO

NORMAL TEXT
(14-18px)

LARGE TEXT
(18px or 14px+bold)

OBJECTS & UI
(Graphics, Controls)

FOREGROUND

#551E4B

BACKGROUND

#D4F269

16.7:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#D4F269

BACKGROUND

#142545

12.1:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#FFFFFF

BACKGROUND

#142545

15.21:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

PROTOTYPE — 

HIGH FIDELITY DESIGNS R1 — 

COLOR PALETTE — 

COLOR COMBINATION

CONTRAST
RATIO

NORMAL TEXT
(14-18px)

LARGE TEXT
(18px or 14px+bold)

OBJECTS & UI
(Graphics, Controls)

FOREGROUND

#551E4B

BACKGROUND

#D4F269

16.7:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#D4F269

BACKGROUND

#142545

12.1:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

FOREGROUND

#FFFFFF

BACKGROUND

#142545

15.21:1

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

WCAG AAA: PASS

WCAG AA: PASS

N/A AAA

PROTOTYPE — 

"The large bike images makes the design pop like Im in
the store."  Ella

"The large bike images makes the design pop like Im in
the store."  Ella

VALIDATE R1 —

USABILITY TEST REPORT —

Participants successfully completed the red route flows without issues, noting the design’s familiar structure resembled other e-commerce apps, which supported usability despite a unique aesthetic. Suggestions included adding product thumbnails at the top of the Compare screen, making the hero image for the Ride Finder feature clickable, and incorporating common checkout aids like a cart item bubble and progress indicators. While the prototype was presented as a minimal MVP, participants still attempted to use inactive navigation menus and expressed disappointment at the lack of interactivity and limited product content.

ERROR RATING

PROBLEM

SOLUTION

CRITICAL

Multiple buttons not functioning correctly.

Fix prototype button linking and transition settings.

CRITICAL

Lack of contrast in grayscale wireframe designs fail to

establish clear visual hierarchy.

Clearer visual hierarchy will be created when low fidelity designs are converted to high fidelity color prototypes.

MINOR

Lack of images for product cells hard to follow.

Incorporation of actual product images will solve this.

MINOR

Product page icon part call outs are too small and hard

to identify with small low contrast text.

Increase icon size, text weight, and text size to increase

legibility make more effective.

VALIDATE R1 —

USABILITY TEST REPORT —

Participants successfully completed the red route flows without issues, noting the design’s familiar structure resembled other e-commerce apps, which supported usability despite a unique aesthetic. Suggestions included adding product thumbnails at the top of the Compare screen, making the hero image for the Ride Finder feature clickable, and incorporating common checkout aids like a cart item bubble and progress indicators. While the prototype was presented as a minimal MVP, participants still attempted to use inactive navigation menus and expressed disappointment at the lack of interactivity and limited product content.

ERROR RATING

PROBLEM

SOLUTION

CRITICAL

Multiple buttons not functioning correctly.

Fix prototype button linking and transition settings.

CRITICAL

Lack of contrast in grayscale wireframe designs fail to

establish clear visual hierarchy.

Clearer visual hierarchy will be created when low fidelity designs are converted to high fidelity color prototypes.

MINOR

Lack of images for product cells hard to follow.

Incorporation of actual product images will solve this.

MINOR

Product page icon part call outs are too small and hard

to identify with small low contrast text.

Increase icon size, text weight, and text size to increase

legibility make more effective.

FINAL PROTOTYPE —

PROTOTYPE —

FINAL PROTOTYPE —

PROTOTYPE —

VALIDATE R2 — 

USABILITY TEST REPORT R2 — 

During the second round of guerrilla usability testing all participants were able to complete the task successfully without asking for any additional instructions. Participants body language and ease of navigation suggest a familiarity with the basic layout, structure, and functionality of the mobile application prototype. So much so that one participant commented that was like they had used the application before because its structure and layout seemed similar to other e-commerce applications.

Participants completed the first task without issues, but were able to provide feedback about how to possibly increase signup conversion for the app. Two participants suggested highlighting the best rewards or perks of signing up on the splash page and/or hero image on the home screen. Another suggestion to streamline the signup process and make it even simpler was to offer the ability to sign up with Apple & Google id's. While another participant suggested offering an express checkout option for account holders to make purchase at the touch of a button.

The second task given to participants was again successfully completed without any issues. One participant offered an insightful suggestion, which was to offer the ability to save product comparisons to come back to to later for account holders. This suggestion led to the idea that it could be taken one step further, by offering account holders the ability to email themselves a PDF of product comparison to save in their email account.

This could include embedded hyperlinks to take the customer immediately to their shopping cart, so they would only have to interact with one CTA to place their order after having made a purchasing decision. Doing this could potentially avoid customers abandoning their cart or purchase due to seeing to many other products options (choice overload) while trying to complete a purchase.

All participants were able to complete the third task without issue. One participant provide insight into improving the effectiveness of the ride finder feature through the incorporation of a "Height" parameter since it is one of the main parameters for finding a well-suited bike. This participant also suggested including a filtering option for colors, since he typically only purchases certain products in certain colors. While it was not suggested by a participant, the idea of emailing a PDF based on the results provided by the comparison feature could also be extend to the "Ride Finder" feature as well, to increase account signup conversion.

The last task was the most easily completed task, which confirms the idea that users previous familiarity with similar applications structure/design/placement of certain elements "speaks the users language."

VALIDATE R2 — 

USABILITY TEST REPORT R2 — 

During the second round of guerrilla usability testing all participants were able to complete the task successfully without asking for any additional instructions. Participants body language and ease of navigation suggest a familiarity with the basic layout, structure, and functionality of the mobile application prototype. So much so that one participant commented that was like they had used the application before because its structure and layout seemed similar to other e-commerce applications.

Participants completed the first task without issues, but were able to provide feedback about how to possibly increase signup conversion for the app. Two participants suggested highlighting the best rewards or perks of signing up on the splash page and/or hero image on the home screen. Another suggestion to streamline the signup process and make it even simpler was to offer the ability to sign up with Apple & Google id's. While another participant suggested offering an express checkout option for account holders to make purchase at the touch of a button.

The second task given to participants was again successfully completed without any issues. One participant offered an insightful suggestion, which was to offer the ability to save product comparisons to come back to to later for account holders. This suggestion led to the idea that it could be taken one step further, by offering account holders the ability to email themselves a PDF of product comparison to save in their email account.

This could include embedded hyperlinks to take the customer immediately to their shopping cart, so they would only have to interact with one CTA to place their order after having made a purchasing decision. Doing this could potentially avoid customers abandoning their cart or purchase due to seeing to many other products options (choice overload) while trying to complete a purchase.

All participants were able to complete the third task without issue. One participant provide insight into improving the effectiveness of the ride finder feature through the incorporation of a "Height" parameter since it is one of the main parameters for finding a well-suited bike. This participant also suggested including a filtering option for colors, since he typically only purchases certain products in certain colors. While it was not suggested by a participant, the idea of emailing a PDF based on the results provided by the comparison feature could also be extend to the "Ride Finder" feature as well, to increase account signup conversion.

The last task was the most easily completed task, which confirms the idea that users previous familiarity with similar applications structure/design/placement of certain elements "speaks the users language."

THE RUNDOWN — 

WHAT I LEARNED —

This project taught me how to drive higher conversion, build brand loyalty, and strengthen user trust by applying PET (Persuasion, Emotion, and Trust) Design strategies. I increased conversion through persuasive cues, such as typographic highlights in product cells that emphasized scarcity and social proof. To foster emotional connection and loyalty, I incorporated large product hero images and a 'Ride Finder' feature that delivered personalized bike recommendations. Finally, built trust by ensuring transparency with clear pricing, 24/7 support, and value-added perks like free shipping and exclusive account-holder discounts.

WHAT IT SOLVED —

The creation of this mobile app established the company’s first dedicated mobile shopping presence, significantly enhancing the customer experience. A user-centered design approach introduced custom bike pairing suggestions based on riding type, terrain, suspension preferences, and experience level, making product discovery more personalized and intuitive. Part icon callouts on product pages further improved clarity and usability, creating a more enjoyable shopping journey. By integrating PET Design strategies, the app not only increased conversions but also built stronger emotional connections with customers and reinforced trust through features like free 24/7 support and free shipping.

THE RUNDOWN — 

WHAT I LEARNED —

This project taught me how to drive higher conversion, build brand loyalty, and strengthen user trust by applying PET (Persuasion, Emotion, and Trust) Design strategies. I increased conversion through persuasive cues, such as typographic highlights in product cells that emphasized scarcity and social proof. To foster emotional connection and loyalty, I incorporated large product hero images and a 'Ride Finder' feature that delivered personalized bike recommendations. Finally, built trust by ensuring transparency with clear pricing, 24/7 support, and value-added perks like free shipping and exclusive account-holder discounts.

WHAT IT SOLVED —

The creation of this mobile app established the company’s first dedicated mobile shopping presence, significantly enhancing the customer experience. A user-centered design approach introduced custom bike pairing suggestions based on riding type, terrain, suspension preferences, and experience level, making product discovery more personalized and intuitive. Part icon callouts on product pages further improved clarity and usability, creating a more enjoyable shopping journey. By integrating PET Design strategies, the app not only increased conversions but also built stronger emotional connections with customers and reinforced trust through features like free 24/7 support and free shipping.

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!