Viajero Market Launch

At Mischief Media, this was our first ever non-english speaking audience for a company based in Colombia! We created branding from the ground up including logo, brand guidelines etc, and designed & built their e-commerce website.

Problem

Viajero Market is one of the only Samsonite providers for Colombia. They have a large assortment of inventory for travel related products but no easy way to reach their audience. They lack an online presence and consistent branding to appeal to their target market.

Opportunity

By creating an online e-commerce experience and strong visual brand, we will increase sales and engagement with Viajero Market.

Project Overview

Because Viajero Market was very bare bones, we had a blank canvas to create their branding from the ground up before designing the user experience of their website, and creating marketing materials.

Visual Branding Development

  • Logo
  • Color palette
  • Style Guide

E-commerce experience design

  • Information Architecture
  • Wireframes
  • High Fidelity Mock-ups
  • Implementation/ Development

Marketing materials

  • Social media templates
  • Business cards
  • Letterheads

My Role

I own Mischief Media, and was responsible for acquisition of the client, SOW, scoping the project, timeline, deliverables list, and client communications.

For the design phases I oversaw the UI/UX Designer who primarily worked on the logo and branding materials. I was responsible for designing the e-commerce experience, creating the style guide, social media templates, and developing the final website and transactional emails.

Visual Branding Development

It is really exciting to totally re-vamp a brand. The client was really open to trying new things and experimenting with fun and vibrant colors! Get ready for a lot of scrolling…

Discovery

We wanted to understand what current materials they had, and what they would like to re-use, if anything. They basically gave us a blank slate to do whatever we wanted, but said they really wanted something modern with bright colors to appeal to their target audience.

Original Logo & Color Scheme

Their original logo was hard to distinguish at different sizes. There was also inconsistent usage of their visual brand across different channels. (No color scheme, no branding guidelines)

Viajero original branding
Viajero Market Mood board

Mood Board

Expanding beyond their original color palette, we looked for inspiration with bright colors and clean graphics.

Target Audience
Viajero Market targets millennial travelers in Colombia. Vibrant colors are part of the culture and a major consideration when appealing to their target audience.

Establishing a color Palette

After creating a vibrant color palette to appeal to their millennial Colombian target audience, we wanted to establish rules on how the colors should be used. Using these colors were a key part in tying in the imagery to make it feel cohesive.

We wanted to understand what current materials they had, and what they would like to re-use, if anything. They basically gave us a blank slate to do whatever we wanted, but said they really wanted something modern with bright colors to appeal to their target audience.

Color Palette

I worked through a very vibrant color palette.

Yellow: Primary brand color. Used as backgrounds, accents in imagery, calls to action.

Purple: Primary brand color. Used as backgrounds, accents in imagery, selected states, illustrations, icons.

Orange: Secondary color. Used mainly in imagery.

Red: Secondary color. Reserved for promotions/deals

image guidelines

Imagery Guidelines & Color Usage

One challenge that Viajero Market previously faced was inconsistent use of imagery and brand colors. We created guidelines to create consistency throughout their imagery. These guidelines would later be added to the full style guide that includes colors, fonts, UI elements, color usage guidelines, imagery guidelines, logos, etc.

Logo Design

Viajero market translates to “travel market”, the majority of products that they sell are related to luggage. We wanted to create a modern logo that tied back to the idea of travel.

Initial Logo concept

Our original concept was to make a V out of a luggage tag. It ended up not translating very well, and not feeling as modern as we were intending.

Round 1 of logo design for viajero market

Refining the logo

We went back to sketches to explore some more modernized concepts for the logo. 

Initial attempt at color

We had a couple different logo concepts and started iterating through applying the color palette.

Viajero Logo with color round 1

Adding secondary brand colors

After many iterations, we brought the secondary brand colors into the logo to tie in with the color palette add visual interest.

Finished Logo

We created 3 logo variations for different placements including:

  • Full logo
  • V logo (for profile pictures)
  • XS logo (for favicon)
Viajero Final Logo

E-commerce experience design

Viajero Market’s core objective was to be able to sell their products online. When designing this experience, design feasibility was an extremely important consideration as I would be the one coding it.

Discovery

Typically after understanding basic needs of the business/ feature definition, we would then do a competitive analysis before wireframing. Viajero Market required a basic e-commerce website and a quick turnaround so I used my knowledge from my day job (designing e-commerce experiences) to kick start us. While I was waiting for inventory count and categories, I started ideating on potential IA and navigation concepts.

Information Architecture

I had 2 original concepts for organizing the content.

1. Product category (Luggage, Accessories, etc)

2. “Ways to shop” (Shop by brand, shop by occasion, etc)

The client was responsible for inventory count to help inform how we should approach the IA. Ultimately the client had minimal inventory for launch so we went with the simplified product category approach. We also designed an “explore” section that would be more educational/guide based that we decided to pair back for MVP launch.

Navigation Sketches

