Designing Clear User Journeys for Praise Joe's Website
Dates
March – April 2026
Description:
Website redesign for Praise Joe, an independent coffee shop with two locations in Sydney
Role:
Brand page redesign, including information architecture, UI design and copywriting, reporting to a lead designer at an independent studio
Designing Clear User Journeys for Praise Joe's Website
Dates
March – April 2026
Description:
Website redesign for Praise Joe, an independent coffee shop with two locations in Sydney
Role:
Brand page redesign, including information architecture, UI design and copywriting, reporting to a lead designer at an independent studio
Designing Clear User Journeys for Praise Joe's Website
Dates
March – April 2026
Description:
Website redesign for Praise Joe, an independent coffee shop with two locations in Sydney
Role:
Brand page redesign, including information architecture, UI design and copywriting, reporting to a lead designer at an independent studio
Project overview
Problem
Praise Joe is an independent, Sydney-based coffee shop. Despite scaling to two locations with both an online store and takeaway pre-orders, their offerings were unclear from their website, with no clear differentiation between their different online purchase offerings, and scattered information about locations, leading to confusion.
Solution
I redesigned the information architecture and UI of the brand pages to create clearer user journeys and improve discoverability of key information. Key work included:
Auditing the existing site and conducting market research on comparable sites
Defining core user goals to anchor the redesign and inform information architecture and hierarchy
Creating a modular Location Card component to centralise venue and pre-order information that was previously scattered
Rebuilding the colour system to pass accessibility checks while preserving the brand's identity
Establishing a lightweight design system for consistency.
The result is a cleaner, more navigable site that makes Praise Joe's locations and online offerings easier to discover.
Key Skills
Project overview
Design systems
UX Research
Copywriting
UI Design
Branding
Final design: landing page hero section
Final design: store section
Final design: location section
Final design: about page
Project overview
Problem
Praise Joe is an independent, Sydney-based coffee shop. Despite scaling to two locations with both an online store and takeaway pre-orders, their offerings were unclear from their website, with no clear differentiation between their different online purchase offerings, and scattered information about locations, leading to confusion.
Solution
I redesigned the information architecture and UI of the brand pages to create clearer user journeys and improve discoverability of key information. Key work included:
Auditing the existing site and conducting market research on comparable sites
Defining core user goals to anchor the redesign and inform information architecture and hierarchy
Creating a modular Location Card component to centralise venue and pre-order information that was previously scattered
Rebuilding the colour system to pass accessibility checks while preserving the brand's identity
Establishing a lightweight design system for consistency.
The result is a cleaner, more navigable site that makes Praise Joe's locations and online offerings easier to discover.
Key Skills
Project overview
Design systems
UX Research
Copywriting
UI Design
Branding
Final design: landing page hero section
Final design: store section
Final design: location section
Final design: about page
Project overview
Problem
Praise Joe is an independent, Sydney-based coffee shop. Despite scaling to two locations with both an online store and takeaway pre-orders, their offerings were unclear from their website, with no clear differentiation between their different online purchase offerings, and scattered information about locations, leading to confusion.
Solution
I redesigned the information architecture and UI of the brand pages to create clearer user journeys and improve discoverability of key information. Key work included:
Auditing the existing site and conducting market research on comparable sites
Defining core user goals to anchor the redesign and inform information architecture and hierarchy
Creating a modular Location Card component to centralise venue and pre-order information that was previously scattered
Rebuilding the colour system to pass accessibility checks while preserving the brand's identity
Establishing a lightweight design system for consistency.
The result is a cleaner, more navigable site that makes Praise Joe's locations and online offerings easier to discover.
Key Skills
Project overview
Design systems
UX Research
Copywriting
UI Design
Branding
Final design: landing page hero section
Final design: store section
Final design: location section
Final design: about page
Understanding the Problem
UX Audit
I audited Praise Joe’s existing site and identified the following core problems:
Unclear differentiation between the online store and takeaway pre-order flows
Scattered and inconsistent CTAs linking to different locations with no context
Lack of hierarchy creating no clear directional flow for users
Missing content and missed opportunities for giving users more information about their locations, brand, and facilities
Market research
To inform the redesign, I conducted market research into comparable coffee and bakery brands (including Black Sheep Coffee, WatchHouse, Grind and Kuro), paying particular attention to how they differentiated different offerings, and hierarchy. I developed lightweight user personas around key jobs-to-be-done, including new customers looking to find location or contact information, and return customers looking to order cakes, to inform decisions around content, hierarchy, and user flows.
Trade-offs and limitations
Primary research and analytics were out of scope for this project. To compensate, I grounded decisions in secondary research and established UX patterns. Ideally, usability testing and traffic data would be used to inform and validate the redesign.
Praise Joe's original homepage
Understanding the Problem
UX Audit
I audited Praise Joe’s existing site and identified the following core problems:
Unclear differentiation between the online store and takeaway pre-order flows
Scattered and inconsistent CTAs linking to different locations with no context
Lack of hierarchy creating no clear directional flow for users
Missing content and missed opportunities for giving users more information about their locations, brand, and facilities
Market research
To inform the redesign, I conducted market research into comparable coffee and bakery brands (including Black Sheep Coffee, WatchHouse, Grind and Kuro), paying particular attention to how they differentiated different offerings, and hierarchy. I developed lightweight user personas around key jobs-to-be-done, including new customers looking to find location or contact information, and return customers looking to order cakes, to inform decisions around content, hierarchy, and user flows.
Trade-offs and limitations
Primary research and analytics were out of scope for this project. To compensate, I grounded decisions in secondary research and established UX patterns. Ideally, usability testing and traffic data would be used to inform and validate the redesign.
Praise Joe's original homepage
Understanding the Problem
UX Audit
I audited Praise Joe’s existing site and identified the following core problems:
Unclear differentiation between the online store and takeaway pre-order flows
Scattered and inconsistent CTAs linking to different locations with no context
Lack of hierarchy creating no clear directional flow for users
Missing content and missed opportunities for giving users more information about their locations, brand, and facilities
Market research
To inform the redesign, I conducted market research into comparable coffee and bakery brands (including Black Sheep Coffee, WatchHouse, Grind and Kuro), paying particular attention to how they differentiated different offerings, and hierarchy. I developed lightweight user personas around key jobs-to-be-done, including new customers looking to find location or contact information, and return customers looking to order cakes, to inform decisions around content, hierarchy, and user flows.
Trade-offs and limitations
Primary research and analytics were out of scope for this project. To compensate, I grounded decisions in secondary research and established UX patterns. Ideally, usability testing and traffic data would be used to inform and validate the redesign.
Praise Joe's original homepage
Clarifying Praise Joe’s Offerings Through UX
In terms of process, I first sketched layout ideas and flows, sought feedback from the lead designer, then built greyscale wireframes and iterated based on feedback.
The layout and spacing were further refined in the next steps once imagery, typography and colour were introduced.
Understanding the website’s value
Based on the user personas and market research, I defined the four core values the brand pages needed to deliver:
Users are made aware of and can easily navigate to Praise Joe’s store
Users are made aware of the ability to preorder drinks through the Bopple app, and understand the value this provides
Users can easily find logistical information about locations and opening hours
New customers can discover Praise Joe and learn about the brand
Information architecture
Given the findings of my UX audit, the information architecture was a clear priority for an improved the user experience. From this, I redesigned the information architecture and layout of the landing page into distinct sections, using gestalt principles and principles of visual hierarchy, dominance and focal points to create a clear layout.
Landing page wireframe
About page wireframe
Clarifying Praise Joe’s Offerings Through UX
In terms of process, I first sketched layout ideas and flows, sought feedback from the lead designer, then built greyscale wireframes and iterated based on feedback.
The layout and spacing were further refined in the next steps once imagery, typography and colour were introduced.
Understanding the website’s value
Based on the user personas and market research, I defined the four core values the brand pages needed to deliver:
Users are made aware of and can easily navigate to Praise Joe’s store
Users are made aware of the ability to preorder drinks through the Bopple app, and understand the value this provides
Users can easily find logistical information about locations and opening hours
New customers can discover Praise Joe and learn about the brand
Information architecture
Given the findings of my UX audit, the information architecture was a clear priority for an improved the user experience. From this, I redesigned the information architecture and layout of the landing page into distinct sections, using gestalt principles and principles of visual hierarchy, dominance and focal points to create a clear layout.
Landing page wireframe
About page wireframe
Clarifying Praise Joe’s Offerings Through UX
In terms of process, I first sketched layout ideas and flows, sought feedback from the lead designer, then built greyscale wireframes and iterated based on feedback.
The layout and spacing were further refined in the next steps once imagery, typography and colour were introduced.
Understanding the website’s value
Based on the user personas and market research, I defined the four core values the brand pages needed to deliver:
Users are made aware of and can easily navigate to Praise Joe’s store
Users are made aware of the ability to preorder drinks through the Bopple app, and understand the value this provides
Users can easily find logistical information about locations and opening hours
New customers can discover Praise Joe and learn about the brand
Information architecture
Given the findings of my UX audit, the information architecture was a clear priority for an improved the user experience. From this, I redesigned the information architecture and layout of the landing page into distinct sections, using gestalt principles and principles of visual hierarchy, dominance and focal points to create a clear layout.
Landing page wireframe
About page wireframe
Designing a UI that balanced effective communication and brand personality
Button state exploration
Design System
I applied atomic design principles to build a lightweight token system for colour and spacing, ensuring consistency and improving development speed, and created modular components with accessible interaction states.
I prioritised spaciousness, balance, and clear hierarchy through considered use of spacing, typography, and imagery to draw attention to key CTAs without visual clutter.
Primitive colour ramp
Colour
The existing pink used on the website failed accessibility checks, so I created a new warm-pink scale with sufficient contrast across use cases — darker tones for interactive elements, lighter tones for decorative use, improving accessibility while still maintaining Praise Joe’s familiar colour scheme and feel.
Example imagery and copy
Imagery and copy
Without access to the client's full image library at this stage, I selected existing imagery from their website and Instagram as placeholders to inform the visual direction and indicate tone and composition. I selected inviting, decadent imagery to showcase the brand's offerings, with final images to be selected once the website goes live. I adopted the brand's friendly, informal tone of voice to write copy where needed to provide additional information.
Location Cards
Given the findings that on the original website, location data was fragmented across the main content and footer, and takeaway links lacked clear proximity to their respective venues, a key piece of UI I designed was a modular “Location card” component to bring this information together clearly.
The location card components centralise essential data for each location into a single source of truth. To streamline the user journey, I paired these with a dedicated takeaway context card linked directly to the Bopple app. I added expanded versions of the location cards across the 'About' page to improve discoverability and provide deeper location context.
Location information before my redesign
Location information after my redesign
Designing a UI that balanced effective communication and brand personality
Button state exploration
Design System
I applied atomic design principles to build a lightweight token system for colour and spacing, ensuring consistency and improving development speed, and created modular components with accessible interaction states.
I prioritised spaciousness, balance, and clear hierarchy through considered use of spacing, typography, and imagery to draw attention to key CTAs without visual clutter.
Primitive colour ramp
Colour
The existing pink used on the website failed accessibility checks, so I created a new warm-pink scale with sufficient contrast across use cases — darker tones for interactive elements, lighter tones for decorative use, improving accessibility while still maintaining Praise Joe’s familiar colour scheme and feel.
Example imagery and copy
Imagery and copy
Without access to the client's full image library at this stage, I selected existing imagery from their website and Instagram as placeholders to inform the visual direction and indicate tone and composition. I selected inviting, decadent imagery to showcase the brand's offerings, with final images to be selected once the website goes live. I adopted the brand's friendly, informal tone of voice to write copy where needed to provide additional information.
Location Cards
Given the findings that on the original website, location data was fragmented across the main content and footer, and takeaway links lacked clear proximity to their respective venues, a key piece of UI I designed was a modular “Location card” component to bring this information together clearly.
The location card components centralise essential data for each location into a single source of truth. To streamline the user journey, I paired these with a dedicated takeaway context card linked directly to the Bopple app. I added expanded versions of the location cards across the 'About' page to improve discoverability and provide deeper location context.
Location information before my redesign
Location information after my redesign
Designing a UI that balanced effective communication and brand personality
Button state exploration
Design System
I applied atomic design principles to build a lightweight token system for colour and spacing, ensuring consistency and improving development speed, and created modular components with accessible interaction states.
I prioritised spaciousness, balance, and clear hierarchy through considered use of spacing, typography, and imagery to draw attention to key CTAs without visual clutter.
Primitive colour ramp
Colour
The existing pink used on the website failed accessibility checks, so I created a new warm-pink scale with sufficient contrast across use cases — darker tones for interactive elements, lighter tones for decorative use, improving accessibility while still maintaining Praise Joe’s familiar colour scheme and feel.
Example imagery and copy
Imagery and copy
Without access to the client's full image library at this stage, I selected existing imagery from their website and Instagram as placeholders to inform the visual direction and indicate tone and composition. I selected inviting, decadent imagery to showcase the brand's offerings, with final images to be selected once the website goes live. I adopted the brand's friendly, informal tone of voice to write copy where needed to provide additional information.
Location Cards
Given the findings that on the original website, location data was fragmented across the main content and footer, and takeaway links lacked clear proximity to their respective venues, a key piece of UI I designed was a modular “Location card” component to bring this information together clearly.
The location card components centralise essential data for each location into a single source of truth. To streamline the user journey, I paired these with a dedicated takeaway context card linked directly to the Bopple app. I added expanded versions of the location cards across the 'About' page to improve discoverability and provide deeper location context.
Location information before my redesign
Location information after my redesign
Reflections
The redesigned website is due to launch late this spring.
What worked well
Starting from the website's core role, rather than the existing design, grounded every decision in user goals and kept the direction clear throughout.
What I would change
In hindsight, I would have built design system tokens earlier in my process so wireframes could translate more smoothly into high-fidelity screens, reducing rework when colour and spacing shift as imagery and detail are introduced.
Challenges
The biggest challenge was that working at a distance from the client through a studio limited my direct access to user data and feedback. Working more closely with a client and having access to analytics and direct user feedback as I often would as part of a product team would usually help guide and validate my solution.
Final home page design
Final about page design
Reflections
The redesigned website is due to launch late this spring.
What worked well
Starting from the website's core role, rather than the existing design, grounded every decision in user goals and kept the direction clear throughout.
What I would change
In hindsight, I would have built design system tokens earlier in my process so wireframes could translate more smoothly into high-fidelity screens, reducing rework when colour and spacing shift as imagery and detail are introduced.
Challenges
The biggest challenge was that working at a distance from the client through a studio limited my direct access to user data and feedback. Working more closely with a client and having access to analytics and direct user feedback as I often would as part of a product team would usually help guide and validate my solution.
Final home page design
Final about page design
Reflections
The redesigned website is due to launch late this spring.
What worked well
Starting from the website's core role, rather than the existing design, grounded every decision in user goals and kept the direction clear throughout.
What I would change
In hindsight, I would have built design system tokens earlier in my process so wireframes could translate more smoothly into high-fidelity screens, reducing rework when colour and spacing shift as imagery and detail are introduced.
Challenges
The biggest challenge was that working at a distance from the client through a studio limited my direct access to user data and feedback. Working more closely with a client and having access to analytics and direct user feedback as I often would as part of a product team would usually help guide and validate my solution.
Final home page design
Final about page design
Made it to the end? Let's chat!
I’m currently exploring new product design opportunities. If you think I’d be a good fit for your team, or just want to chat, let's connect on LinkedIn.
Made it to the end? Let's chat!
I’m currently exploring new product design opportunities. If you think I’d be a good fit for your team, or just want to chat, let's connect on LinkedIn.
Made it to the end? Let's chat!
I’m currently exploring new product design opportunities. If you think I’d be a good fit for your team, or just want to chat, let's connect on LinkedIn.