customization PLATFORM
From Concept to Creation, one cap at a time
COMPANY
enGorrate
ROLE
UX Designer
TOOLS
Figma, Photoshop
Paltform
Website
Overview
What started as a bold vision for a custom cap brand turned into a mission to create an effortless and engaging online shopping experience. Engorrate needed more than just an e-commerce platform—they needed a space where users could explore, personalize, and purchase with ease. Through deep research, usability testing, and strategic design, this project transformed their online presence, making customization intuitive and checkout seamless.
Problem
Engorrate’s challenge was to make the leap from B2B to B2C by crafting a dynamic website that empowered customers to personalize their favorite caps, transforming the shopping experience into something unique, engaging, and tailored to each individual.
Solution
To tackle this challenge, we designed a user-friendly website with an intuitive customization tool that allowed customers to personalize Engorrate’s best-selling caps.
Process
01. Research & Planning
To better understand the problem, we conducted primary research by testing a competitor’s product with real users. We presented a scenario and observed their interactions, uncovering valuable insights that highlighted pain points and helped shape our design approach.
“Imagine you’re heading to your friend’s bachelor party and want to order custom caps, but you’re not sure what image to put on them.”
How easy did you find the “Customize option”?
“Customize option was very easy, It’s accessible from the home page and from the menu bar”
How easy was to navigate on the customization option? Choosing the typography, the colors?
“Navigating the customization options was straightforward. The variety of fonts and colors was impressive.”
Was the preview image of the product useful?
“The preview image was very useful. It accurately showed how the final product would look”
To truly connect with our target audience, we created a user persona that brings our ideal customer to life. Meet Carlos, a key representative of the individuals we aim to serve, whose goals and challenges helped us shape the design direction.
Competitive analysis, testing and defining our persona has helped us to gather the following insights:
We should only offer customized caps so users know what the website is about.
Features of editing and preview are the most essential when it comes to customizing.
Check out should be simple not to overcomplicate as customizing can be overwhelming for some users.
MVP:
The website at the bare minimum must have an option for customer to customize caps with a variety of possibilities (colors, fonts, designs), clear instructions on how to proceed, good pictures of the products. The website offers customers a quick and convenient way to buy customized caps for special occasion.
02. Design & Prototyping
With all the research in hand, we shifted gears into the exciting phase of ideation. With the project’s vision in mind, we brainstormed ideas for the Home, Category, and Customization pages. Each team member contributed their unique perspective, laying the foundation for a truly collaborative design process.
As the final step in the ideation process, we focused on creating the sitemap and user task flows for two specific scenarios:
Purchasing a personalized cap.
Purchasing a standard cap.
03. Implementation
We moved from concepts to concrete designs, crafting mid-fidelity prototypes to bring our ideas to life. These prototypes allowed us to explore different design solutions, gather valuable user feedback, and fine-tune the experience.
As we developed the mid-fidelity prototypes, we carefully examined the key features that would make the customization page intuitive and user-friendly. After thoughtful discussions and a deep dive into our research, we decided on three core features:
Uploading personal images,
Adding custom text, and
Selecting a template from a predefined theme.
This combination aimed to strike the perfect balance between simplicity and personalization, empowering users to create a product that truly reflected their style.
To enhance the design, we conducted tests with our mid-fidelity prototype, asking the user to accomplish an specific task:
“Order a baseball cap and customiza it using a template design.”
User Feedback: What They Told Us
“It’s great that there are multiple pics of the customized product”
“Design review is very useful”
“Too much text on the home page”
"Layout” feature is not clear"
"Add image settings are not clear, they look odd”
Refining the Customization Page: Iterating for Perfection
The Customization page, being the heart of the product, underwent several iterations based on user feedback. As we tested, we made small yet impactful tweaks across all pages to enhance usability and improve the user experience, ultimately leading to a more seamless and intuitive design.
Branding
As our solutions took shape through testing, we brought the brand to life—crafting a cohesive identity that felt both meaningful and memorable. We chose blue for trust and stability, paired with orange for warmth and friendliness. More than just colors, they embodied the brand’s essence: reliable yet approachable, professional yet engaging:
04. Testing & Optimization
As we refined the high-fidelity design, some elements fell into place effortlessly—like the category page, where structure and functionality aligned seamlessly.
Category Page
Product Page
Customization Page
Customization Page
Review Page
Other elements like the header, demanded deeper exploration. We experimented with multiple variations, each incorporating the brand’s core colors, searching for the perfect balance. In the end, we embraced the simplicity and minimalism that had guided our vision from the start—creating a clean, intuitive experience that felt both familiar and refined."
After multiple discussions and iterations, the final desktop product is ready to be presented to the stakeholder. But this is just the beginning. With the client eager to bring the project to life, we’re still refining the UI, conducting ongoing testing, and making continuous improvements to ensure the best possible experience before launch."
Reflection
Next Steps
Usability testing of high-fi prototype.
Iterating the design based on the testing.
Presenting the final version to the stakeholder for future implementation.
Key Learnings
The Importance of Benchmarking
It is crucial it is to compare with industry standards to identify opportunities for improvement. It provides a clear perspective on what works well and where there is room for innovation.
The Value of Iteration
This project reinforced the idea that iteration is a vital part of the design process. Initial designs often need to be improved.
Creating Variations for Better Results
Developing multiple design variations for different website elements is crucial. Exploring various options helps in finding the best solutions and achieve better results.