Team
Karen Bolilia, Creative DirectorSabine Monfort, Sales and Marketing Lead
What I contributed in
Site Audit and Competitor AnalysisStakeholder Interviews
Information Architecture
Design System
Wireframing and Prototyping
Results
MVP PrototypeInsights and documentation for future referencing and designs
Background
Jos Mundo is a Filipino fashion brand that honours the rich cultural heritage of the Philippines. Drawing inspiration from the archipelago's diverse traditions and craftsmanship. 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:Summary
1. Discovery
Conducted a site audit and competetive analysis.Interviewed the creative and marketing team to scope existing analytics and product target.
2. Understanding
Analysed user flows and synthesised into key problems to set basis of timeline.3. Prototyping
Gathered visual preferences and set up a design system.Collaborated and iterated towards an MVP.
4. Final Designs
Created pixel-perfect wireframes in different resolutions for key user flows.Discovery
What are the key existing problems on site?Through analytics, white paper research and site audit reviews, we identified two primary issues we want to address:Lack of exploration leads upon entering the website.
Users are not going through key user flows for their tasks, some even exiting before exploring product range. Opportunity to showcase product range upon landing.
A drop of conversion rates during product selection.
Unnecessary friction in specification selection. Opportunity to revise selection UI to better suit inventory style.
Understanding
Where exactly is the friction being met?Identifying the most immediate issues, we focused our time on redesigning the landing and product pages.
Home Page
“Why can’t I click it?”Though the GIF is a great tool for showcasing collection range, its unclickable nature of the limits opportunity for immediate pull into the product pages.
Product Page
The dropdown hassle.As stock is often limited, navigating the automatically closing drop-down may be more frustrating than enjoyable.
Product Page
“Can I see the shoe?”The existing product gallery hinders smooth browsing due to its awkward layout, especially on mobile, possibly limiting users' ability to explore easily.
Design System
The archival look.The 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.
Remove
Prototyping
A balance with time and fidelity.Testing design concepts to identify design direction. At this stage, also revising the information architecture of the navigation. Designing in desktop view first to manage with scaling later on.
1. Problem solving
Wireframing at mid to high fidelity from the get-go whilst incorporating high-level UX fixes, which saved more time for UI detailing in the timeline.2. Desktop to mobile approach
Beginning wireframing in desktop view which helped with efficiency later on when scaling elements in different resolutions.Mantaining consistency while designing in parallel of mobile and desktop view.
To ensure an experience that can rely on its intuitive design for all resolutions.
Integrating feedback and refining the design system.
Implementing feedback into the following designs such as a preference for the serif type for body text and a leaning into the original side navigation bar.
final
How might we
Design an home page that encourages product exploration upon landing?Synthesis
Product gallery feature at landing1. Image-forward approach
Utilises quality images in the repository to craft a cohesive brand and product story like the GIF but with a clickable factor.2. Product range showcase
A sneak peek into the whole product range at landing to access in one scroll which offers the user several browsing leads for exploration.How might we
Optimise the process to ensure confident product selection for users?Intuitive image carousel
Transparent selection
1. Intuitive user control
Intuitive design with clear state markers give users good control when selecting options and help them recover from mistakes.2. Visible status
Displaying available stock immediately eliminates the hassle of re-entering the dropdown to see options.3. Information sorting
Product copy into relevant sections to eliminate information overwhelm. In addition, highlighting key points that elevate product story.Synthesis #3
Shopper-forward decision-making when scaling in different resolutions.1. Side navigation bar
Integrating the side navigation from the existing site. An element that proved useful in user error recovering during discovery.2. Systems match
Simple and clean scaling of UI componenets to ensure a streamlined experience when switching from mobile to desktop.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.
Refining the 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.