Exploring the Navigation

Before the client had given us their inventory numbers, I was very interested in exploring visual navigation to increase scan-ability of sub-categories (similar to what you see under the “accessories” in the sketch). After realizing the smaller scale they were looking to launch with, I paired it back and simplified the navigation.

Low-Fi Wireframes

Typically after understanding basic needs of the business/ feature definition, we would then do a competitive analysis before wireframing. Viajero Market required a basic e-commerce website and a quick turnaround so I used my knowledge from my day job (designing e-commerce experiences) to kick start us. While I was waiting for inventory count and categories, I started ideating on potential IA and navigation concepts.

Home Page & CLP Wires

The Category Landing Page strategy involved heavily around bringing in imagery and education for the category.

Landing Pages Sketch
PDP Sketch

Product Detail Page Wires

For launch the content is pretty basic: photos, title, description, price, reviews & crosslinks to related products. For post MVP we are hoping to be able to blow out detail sections for material types, tips for travel, and brand information.

Corporate Gifts & Guide Pages

Corporate gifts were critical for launch. We did not have scope to blow out an e-commerce experience for corporate gifting and instead launched with an informational page with a contact form to connect the owner with potential clients.

Guide pages were descoped for post launch, but the overall strategy is to engage customers who might not know what they need through engaging story telling, tips, and curated products.

Guide Page Sketch

Visual Design

Expanding on the color palette, logo and imagery guidelines, we moved into illustration exploration, fonts, and establishing a design system.

Illustration Style

We needed categories for the corporate gifting page. Instead of using imagery with specific products we wanted to something illustrative and high level for each category. For the illustration style I went with something really fun and different. In full transparency I illustrated these while watching Tiger King and didn’t fully document my process- but the basic system I created uses a purple brand color stroke with touches of diagonal line filled shapes.

Viajero market icons
Viajero color usage

Style guide & usage guidelines

After exploring applying the brand colors to different UI elements, I created a style guide including colors, fonts, imagery guidelines, color usage guidelines and more.

Mockups

Typically I would do high fidelity wires, prototypes & testing before going into mockups. Due to timeline and client budget, we were unable to user testing on wireframes, and I worked off of the low fidelity wires to create the mocks.

Initial visual design exploration

This is the first round of applying the brand colors to the wires! Color usage was working well in the hero images- but I ended up iterating by adding cards in the heroes to insure accessibility, and to create consistency across the different categories.

Refining the designs

Mockups for all of the category landing pages, home page, PDP, corporate gifts and cart. Originally I designed in english, and we converted to Spanish during the build.

Home Page

Easy way to quickly browse categories. Below the fold: featured products, corporate gift call out, and newsletter sign up!

Category Landing Pages

Each category landing page is grounded with a different themed hero image, with an intro to the category. Products can be purchased with easy add to cart, and filter options.

Product Details Page

PDP includes multiple images of the products, title, price, brand & description. Below the fold: related products.

Cart

The cart includes basic functionality including cart totals, ability to change quantity/ remove a product, and add a promo code.

Corporate Gifting

The goal of the corporate gifting page was to inform potential customers of the offerings from Viajero Market, and to provide an easy way for potential customers to contact the sales rep. Top of the page has an anchor link to the contact form. Each category has supporting illustrations and information about the offerings.

404

Threw this in for fun. I can’t resist some surprise & delight. What’s a site launch without a fun 404 page?!

Marketing Material

Viajero Market’s core objective was to be able to sell their products online. When designing this experience, design feasibility was an extremely important consideration as I would be the one coding it.

Social Media Templates

Viajero Market had a lot of previous inconsistency with their social media platforms. They lacked consistency in imagery and color usage. The goal of creating templates for them was to empower them to branded consistent content on their own.

Social Media Templates

Considering the different kind of content types that Viajero Market wanted to highlight on social media, I created easy to use templates for them to create their own branded content. Here are a couple highlights from the templates we created for them.

Print Materials

Viajero Market needed business cards and letterheads that reflected the new branding! We worked on templates for them to use to scale up as their team grows.

Business Cards: Round 1

These were the first iterations were ideated on while we were still finalizing the logo. The angles were a lot sharper than the finalized materials, playing off of the older logo.

Viajero market business cards

Final Business Cards

Front & back of the business cards showcasing the new branding. With the rounder corners in the final logo, we still played off the angle of the “V” but softened the corners a bit to tone down the sharpness.

Letterheads

We created 3 different treatments for Viajero Market to use on various documents.

Viajero market Letterheads

Next Steps

Launch, Learn, Iterate! We will be tracking sales metrics and listening to customers to see what optimizations we can make on the website. We also have plans to add an “explore” section to focus more on tips and trip mission, tying in education with products. Lastly, we may explore alternate ways of organizing the navigation once our inventory outgrows our current structure.

Keep exploring…

Respa yoga screen

Respa Better Yoga

Total Wine & More