Overview
UX/UI website revamp project for the Philippines fashion brand, JOS Mundo, including website audit, UX/UI comp analysis, mockup collage designs and Figma prototypes.
How
Take lead in improving the visual interface, customer journey, and user experience of JOS mundo’s website.
UX/UI
UX/UI
-
Prototype 2.0
- Prototype 1.0
-
Brand Imagery Collages
-
Design System
- Audit Overview Deck
- JOS Mundo Evaluation Map and Notes (Desktop & Mobile)
-
Comparative Analysis Evaluation Map and Notes (Desktop & Mobile) - Tyler McGillivary
Role
UX/UI Intern (Summer 2024)
JOS Mundo Figma MVP
Final UX/UI design pitch for JOS Mundo desktop homepage and ecommerce product page. Please feel free to click through the interactive window below (best viewed in full screen on desktop) or use this
JOS Mundo Figma MVP
First UX/UI design pitch for JOS Mundo desktop homepage and ecommerce product page. Please feel free to click through the interactive web builder below (best viewed in full screen on desktop) or use this
Brand Imagery CollagesExperimentation with JOS Mundo editorial photos for homepage design.
Design SystemPitches for design system elements. JOS Mundo is an ephemeral brand without any set branding assets, therefore their design system color palettes change frequently based on their current clothing collection.
Summer 2024 Pitch
Color Palette
Summer 2024 Pitch
Typography
Color Palette
Summer 2024 Pitch
Typography
JOS Mundo Audit Overview Deck
Audit deck presented after evaluating JOS Mundo’s existing website and researching competitor brands.
JOS Mundo Evaluation
Full evaluation and notes of JOS Mundo’s website.
Desktop Map
Desktop Map
OBSERVATIONS
- Alternating gif backdrop lags on desktop, slows down speed
- “New arrivals” should arrivals be capitalized, since the second letter of other two-worded categories are?
- Free shipping banner disappears after a few seconds
- Email sign-up icon is slightly discreet. Customers might not know to click it if it doesn’t immediately pop-up
EDITS/SUGGESTIONS
- Different typeface than Times New Roman to help match aesthetically (sans serif, clean font)
- New arrivals should be linked directly on homepage OR able to shop on homepage
OBSERVATIONS
- Page title text might be small and blend into background
- Customers have to individually look at each colorway on product page via dropdown menu
EDITS/SUGGESTIONS
- Keep unique wallpaper backdrop
- Transparent photos on product grid pages for clean layout OR photos could all be on solid color backdrop for uniformity (including clothing, footwear, accessories)
- Again, different typeface than Times New Roman to help match aesthetically (sans serif, clean font) especially next to cart icon
- Add icons of colorway options available on product grid page in addition to name and price. Organize product info to be more clean and organized
- Change colorway options on product page to icons of each color OR as text box of each color name. Dropdown is inconvenient.
Mobile Map
OBSERVATIONS
-
Instagram as main social channel, mobile view prioritized
- Multiple links might be confusing. Holiday 2023 collection is most recent however it being 2024 might make the link seem outdated.
- Icon size of logo, cart, and navigation is not uniform across top
- Customers immediately go to collection page instead of homepage
- Navigation menu is straightforward
EDITS/SUGGESTIONS
-
Change Holiday 2023 link to directly a homepage link
- Again, new arrivals should be linked directly on homepage OR able to shop on homepage
- Navigation icon art style is different than the other icons (logo, email sign-up) Change to match for better uniformity
- Make icon sizes of logo, cart, and navigation uniform
- Again, different typeface than Times New Roman to help match aesthetically (sans serif, clean font) especially next to cart icon
- Email sign-up pop up might have more impact if it’s centered instead of pinned at the top once opened
OBSERVATIONS
- Page title text might be small and blend into background
- Customers have to individually look at each colorway on product page via dropdown menu
EDITS/SUGGESTIONS
- Keep unique wallpaper backdrop
- Transparent photos on product grid pages for clean layout OR photos could all be on solid color backdrop for uniformity (including clothing, footwear, accessories)
- Again, different typeface than Times New Roman to help match aesthetically (sans serif, clean font) especially next to cart icon
- Add icons of colorway options available on product grid page in addition to name and price. Organize product info to be more clean and organized
- Change colorway options on product page to icons of each color OR as text box of each color name. Dropdown is inconvenient for customers
Comparative AnalysisEvaluation of Tyler McGillivary website.
Tyler McGillivary
Desktop Map
Tyler McGillivary
Desktop Map
OBSERVATIONS
- Email sign-up pop up immediately
- Homepage photo wallpaper has subject centered to accommodate for mobile view
- Navigation and search bar icon design matches cart icon design
- Free shipping scrolling banner
- New arrivals icon
- Scroll down to new arrivals product grid and click directly on products
- Products are transparent onto backdrop, but can hover for style/campaign photos. Includes sizes
- Scroll down to campaign/style imagery
OBSERVATIONS
- Uses gallery to slide through instead of product grid for photos
- Shows available sizing without having to click
- Shows colorway as image
- Pop-up cart preview from right side
Tyler McGillivary
Mobile Map
Mobile Map
OBSERVATIONS
- Same details as DESKTOP view
- Scroll down to new arrivals product grid and click directly on products
- Scroll down to campaign/style imagery
- Scroll down to best sellers
- Scroll down to category (dresses)
- Scroll down to last ones
- Scroll down to general info links
- Great flow of information, balance of product photos and campaign imagery, consistent design (icon shapes, typeface,
OBSERVATIONS
- Uses gallery to slide through instead of product grid for photos
- Shows available sizing without having to click
-
Shows colorway as image
- Pop-up cart preview from right side