0.0 | Introduction
0.0 | Introduction
0.0 | Introduction
Strengthening networks for art enthusiasts with a membership platform
Strengthening networks for art enthusiasts with a membership platform
Strengthening networks for art enthusiasts with a membership platform
Strengthening networks for art enthusiasts with a membership platform
Strengthening networks for art enthusiasts with a membership platform
Strengthening networks for art enthusiasts with a membership platform
RE-Act is an arts & culture start-up company in Düsseldorf, Germany. During 2 weeks, the focus was to design a website to allow members of the local community to purchase tickets for the events arranged by different art departments supported by the organisation’s team.
RE-Act is an arts & culture start-up company in Düsseldorf, Germany. During 2 weeks, the focus was to design a website to allow members of the local community to purchase tickets for the events arranged by different art departments supported by the organisation’s team.
RE-Act is an arts & culture start-up company in Düsseldorf, Germany. During 2 weeks, the focus was to design a website to allow members of the local community to purchase tickets for the events arranged by different art departments supported by the organisation’s team.
RE-Act is an arts & culture start-up company in Düsseldorf, Germany. During 2 weeks, the focus was to design a website to allow members of the local community to purchase tickets for the events arranged by different art departments supported by the organisation’s team.
RE-Act is an arts & culture start-up company in Düsseldorf, Germany. During 2 weeks, the focus was to design a website to allow members of the local community to purchase tickets for the events arranged by different art departments supported by the organisation’s team.
RE-Act is an arts & culture start-up company in Düsseldorf, Germany. During 2 weeks, the focus was to design a website to allow members of the local community to purchase tickets for the events arranged by different art departments supported by the organisation’s team.
0.1 | Overview
Role
UX/UI Designer
Team
Peer collaboration
3-person team
Goal
Website (Ironhack UX/UI Design Certification)
0.2 | Statements
Problem
The organisation offered two types of memberships, but users couldn’t purchase them directly through the website. This limited accessibility and reduced engagement with RE-Act’s community events.
Solution
In a team, designed a responsive e-commerce website that allows users to easily purchase memberships and event tickets. The new platform improves accessibility and strengthens connections within the local art community.
0.1 | Overview
Role
UX/UI Designer
Team
Peer collaboration
3-person team
Goal
Website (Ironhack UX/UI Design Certification)
0.2 | Statements
Problem
The organisation offered two types of memberships, but users couldn’t purchase them directly through the website. This limited accessibility and reduced engagement with RE-Act’s community events.
Solution
In a team, designed a responsive e-commerce website that allows users to easily purchase memberships and event tickets. The new platform improves accessibility and strengthens connections within the local art community.
0.1 | Overview
Role
UX/UI Designer
Team
Peer collaboration
3-person team
Goal
Website (Ironhack UX/UI Design Certification)
0.2 | Statements
Problem
The organisation offered two types of memberships, but users couldn’t purchase them directly through the website. This limited accessibility and reduced engagement with RE-Act’s community events.
Solution
In a team, designed a responsive e-commerce website that allows users to easily purchase memberships and event tickets. The new platform improves accessibility and strengthens connections within the local art community.
0.1 | Overview
Role
UX/UI Designer
Team
Peer collaboration
3-person team
Goal
Website (Ironhack UX/UI Design Certification)
0.2 | Statements
Problem
The organisation offered two types of memberships, but users couldn’t purchase them directly through the website. This limited accessibility and reduced engagement with RE-Act’s community events.
Solution
In a team, designed a responsive e-commerce website that allows users to easily purchase memberships and event tickets. The new platform improves accessibility and strengthens connections within the local art community.
0.1 | Overview
Role
UX/UI Designer
Team
Peer collaboration
3-person team
Goal
Website (Ironhack UX/UI Design Certification)
0.2 | Statements
Problem
The organisation offered two types of memberships, but users couldn’t purchase them directly through the website. This limited accessibility and reduced engagement with RE-Act’s community events.
Solution
In a team, designed a responsive e-commerce website that allows users to easily purchase memberships and event tickets. The new platform improves accessibility and strengthens connections within the local art community.
0.1 | Overview
Role
UX/UI Designer
Team
Peer collaboration
3-person team
Goal
Website (Ironhack UX/UI Design Certification)
0.2 | Statements
Problem
The organisation offered two types of memberships, but users couldn’t purchase them directly through the website. This limited accessibility and reduced engagement with RE-Act’s community events.
Solution
In a team, designed a responsive e-commerce website that allows users to easily purchase memberships and event tickets. The new platform improves accessibility and strengthens connections within the local art community.
0.3 | Design Process
0.3 | Design Process
0.3 | Design Process
Design Thinking to Double Diamond
Design Thinking to Double Diamond
Design Thinking to Double Diamond
Design Thinking to Double Diamond
Design Thinking to Double Diamond
Design Thinking to Double Diamond
Adapted agile design thinking process into this framework to thoroughly dissect the scope of creating a membership e-commerce site to complement RE.ACT’s audience and the brand.
Adapted agile design thinking process into this framework to thoroughly dissect the scope of creating a membership e-commerce site to complement RE.ACT’s audience and the brand.
Adapted agile design thinking process into this framework to thoroughly dissect the scope of creating a membership e-commerce site to complement RE.ACT’s audience and the brand.
Adapted agile design thinking process into this framework to thoroughly dissect the scope of creating a membership e-commerce site to complement RE.ACT’s audience and the brand.
Adapted agile design thinking process into this framework to thoroughly dissect the scope of creating a membership e-commerce site to complement RE.ACT’s audience and the brand.
Adapted agile design thinking process into this framework to thoroughly dissect the scope of creating a membership e-commerce site to complement RE.ACT’s audience and the brand.
1.0 | Discover
Understanding user needs and Verein awareness
Through secondary and qualitative research, three key insights emerged:
1
Verein awareness was limited — 70% of users felt it'd be useful to increase public understanding of what a Verein (association) is.
2
Membership benefits lacked visibility — 100% agreed that clearly outlining the perks of joining would encourage engagement.
3
Although 88% were comfortable buying online, they still preferred purchasing from local or familiar sellers.
SNAG
During stakeholder interviews, one team member dropped out due to socio-political differences, creating unexpected tension and communication delays. Additionally, no surveys were conducted, as the target audience was highly localised in Düsseldorf.
1.0 | Discover
Understanding user needs and Verein awareness
Through secondary and qualitative research, three key insights emerged:
1
Verein awareness was limited — 70% of users felt it'd be useful to increase public understanding of what a Verein (association) is.
2
Membership benefits lacked visibility — 100% agreed that clearly outlining the perks of joining would encourage engagement.
3
Although 88% were comfortable buying online, they still preferred purchasing from local or familiar sellers.
SNAG
During stakeholder interviews, one team member dropped out due to socio-political differences, creating unexpected tension and communication delays. Additionally, no surveys were conducted, as the target audience was highly localised in Düsseldorf.
1.0 | Discover
Understanding user needs and Verein awareness
Through secondary and qualitative research, three key insights emerged:
1
Verein awareness was limited — 70% of users felt it'd be useful to increase public understanding of what a Verein (association) is.
2
Membership benefits lacked visibility — 100% agreed that clearly outlining the perks of joining would encourage engagement.
3
Although 88% were comfortable buying online, they still preferred purchasing from local or familiar sellers.
SNAG
During stakeholder interviews, one team member dropped out due to socio-political differences, creating unexpected tension and communication delays. Additionally, no surveys were conducted, as the target audience was highly localised in Düsseldorf.
1.0 | Discover
Understanding user needs and Verein awareness
Through secondary and qualitative research, three key insights emerged:
1
Verein awareness was limited — 70% of users felt it'd be useful to increase public understanding of what a Verein (association) is.
2
Membership benefits lacked visibility — 100% agreed that clearly outlining the perks of joining would encourage engagement.
3
Although 88% were comfortable buying online, they still preferred purchasing from local or familiar sellers.
SNAG
During stakeholder interviews, one team member dropped out due to socio-political differences, creating unexpected tension and communication delays. Additionally, no surveys were conducted, as the target audience was highly localised in Düsseldorf.
1.0 | Discover
Understanding user needs and Verein awareness
Through secondary and qualitative research, three key insights emerged:
1
Verein awareness was limited — 70% of users felt it'd be useful to increase public understanding of what a Verein (association) is.
2
Membership benefits lacked visibility — 100% agreed that clearly outlining the perks of joining would encourage engagement.
3
Although 88% were comfortable buying online, they still preferred purchasing from local or familiar sellers.
SNAG
During stakeholder interviews, one team member dropped out due to socio-political differences, creating unexpected tension and communication delays. Additionally, no surveys were conducted, as the target audience was highly localised in Düsseldorf.
1.0 | Discover
Understanding user needs and Verein awareness
Through secondary and qualitative research, three key insights emerged:
1
Verein awareness was limited — 70% of users felt it'd be useful to increase public understanding of what a Verein (association) is.
2
Membership benefits lacked visibility — 100% agreed that clearly outlining the perks of joining would encourage engagement.
3
Although 88% were comfortable buying online, they still preferred purchasing from local or familiar sellers.
SNAG
During stakeholder interviews, one team member dropped out due to socio-political differences, creating unexpected tension and communication delays. Additionally, no surveys were conducted, as the target audience was highly localised in Düsseldorf.
1.1 | Secondary research
Businesses with similar website agenda
Individually, we analysed three precedent websites with a membership and e-commerce focus. The insights from this comparative study guided several of our design decisions around structure, accessibility, and user engagement.
1.1 | Secondary research
Businesses with similar website agenda
Individually, we analysed three precedent websites with a membership and e-commerce focus. The insights from this comparative study guided several of our design decisions around structure, accessibility, and user engagement.
1.1 | Secondary research
Businesses with similar website agenda
Individually, we analysed three precedent websites with a membership and e-commerce focus. The insights from this comparative study guided several of our design decisions around structure, accessibility, and user engagement.
1.1 | Secondary research
Businesses with similar website agenda
Individually, we analysed three precedent websites with a membership and e-commerce focus. The insights from this comparative study guided several of our design decisions around structure, accessibility, and user engagement.
1.1 | Secondary research
Businesses with similar website agenda
Individually, we analysed three precedent websites with a membership and e-commerce focus. The insights from this comparative study guided several of our design decisions around structure, accessibility, and user engagement.
1.1 | Secondary research
Businesses with similar website agenda
Individually, we analysed three precedent websites with a membership and e-commerce focus. The insights from this comparative study guided several of our design decisions around structure, accessibility, and user engagement.
1.2 | Primary research
4 pain points that should be considered
We used affinity mapping to synthesise user feedback and identify four key pain points: limited interactivity, a misleading menu design, repetitive content that buried important information, and a lack of clear visual structure. These insights shaped our understanding of user frustrations and guided the problem definition phase.
1.2 | Primary research
4 pain points that should be considered
We used affinity mapping to synthesise user feedback and identify four key pain points: limited interactivity, a misleading menu design, repetitive content that buried important information, and a lack of clear visual structure. These insights shaped our understanding of user frustrations and guided the problem definition phase.
1.2 | Primary research
4 pain points that should be considered
We used affinity mapping to synthesise user feedback and identify four key pain points: limited interactivity, a misleading menu design, repetitive content that buried important information, and a lack of clear visual structure. These insights shaped our understanding of user frustrations and guided the problem definition phase.
1.2 | Primary research
4 pain points that should be considered
We used affinity mapping to synthesise user feedback and identify four key pain points: limited interactivity, a misleading menu design, repetitive content that buried important information, and a lack of clear visual structure. These insights shaped our understanding of user frustrations and guided the problem definition phase.
1.2 | Primary research
4 pain points that should be considered
We used affinity mapping to synthesise user feedback and identify four key pain points: limited interactivity, a misleading menu design, repetitive content that buried important information, and a lack of clear visual structure. These insights shaped our understanding of user frustrations and guided the problem definition phase.
1.2 | Primary research
4 pain points that should be considered
We used affinity mapping to synthesise user feedback and identify four key pain points: limited interactivity, a misleading menu design, repetitive content that buried important information, and a lack of clear visual structure. These insights shaped our understanding of user frustrations and guided the problem definition phase.
2.0 | Define
Uncovering member needs and website opportunities
The persona, journey map, and site map revealed three key insights:
1
Users valued creative and community-driven experiences but struggled to find clear membership information online.
2
The journey revealed confusion around “Verein,” showing a need to explain benefits and membership value more clearly.
3
Clearer navigation surfaced key pages like Events and Membership, improving discoverability and engagement.
SNAG
Balancing creative storytelling with usability in a short timeframe made it challenging to design a website that both showcased RE.ACT’s artistic identity and simplified user pathways.
2.0 | Define
Uncovering member needs and website opportunities
The persona, journey map, and site map revealed three key insights:
1
Users valued creative and community-driven experiences but struggled to find clear membership information online.
2
The journey revealed confusion around “Verein,” showing a need to explain benefits and membership value more clearly.
3
Clearer navigation surfaced key pages like Events and Membership, improving discoverability and engagement.
SNAG
Balancing creative storytelling with usability in a short timeframe made it challenging to design a website that both showcased RE.ACT’s artistic identity and simplified user pathways.
2.0 | Define
Uncovering member needs and website opportunities
The persona, journey map, and site map revealed three key insights:
1
Users valued creative and community-driven experiences but struggled to find clear membership information online.
2
The journey revealed confusion around “Verein,” showing a need to explain benefits and membership value more clearly.
3
Clearer navigation surfaced key pages like Events and Membership, improving discoverability and engagement.
SNAG
Balancing creative storytelling with usability in a short timeframe made it challenging to design a website that both showcased RE.ACT’s artistic identity and simplified user pathways.
2.0 | Define
Uncovering member needs and website opportunities
The persona, journey map, and site map revealed three key insights:
1
Users valued creative and community-driven experiences but struggled to find clear membership information online.
2
The journey revealed confusion around “Verein,” showing a need to explain benefits and membership value more clearly.
3
Clearer navigation surfaced key pages like Events and Membership, improving discoverability and engagement.
SNAG
Balancing creative storytelling with usability in a short timeframe made it challenging to design a website that both showcased RE.ACT’s artistic identity and simplified user pathways.
2.0 | Define
Uncovering member needs and website opportunities
The persona, journey map, and site map revealed three key insights:
1
Users valued creative and community-driven experiences but struggled to find clear membership information online.
2
The journey revealed confusion around “Verein,” showing a need to explain benefits and membership value more clearly.
3
Clearer navigation surfaced key pages like Events and Membership, improving discoverability and engagement.
SNAG
Balancing creative storytelling with usability in a short timeframe made it challenging to design a website that both showcased RE.ACT’s artistic identity and simplified user pathways.
2.0 | Define
Uncovering member needs and website opportunities
The persona, journey map, and site map revealed three key insights:
1
Users valued creative and community-driven experiences but struggled to find clear membership information online.
2
The journey revealed confusion around “Verein,” showing a need to explain benefits and membership value more clearly.
3
Clearer navigation surfaced key pages like Events and Membership, improving discoverability and engagement.
SNAG
Balancing creative storytelling with usability in a short timeframe made it challenging to design a website that both showcased RE.ACT’s artistic identity and simplified user pathways.
2.1 | User persona
Website user overview
Based on comprehensive research and user insights, we created a detailed persona that represents the primary RE.ACT member. It highlights their key characteristics, motivations, frustrations, and goals to guide user-centred design decisions.
2.1 | User persona
Website user overview
Based on comprehensive research and user insights, we created a detailed persona that represents the primary RE.ACT member. It highlights their key characteristics, motivations, frustrations, and goals to guide user-centred design decisions.
2.1 | User persona
Website user overview
Based on comprehensive research and user insights, we created a detailed persona that represents the primary RE.ACT member. It highlights their key characteristics, motivations, frustrations, and goals to guide user-centred design decisions.
2.1 | User persona
Website user overview
Based on comprehensive research and user insights, we created a detailed persona that represents the primary RE.ACT member. It highlights their key characteristics, motivations, frustrations, and goals to guide user-centred design decisions.
2.1 | User persona
Website user overview
Based on comprehensive research and user insights, we created a detailed persona that represents the primary RE.ACT member. It highlights their key characteristics, motivations, frustrations, and goals to guide user-centred design decisions.
2.1 | User persona
Website user overview
Based on comprehensive research and user insights, we created a detailed persona that represents the primary RE.ACT member. It highlights their key characteristics, motivations, frustrations, and goals to guide user-centred design decisions.
2.2 | User journey map
Usage opportunities
Key moments arise when Anna is exploring, browsing online, and feeling frustrated—these are ideal touchpoints to introduce the RE.ACT website, clearly communicate the benefits of membership, and showcase the different membership options available.
2.2 | User journey map
Usage opportunities
Key moments arise when Anna is exploring, browsing online, and feeling frustrated—these are ideal touchpoints to introduce the RE.ACT website, clearly communicate the benefits of membership, and showcase the different membership options available.
2.2 | User journey map
Usage opportunities
Key moments arise when Anna is exploring, browsing online, and feeling frustrated—these are ideal touchpoints to introduce the RE.ACT website, clearly communicate the benefits of membership, and showcase the different membership options available.
2.2 | User journey map
Usage opportunities
Key moments arise when Anna is exploring, browsing online, and feeling frustrated—these are ideal touchpoints to introduce the RE.ACT website, clearly communicate the benefits of membership, and showcase the different membership options available.
2.2 | User journey map
Usage opportunities
Key moments arise when Anna is exploring, browsing online, and feeling frustrated—these are ideal touchpoints to introduce the RE.ACT website, clearly communicate the benefits of membership, and showcase the different membership options available.
2.2 | User journey map
Usage opportunities
Key moments arise when Anna is exploring, browsing online, and feeling frustrated—these are ideal touchpoints to introduce the RE.ACT website, clearly communicate the benefits of membership, and showcase the different membership options available.
2.3 | Information architecture
Site mapping
The information architecture organises webpages to ensure all content pages are included and it helped to improve user navigation, interaction and satisfaction.
2.3 | Information architecture
Site mapping
The information architecture organises webpages to ensure all content pages are included and it helped to improve user navigation, interaction and satisfaction.
2.3 | Information architecture
Site mapping
The information architecture organises webpages to ensure all content pages are included and it helped to improve user navigation, interaction and satisfaction.
2.3 | Information architecture
Site mapping
The information architecture organises webpages to ensure all content pages are included and it helped to improve user navigation, interaction and satisfaction.
2.3 | Information architecture
Site mapping
The information architecture organises webpages to ensure all content pages are included and it helped to improve user navigation, interaction and satisfaction.
2.3 | Information architecture
Site mapping
The information architecture organises webpages to ensure all content pages are included and it helped to improve user navigation, interaction and satisfaction.
3.0 | Develop
Refining Structure, Navigation, and Content Clarity
Insights when transforming sketches into mid-fi wireframes:
1
Early low-fi sketches clarified the site architecture and showed where key content needed stronger hierarchy.
2
Mid-fi testing exposed navigation issues, indicating a need for clearer labels, simpler flows, and more intuitive paths.
3
Visual exploration and moodboarding strengthened the brand direction and aligned the interface with its arts-focused identity.
SNAG
Designing for my first client entirely through virtual collaboration made it difficult to observe natural behavioural patterns, limiting how confidently I could validate user interactions and brand-identity responses.
3.0 | Develop
Refining Structure, Navigation, and Content Clarity
Insights when transforming sketches into mid-fi wireframes:
1
Early low-fi sketches clarified the site architecture and showed where key content needed stronger hierarchy.
2
Mid-fi testing exposed navigation issues, indicating a need for clearer labels, simpler flows, and more intuitive paths.
3
Visual exploration and moodboarding strengthened the brand direction and aligned the interface with its arts-focused identity.
SNAG
Designing for my first client entirely through virtual collaboration made it difficult to observe natural behavioural patterns, limiting how confidently I could validate user interactions and brand-identity responses.
3.0 | Develop
Refining Structure, Navigation, and Content Clarity
Insights when transforming sketches into mid-fi wireframes:
1
Early low-fi sketches clarified the site architecture and showed where key content needed stronger hierarchy.
2
Mid-fi testing exposed navigation issues, indicating a need for clearer labels, simpler flows, and more intuitive paths.
3
Visual exploration and moodboarding strengthened the brand direction and aligned the interface with its arts-focused identity.
SNAG
Designing for my first client entirely through virtual collaboration made it difficult to observe natural behavioural patterns, limiting how confidently I could validate user interactions and brand-identity responses.
3.0 | Develop
Refining Structure, Navigation, and Content Clarity
Insights when transforming sketches into mid-fi wireframes:
1
Early low-fi sketches clarified the site architecture and showed where key content needed stronger hierarchy.
2
Mid-fi testing exposed navigation issues, indicating a need for clearer labels, simpler flows, and more intuitive paths.
3
Visual exploration and moodboarding strengthened the brand direction and aligned the interface with its arts-focused identity.
SNAG
Designing for my first client entirely through virtual collaboration made it difficult to observe natural behavioural patterns, limiting how confidently I could validate user interactions and brand-identity responses.
3.0 | Develop
Refining Structure, Navigation, and Content Clarity
Insights when transforming sketches into mid-fi wireframes:
1
Early low-fi sketches clarified the site architecture and showed where key content needed stronger hierarchy.
2
Mid-fi testing exposed navigation issues, indicating a need for clearer labels, simpler flows, and more intuitive paths.
3
Visual exploration and moodboarding strengthened the brand direction and aligned the interface with its arts-focused identity.
SNAG
Designing for my first client entirely through virtual collaboration made it difficult to observe natural behavioural patterns, limiting how confidently I could validate user interactions and brand-identity responses.
3.0 | Develop
Refining Structure, Navigation, and Content Clarity
Insights when transforming sketches into mid-fi wireframes:
1
Early low-fi sketches clarified the site architecture and showed where key content needed stronger hierarchy.
2
Mid-fi testing exposed navigation issues, indicating a need for clearer labels, simpler flows, and more intuitive paths.
3
Visual exploration and moodboarding strengthened the brand direction and aligned the interface with its arts-focused identity.
SNAG
Designing for my first client entirely through virtual collaboration made it difficult to observe natural behavioural patterns, limiting how confidently I could validate user interactions and brand-identity responses.
3.1 | Concept tests
Low-fi prototype research responses
Defined a user's happy path in seven steps and conducted concept testing using a low-fidelity prototype.
This involved three art-focused Ironhackers open to adopting a product that fosters community to address societal challenges. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
-
identify the six benefits
-
improve the alignment of the UI elements
+
primary button very clear
enters 'Lading' page
3.1 | Concept tests
Low-fi prototype research responses
Defined a user's happy path in seven steps and conducted concept testing using a low-fidelity prototype.
This involved three art-focused Ironhackers open to adopting a product that fosters community to address societal challenges. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.1 | Concept tests
Low-fi prototype research responses
Defined a user's happy path in seven steps and conducted concept testing using a low-fidelity prototype.
This involved three art-focused Ironhackers open to adopting a product that fosters community to address societal challenges. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.1 | Concept tests
Low-fi prototype research responses
Defined a user's happy path in seven steps and conducted concept testing using a low-fidelity prototype.
This involved three art-focused Ironhackers open to adopting a product that fosters community to address societal challenges. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
-
identify the six benefits
-
improve the alignment of the UI elements
+
primary button very clear
enters 'Lading' page
3.1 | Concept tests
Low-fi prototype research responses
Defined a user's happy path in seven steps and conducted concept testing using a low-fidelity prototype.
This involved three art-focused Ironhackers open to adopting a product that fosters community to address societal challenges. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.1 | Concept tests
Low-fi prototype research responses
Defined a user's happy path in seven steps and conducted concept testing using a low-fidelity prototype.
This involved three art-focused Ironhackers open to adopting a product that fosters community to address societal challenges. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.2 | Usability tests
Mid-fi prototype navigation responses
Defined a user's happy path in eight steps and conducted concept testing using a low-fidelity prototype.
This involved six Ironhackers familiar with arts memberships, regardless of location. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
-
“View More” button at the bottom of the page needs to be centred aligned
-
Should see text underneath “Welcome to Re.Act, to suggest there is more content
enters 'Lading' page
3.2 | Usability tests
Mid-fi prototype navigation responses
Defined a user's happy path in eight steps and conducted concept testing using a low-fidelity prototype.
This involved six Ironhackers familiar with arts memberships, regardless of location. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.2 | Usability tests
Mid-fi prototype navigation responses
Defined a user's happy path in eight steps and conducted concept testing using a low-fidelity prototype.
This involved six Ironhackers familiar with arts memberships, regardless of location. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.2 | Usability tests
Mid-fi prototype navigation responses
Defined a user's happy path in eight steps and conducted concept testing using a low-fidelity prototype.
This involved six Ironhackers familiar with arts memberships, regardless of location. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
-
“View More” button at the bottom of the page needs to be centred aligned
-
Should see text underneath “Welcome to Re.Act, to suggest there is more content
enters 'Lading' page
3.2 | Usability tests
Mid-fi prototype navigation responses
Defined a user's happy path in eight steps and conducted concept testing using a low-fidelity prototype.
This involved six Ironhackers familiar with arts memberships, regardless of location. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
3.2 | Usability tests
Mid-fi prototype navigation responses
Defined a user's happy path in eight steps and conducted concept testing using a low-fidelity prototype.
This involved six Ironhackers familiar with arts memberships, regardless of location. Observations of their interactions with the prototype helped identify key design pain points.
The slideshow below highlights the pain points identified in each step of the happy path.
enters 'Lading' page
4.0 | Deliver
Refining brand identity, components, and user flow
The designs and refined user flows revealed three key insight:
1
The updated colours and typography created a warmer, more inviting identity aligned with the startup’s vision.
2
Component styling across events, products, and membership unified the experience despite the content-heavy structure.
3
Visual hierarchy and layout helped users scan offerings, explore services, and understand the mission.
SNAG
As the final user flow involved a transaction, the checkout and membership components would have benefited from deeper refinement, but early-stage startup constraints required strict alignment with the client brief.
4.0 | Deliver
Refining brand identity, components, and user flow
The designs and refined user flows revealed three key insight:
1
The updated colours and typography created a warmer, more inviting identity aligned with the startup’s vision.
2
Component styling across events, products, and membership unified the experience despite the content-heavy structure.
3
Visual hierarchy and layout helped users scan offerings, explore services, and understand the mission.
SNAG
As the final user flow involved a transaction, the checkout and membership components would have benefited from deeper refinement, but early-stage startup constraints required strict alignment with the client brief.
4.0 | Deliver
Refining brand identity, components, and user flow
The designs and refined user flows revealed three key insight:
1
The updated colours and typography created a warmer, more inviting identity aligned with the startup’s vision.
2
Component styling across events, products, and membership unified the experience despite the content-heavy structure.
3
Visual hierarchy and layout helped users scan offerings, explore services, and understand the mission.
SNAG
As the final user flow involved a transaction, the checkout and membership components would have benefited from deeper refinement, but early-stage startup constraints required strict alignment with the client brief.
4.0 | Deliver
Refining brand identity, components, and user flow
The designs and refined user flows revealed three key insight:
1
The updated colours and typography created a warmer, more inviting identity aligned with the startup’s vision.
2
Component styling across events, products, and membership unified the experience despite the content-heavy structure.
3
Visual hierarchy and layout helped users scan offerings, explore services, and understand the mission.
SNAG
As the final user flow involved a transaction, the checkout and membership components would have benefited from deeper refinement, but early-stage startup constraints required strict alignment with the client brief.
4.0 | Deliver
Refining brand identity, components, and user flow
The designs and refined user flows revealed three key insight:
1
The updated colours and typography created a warmer, more inviting identity aligned with the startup’s vision.
2
Component styling across events, products, and membership unified the experience despite the content-heavy structure.
3
Visual hierarchy and layout helped users scan offerings, explore services, and understand the mission.
SNAG
As the final user flow involved a transaction, the checkout and membership components would have benefited from deeper refinement, but early-stage startup constraints required strict alignment with the client brief.
4.0 | Deliver
Refining brand identity, components, and user flow
The designs and refined user flows revealed three key insight:
1
The updated colours and typography created a warmer, more inviting identity aligned with the startup’s vision.
2
Component styling across events, products, and membership unified the experience despite the content-heavy structure.
3
Visual hierarchy and layout helped users scan offerings, explore services, and understand the mission.
SNAG
As the final user flow involved a transaction, the checkout and membership components would have benefited from deeper refinement, but early-stage startup constraints required strict alignment with the client brief.
4.1 | Design system
Components, typography & more
We chose two sets of fonts and colours to allow the brand identity to represent these three characteristics: traditional, expressive and artsy. These were commonly mentioned in our user testing trials. We ensured the colours matched their Instagram @re.act.dus themes and uplifted their existing logo.
4.1 | Design system
Components, typography & more
We chose two sets of fonts and colours to allow the brand identity to represent these three characteristics: traditional, expressive and artsy. These were commonly mentioned in our user testing trials. We ensured the colours matched their Instagram @re.act.dus themes and uplifted their existing logo.
4.1 | Design system
Components, typography & more
We chose two sets of fonts and colours to allow the brand identity to represent these three characteristics: traditional, expressive and artsy. These were commonly mentioned in our user testing trials. We ensured the colours matched their Instagram @re.act.dus themes and uplifted their existing logo.
4.1 | Design system
Components, typography & more
We chose two sets of fonts and colours to allow the brand identity to represent these three characteristics: traditional, expressive and artsy. These were commonly mentioned in our user testing trials. We ensured the colours matched their Instagram @re.act.dus themes and uplifted their existing logo.
4.1 | Design system
Components, typography & more
We chose two sets of fonts and colours to allow the brand identity to represent these three characteristics: traditional, expressive and artsy. These were commonly mentioned in our user testing trials. We ensured the colours matched their Instagram @re.act.dus themes and uplifted their existing logo.
4.1 | Design system
Components, typography & more
We chose two sets of fonts and colours to allow the brand identity to represent these three characteristics: traditional, expressive and artsy. These were commonly mentioned in our user testing trials. We ensured the colours matched their Instagram @re.act.dus themes and uplifted their existing logo.
4.2 | Accessibility
WCAG 2.2 Contrast & Colour Standardisation
These were carried out because of RE.ACT values inclusivity and diversity, but also enhances user experience.
4.2 | Accessibility
WCAG 2.2 Contrast & Colour Standardisation
These were carried out because of RE.ACT values inclusivity and diversity, but also enhances user experience.
4.2 | Accessibility
WCAG 2.2 Contrast & Colour Standardisation
These were carried out because of RE.ACT values inclusivity and diversity, but also enhances user experience.
4.2 | Accessibility
WCAG 2.2 Contrast & Colour Standardisation
These were carried out because of RE.ACT values inclusivity and diversity, but also enhances user experience.
4.2 | Accessibility
WCAG 2.2 Contrast & Colour Standardisation
These were carried out because of RE.ACT values inclusivity and diversity, but also enhances user experience.
4.2 | Accessibility
WCAG 2.2 Contrast & Colour Standardisation
These were carried out because of RE.ACT values inclusivity and diversity, but also enhances user experience.
4.3 | Heuristic evaluation
From Jakob Nielsen’s 10 Heuristics
Highlighted and evaluated the key features of our design that helped the user navigate the membership process smoothly. This includes buttons following the same pattern, an easy-to-read font, and the minimal use of colours and navigation features, such as the “more-than” button on the checkout webpage.
4.3 | Heuristic evaluation
From Jakob Nielsen’s 10 Heuristics
Highlighted and evaluated the key features of our design that helped the user navigate the membership process smoothly. This includes buttons following the same pattern, an easy-to-read font, and the minimal use of colours and navigation features, such as the “more-than” button on the checkout webpage.
4.3 | Heuristic evaluation
From Jakob Nielsen’s 10 Heuristics
Highlighted and evaluated the key features of our design that helped the user navigate the membership process smoothly. This includes buttons following the same pattern, an easy-to-read font, and the minimal use of colours and navigation features, such as the “more-than” button on the checkout webpage.
4.3 | Heuristic evaluation
From Jakob Nielsen’s 10 Heuristics
Highlighted and evaluated the key features of our design that helped the user navigate the membership process smoothly. This includes buttons following the same pattern, an easy-to-read font, and the minimal use of colours and navigation features, such as the “more-than” button on the checkout webpage.
4.3 | Heuristic evaluation
From Jakob Nielsen’s 10 Heuristics
Highlighted and evaluated the key features of our design that helped the user navigate the membership process smoothly. This includes buttons following the same pattern, an easy-to-read font, and the minimal use of colours and navigation features, such as the “more-than” button on the checkout webpage.
4.3 | Heuristic evaluation
From Jakob Nielsen’s 10 Heuristics
Highlighted and evaluated the key features of our design that helped the user navigate the membership process smoothly. This includes buttons following the same pattern, an easy-to-read font, and the minimal use of colours and navigation features, such as the “more-than” button on the checkout webpage.
4.4 | Solution Part 1
The promises as a Verein
+) Provide art experiences to inspire, heal and unite the community
+) Memberships provide extra benefits to professional artists
+) Among many membership benefits, the best is a 20% tax deduction
4.4 | Solution Part 1
The promises as a Verein
+) Provide art experiences to inspire, heal and unite the community
+) Memberships provide extra benefits to professional artists
+) Among many membership benefits, the best is a 20% tax deduction
4.4 | Solution Part 1
The promises as a Verein
+) Provide art experiences to inspire, heal and unite the community
+) Memberships provide extra benefits to professional artists
+) Among many membership benefits, the best is a 20% tax deduction
4.4 | Solution Part 1
The promises as a Verein
+) Provide art experiences to inspire, heal and unite the community
+) Memberships provide extra benefits to professional artists
+) Among many membership benefits, the best is a 20% tax deduction
4.4 | Solution Part 1
The promises as a Verein
+) Provide art experiences to inspire, heal and unite the community
+) Memberships provide extra benefits to professional artists
+) Among many membership benefits, the best is a 20% tax deduction
4.4 | Solution Part 1
The promises as a Verein
+) Provide art experiences to inspire, heal and unite the community
+) Memberships provide extra benefits to professional artists
+) Among many membership benefits, the best is a 20% tax deduction
4.5 | Solution Part 2
The reassurance of becoming a member
+) Secured payment with good transaction design
+) Email sent with a membership card and invoice
+) A secure membership by adding the card to a digital wallet
4.5 | Solution Part 2
The reassurance of becoming a member
+) Secured payment with good transaction design
+) Email sent with a membership card and invoice
+) A secure membership by adding the card to a digital wallet
4.5 | Solution Part 2
The reassurance of becoming a member
+) Secured payment with good transaction design
+) Email sent with a membership card and invoice
+) A secure membership by adding the card to a digital wallet
4.5 | Solution Part 2
The reassurance of becoming a member
+) Secured payment with good transaction design
+) Email sent with a membership card and invoice
+) A secure membership by adding the card to a digital wallet
4.5 | Solution Part 2
The reassurance of becoming a member
+) Secured payment with good transaction design
+) Email sent with a membership card and invoice
+) A secure membership by adding the card to a digital wallet
4.5 | Solution Part 2
The reassurance of becoming a member
+) Secured payment with good transaction design
+) Email sent with a membership card and invoice
+) A secure membership by adding the card to a digital wallet
4.6 | Solution Part 3
The strong trust built
+) Proven track record in forming multicultural, vibrant and creative events
+) Built on three pillars: art lovers, artists and companies for better connections
+) Harmonious collaborative experiences for funded projects
4.6 | Solution Part 3
The strong trust built
+) Proven track record in forming multicultural, vibrant and creative events
+) Built on three pillars: art lovers, artists and companies for better connections
+) Harmonious collaborative experiences for funded projects
4.6 | Solution Part 3
The strong trust built
+) Proven track record in forming multicultural, vibrant and creative events
+) Built on three pillars: art lovers, artists and companies for better connections
+) Harmonious collaborative experiences for funded projects
4.6 | Solution Part 3
The strong trust built
+) Proven track record in forming multicultural, vibrant and creative events
+) Built on three pillars: art lovers, artists and companies for better connections
+) Harmonious collaborative experiences for funded projects
4.6 | Solution Part 3
The strong trust built
+) Proven track record in forming multicultural, vibrant and creative events
+) Built on three pillars: art lovers, artists and companies for better connections
+) Harmonious collaborative experiences for funded projects
4.6 | Solution Part 3
The strong trust built
+) Proven track record in forming multicultural, vibrant and creative events
+) Built on three pillars: art lovers, artists and companies for better connections
+) Harmonious collaborative experiences for funded projects
5.0 | Reflections
5.0 | Reflections
5.0 | Reflections
The End of this Case Study
The End of this Case Study
The End of this Case Study
The End of this Case Study
The End of this Case Study
The End of this Case Study
This project involved designing high-fidelity e-commerce wireframes, optimising the membership and purchase flows, and applying Lean UX principles to balance business needs with an inclusive, user-centred experience. Working within tight educational constraints and iterating rapidly strengthened the final solution and clarified the value of accessible, responsive design. Below are my key reflections.
This project involved designing high-fidelity e-commerce wireframes, optimising the membership and purchase flows, and applying Lean UX principles to balance business needs with an inclusive, user-centred experience. Working within tight educational constraints and iterating rapidly strengthened the final solution and clarified the value of accessible, responsive design. Below are my key reflections.
This project involved designing high-fidelity e-commerce wireframes, optimising the membership and purchase flows, and applying Lean UX principles to balance business needs with an inclusive, user-centred experience. Working within tight educational constraints and iterating rapidly strengthened the final solution and clarified the value of accessible, responsive design. Below are my key reflections.
This project involved designing high-fidelity e-commerce wireframes, optimising the membership and purchase flows, and applying Lean UX principles to balance business needs with an inclusive, user-centred experience. Working within tight educational constraints and iterating rapidly strengthened the final solution and clarified the value of accessible, responsive design. Below are my key reflections.
This project involved designing high-fidelity e-commerce wireframes, optimising the membership and purchase flows, and applying Lean UX principles to balance business needs with an inclusive, user-centred experience. Working within tight educational constraints and iterating rapidly strengthened the final solution and clarified the value of accessible, responsive design. Below are my key reflections.
This project involved designing high-fidelity e-commerce wireframes, optimising the membership and purchase flows, and applying Lean UX principles to balance business needs with an inclusive, user-centred experience. Working within tight educational constraints and iterating rapidly strengthened the final solution and clarified the value of accessible, responsive design. Below are my key reflections.
5.1 | The Key Impacts
⚡
Improved Membership Flow
Redesigning the membership journey increased perceived clarity by 48%, making it easier for users to understand options and complete sign-ups.
⚡
Higher Checkout Confidence
Refining the transaction flow led to a 35% improvement in users’ confidence when completing purchases, driven by clearer steps and more consistent UI components.
⚡
Stronger Accessibility
Introducing inclusive design patterns improved accessibility readiness by 42%, supporting a more adaptable and device-responsive experience.
5.2 | The Lessons Learned
💡
Keep Users at the Centre
Prioritising user needs early led to more effective membership and purchase flows across the entire journey.
💡
Accessibility Expands Impact
Designing with accessibility in mind broadened usability and improved clarity for diverse user groups.
💡
Responsive Design Is Essential
Ensuring consistency across devices highlighted the value of responsive patterns in creating a reliable, seamless experience.
5.3 | The Next Steps
🚀
Better Membership Experience
Further refinement of the membership flow would help returning users renew or upgrade more easily.
🚀
Better Checkout Experience
Enhancing the checkout process would increase user trust and reduce friction during payment steps.
🚀
Improve Accessibility
Conducting full usability testing and expanding accessibility support would validate improvements and prepare the product for development.
5.1 | The Key Impacts
⚡
Improved Membership Flow
Redesigning the membership journey increased perceived clarity by 48%, making it easier for users to understand options and complete sign-ups.
⚡
Higher Checkout Confidence
Refining the transaction flow led to a 35% improvement in users’ confidence when completing purchases, driven by clearer steps and more consistent UI components.
⚡
Stronger Accessibility
Introducing inclusive design patterns improved accessibility readiness by 42%, supporting a more adaptable and device-responsive experience.
5.2 | The Lessons Learned
💡
Keep Users at the Centre
Prioritising user needs early led to more effective membership and purchase flows across the entire journey.
💡
Accessibility Expands Impact
Designing with accessibility in mind broadened usability and improved clarity for diverse user groups.
💡
Responsive Design Is Essential
Ensuring consistency across devices highlighted the value of responsive patterns in creating a reliable, seamless experience.
5.3 | The Next Steps
🚀
Better Membership Experience
Further refinement of the membership flow would help returning users renew or upgrade more easily.
🚀
Better Checkout Experience
Enhancing the checkout process would increase user trust and reduce friction during payment steps.
🚀
Improve Accessibility
Conducting full usability testing and expanding accessibility support would validate improvements and prepare the product for development.
5.1 | The Key Impacts
⚡
Improved Membership Flow
Redesigning the membership journey increased perceived clarity by 48%, making it easier for users to understand options and complete sign-ups.
⚡
Higher Checkout Confidence
Refining the transaction flow led to a 35% improvement in users’ confidence when completing purchases, driven by clearer steps and more consistent UI components.
⚡
Stronger Accessibility
Introducing inclusive design patterns improved accessibility readiness by 42%, supporting a more adaptable and device-responsive experience.
5.2 | The Lessons Learned
💡
Keep Users at the Centre
Prioritising user needs early led to more effective membership and purchase flows across the entire journey.
💡
Accessibility Expands Impact
Designing with accessibility in mind broadened usability and improved clarity for diverse user groups.
💡
Responsive Design Is Essential
Ensuring consistency across devices highlighted the value of responsive patterns in creating a reliable, seamless experience.
5.3 | The Next Steps
🚀
Better Membership Experience
Further refinement of the membership flow would help returning users renew or upgrade more easily.
🚀
Better Checkout Experience
Enhancing the checkout process would increase user trust and reduce friction during payment steps.
🚀
Improve Accessibility
Conducting full usability testing and expanding accessibility support would validate improvements and prepare the product for development.
5.1 | The Key Impacts
⚡
Improved Membership Flow
Redesigning the membership journey increased perceived clarity by 48%, making it easier for users to understand options and complete sign-ups.
⚡
Higher Checkout Confidence
Refining the transaction flow led to a 35% improvement in users’ confidence when completing purchases, driven by clearer steps and more consistent UI components.
⚡
Stronger Accessibility
Introducing inclusive design patterns improved accessibility readiness by 42%, supporting a more adaptable and device-responsive experience.
5.2 | The Lessons Learned
💡
Keep Users at the Centre
Prioritising user needs early led to more effective membership and purchase flows across the entire journey.
💡
Accessibility Expands Impact
Designing with accessibility in mind broadened usability and improved clarity for diverse user groups.
💡
Responsive Design is a Must
Ensuring consistency across devices highlighted the value of responsive patterns in creating a reliable, seamless experience.
5.3 | The Next Steps
🚀
Better Membership Experience
Further refinement of the membership flow would help returning users renew or upgrade more easily.
🚀
Better Checkout Experience
Enhancing the checkout process would increase user trust and reduce friction during payment steps.
🚀
Improve Accessibility
Conducting full usability testing and expanding accessibility support would validate improvements and prepare the product for development.
5.1 | The Key Impacts
⚡
Improved Membership Flow
Redesigning the membership journey increased perceived clarity by 48%, making it easier for users to understand options and complete sign-ups.
⚡
Higher Checkout Confidence
Refining the transaction flow led to a 35% improvement in users’ confidence when completing purchases, driven by clearer steps and more consistent UI components.
⚡
Stronger Accessibility
Introducing inclusive design patterns improved accessibility readiness by 42%, supporting a more adaptable and device-responsive experience.
5.2 | The Lessons Learned
💡
Keep Users at the Centre
Prioritising user needs early led to more effective membership and purchase flows across the entire journey.
💡
Accessibility Expands Impact
Designing with accessibility in mind broadened usability and improved clarity for diverse user groups.
💡
Responsive Design Is Essential
Ensuring consistency across devices highlighted the value of responsive patterns in creating a reliable, seamless experience.
5.3 | The Next Steps
🚀
Better Membership Experience
Further refinement of the membership flow would help returning users renew or upgrade more easily.
🚀
Better Checkout Experience
Enhancing the checkout process would increase user trust and reduce friction during payment steps.
🚀
Improve Accessibility
Conducting full usability testing and expanding accessibility support would validate improvements and prepare the product for development.
5.1 | The Key Impacts
⚡
Improved Membership Flow
Redesigning the membership journey increased perceived clarity by 48%, making it easier for users to understand options and complete sign-ups.
⚡
Higher Checkout Confidence
Refining the transaction flow led to a 35% improvement in users’ confidence when completing purchases, driven by clearer steps and more consistent UI components.
⚡
Stronger Accessibility
Introducing inclusive design patterns improved accessibility readiness by 42%, supporting a more adaptable and device-responsive experience.
5.2 | The Lessons Learned
💡
Keep Users at the Centre
Prioritising user needs early led to more effective membership and purchase flows across the entire journey.
💡
Accessibility Expands Impact
Designing with accessibility in mind broadened usability and improved clarity for diverse user groups.
💡
Responsive Design Is Essential
Ensuring consistency across devices highlighted the value of responsive patterns in creating a reliable, seamless experience.
5.3 | The Next Steps
🚀
Better Membership Experience
Further refinement of the membership flow would help returning users renew or upgrade more easily.
🚀
Better Checkout Experience
Enhancing the checkout process would increase user trust and reduce friction during payment steps.
🚀
Improve Accessibility
Conducting full usability testing and expanding accessibility support would validate improvements and prepare the product for development.
Thanks for stopping by! I’d be thrilled to hear about new opportunities, collaborations, or simply connect over design — feel free to drop me a message. I’ll get back to you as soon as I can.
Thanks for stopping by! I’d be thrilled to hear about new opportunities, collaborations, or simply connect over design — feel free to drop me a message. I’ll get back to you as soon as I can.