Redesigning a specialty coffee e-commerce experience
to make navigation, checkout, and brand storytelling feel clear, trustworthy, and modern.
Company
Arabay
Industry
E-com • F&B
Duration
65 hours
Role
UX/UI Design, Research, Branding, CRO
Tools
Figma, FigJam, Midjourney, ChatGPT
Background
Arabay’s store reflected the brand’s heritage, but the experience felt outdated and hard to navigate. The core UX challenge was not just visual modernization. It was how to make product discovery, purchase decisions, and checkout easier while preserving the warmth, story, and credibility of a specialty coffee brand.
Outcome
The redesigned ARABAY platform merges the brand’s rich heritage with a modern, user-centered e-commerce experience. Key improvements include a streamlined navigation system, an engaging storytelling approach to highlight ARABAY’s history and sustainable practices, and a revamped checkout process that minimizes friction. The responsive, desktop-first design ensures accessibility and ease of use for a diverse audience. The result is a platform that balances tradition and functionality, delivering an intuitive and memorable shopping experience for ARABAY’s customers.
Challenges
01
The redesign had to modernize the experience without losing Arabay’s heritage and sense of authenticity.
02
The product needed to balance emotional storytelling with efficient e-commerce behavior.
03
Trust signals mattered: payment preferences, returns, delivery, and store information all influenced buying confidence.
04
Users expected fast, familiar shopping patterns shaped by broader e-commerce platforms.
05
Design for multiple breakpoints (Desktop, Tablet, Mobile)
Process
User research
Definition
Ideation
Prototyping & Testing
Final UI
My Role
UX/UI
Research
CRO
Visual Design
Branding
My work included:
User interviews and research synthesis
Competitive analysis across specialty e-commerce
Problem framing and feature prioritization
Information architecture and user flows
Wireframing and testing
Brand direction, UI design, and content structure
AI-generated visual exploration for brand-consistent imagery
Key Decisions
1. Treat trust and usability as the foundation of the redesign
What changed:
I prioritized clearer navigation, simpler product discovery, transparent product information, and a more efficient checkout and return flow.
Why:
Interviews showed that users judge online shops quickly based on ease, clarity, professionalism, and low-friction purchase paths.
Alternative considered:
Leading mainly with a visual refresh.
Tradeoff:
A UX-led approach produces stronger commerce fundamentals, but leaves less room for purely decorative brand gestures.
2. Integrate brand storytelling into the shopping journey instead of isolating it
What changed:
I expanded the landing experience and added a dedicated history layer with certifications, sourcing, and brand context.
Why:
Arabay’s heritage is a differentiator, but it only adds value if it supports trust and product understanding rather than interrupting the path to purchase.
Alternative considered:
Keeping storytelling in a separate about-style section.
Tradeoff:
Richer content improves brand depth, but must be carefully structured to avoid clutter and distraction.
3. Replace breadcrumb-heavy navigation with clearer second-level subnavigation
What changed:
After testing, I moved away from breadcrumb-first navigation and introduced submenus in the second-level top navigation.
Why:
Participants needed faster orientation and clearer local movement across shopping categories and related pages.
Alternative considered:
Retaining breadcrumbs as the main wayfinding pattern.
Tradeoff:
Subnavigation can be more immediately actionable, but requires disciplined IA to stay clean and predictable.
4. Use iterative testing to shape checkout details, not just structure
What changed:
I refined labels, added cart thumbnails, repositioned checkout messaging, added a billing/shipping checkbox, and improved store detail access with a Google Maps link.
Why:
Small details strongly affect confidence, comprehension, and completion in e-commerce flows.
Alternative considered:
Locking the high-fidelity design earlier.
Tradeoff:
More rounds of refinement slow visual finalization, but produce a more believable and useful experience.
5. Use AI-generated imagery selectively to support the tone of the brand
What changed:
I created project imagery in Midjourney to explore an art direction that matched the site’s atmosphere.
Why:
The visual system needed assets that felt intentional and aligned with the crafted, story-led identity.
Alternative considered:
Relying only on generic stock-like placeholder imagery.
Tradeoff:
AI imagery can speed concept development and tone-setting, but still needs careful curation to remain credible and premium.
Key takeaways
The importance of different testing methods: live usability testing, A/B-comparison, in-depth quantitative analysis of features during interviews
Learning from competitive research and the comparison of existing solutions: What are they doing especially well? Which areas need improvement?
Being mindful and aware of the surroundings: often, the answer is directly in front of us
Balancing tradition with modern aesthetics and usability
Understanding the functionality and importance of each different navigation patterns for different users
Enhancing user interaction by product recommendation placement and suggestions
Leveling up my Figma skills
Next steps
Return-flow completion
Store-locator interactions
Validate whether story-led landing content improves product exploration without reducing conversion.
Website analysis based on real world usage (GA4 or similar tools)
Process documentation
Click images to enlarge
Final UI overview
AI genertated images
Research synthesis
Venn diagram
User Persona
Information architecture
User flows
Wireframes
