INTRODUCTION
As sole designer, in close collaboration with the creative director and, the sales and marketing lead, I was tasked to revise the JOS Mundo website. Redesigning and improving key user flows, and aligning to design guidelines.TEAM
Creative DirectorSales and Marketing Lead
Developer
WHAT I CONTRIBUTED IN
User ResearchInterviews
Information Architecture
Design System
Developer Handoff
Wireframing and Prototyping
RESULTS
Revamped website design and research documentation
BACKGROUND
JOS Mundo@jos.mundo
“As stakeholders, what do we want from the revamp?”Principally, the aim of this revamp is to enhance the shopper experience flow throughout the website, hand-in-hand with aligning visual direction of the website. With a focus on:
OBJECTIVE #1
📱 An improved mobile experience For seamless transition from the main point of entry which are social media platforms.
OBJECTIVE #2
🎯 Increase in conversion rates.For task completion processes such as product exploration and selection.
FOCUS
Identifying the most immediate issues, we focused our time on redesigning the landing and product pages.PROBLEM BREAKDOWN
“Why can’t I click it?”Though the GIF is a great tool for showcasing collection range, its unclickable nature of limits opportunity for immediate pull into the product pages.PROBLEM BREAKDOWN
Dropdown hassleAs stock is limited, navigating the drop-down may be more frustrating than enjoyable due to its automatically-closing nature. Opportunity to revise selection UI to better suit inventory style.PROBLEM BREAKDOWN
“Can I see the shoe?”The existing product gallery hinders smooth browsing due to its awkward layout limiting users' ability to see product detail. FOCUS
To gather visual preferences such as features and layout, I proposed wireframes of their signature shoe, the Fettuccine Platforms.
INITIAL WIREFRAMES / STAKEHOLDER MEETINGS
A balance with time and fidelityTesting design concepts to identify stylistic direction and designing in desktop view first to manage with scaling later. At this stage, also revising the information architecture of the navigation.SYNTHESIS
Key considerations for the initial set of wireframes
Beginning wireframing in desktop view which helped with efficiency later on when scaling elements in different resolutions.
Problem solving at mid-high fidelity.
Wireframing at mid to high fidelity from the start. Concurrently incorporating high-level UX fixes like stock reflection. This helped when problem-solving with efficiency in mind.
FOCUS
Integrating feedback and refining the design system such as a preference for the serif type and a leaning into the original side navigation bar for desktop.DESIGN SYSTEM
Establishing a design language within the websiteThe redesign theme nods to brand's history. Visual patterns mimic old files with the blocky and rigid organisation. Typewriter-like lettering chosen to align with this visual narrative.
FINAL DESIGNS
How can we optimise the shopping experience while effectively communicating product story?HOW MIGHT WE
Create a home page that encourages product exploration upon landing?SYNTHESIS
Product gallery at landingAn image-forward approach.Using quality images in the repository to craft a cohesive brand and product story like the GIF but with a clickable factor.
One scroll access. Whole product range at landing in a scroll which offers the user several browsing leads for exploration.
HOW MIGHT WE
Create an environment where users are confident in their product selections?SYNTHESIS
Intuitive image carouselClear image markers.
Designing good control when browsing through product detail, in turn helping users get to browse options without unecessary friction.
SYNTHESIS
Transparent specification selectionVisible status.
Displaying available stock immediately eliminates the hassle of re-entering the dropdown to see available options.
Minimal display. Product copy tucked relevant sections to eliminate information overwhelm. In addition, highlighting key points that elevate product story.
HOW MIGHT WE
Ensure a smooth transition between different devices?
SYNTHESIS
Shopper-forward scalingSystems match.
Simple and clean scaling of UI components to ensure a streamlined experience when switching from mobile to desktop.
Side navigation bar.
Integrating the side navigation from the existing site— an element that proved useful in user error recovering during discovery.
REFLECTION
🗯️ Reflection prompts during and between design iterations. Learned the significance of faciliating open-ended questions with co-designers in better understanding the challenge and explore solutions.
REFLECTION
🌐 Refining my eye for detail. Challenged the process in which I compose UI elements to better shape user flows. For example, when designing for intuituive product selection for mobile, experimenting with ways to display an element is clickable and movable.