UX & UI

Design Projects

E-mail UX design.

Target used: Latin American homeowners.

Sector: Construction and home improvement.

My Role: Data analysis, UX strategy, UI style, prototyping and layout.

Tools: Adobe XD and Adobe Creative Suite.

Location: Central America.

Language: Spanish

Design problem: How to turn best printed performing ads into emails.

Research & UX Strategy

Comex paints is a brand of architectural paint locally managed in El Salvador by Riot\TBWA where I used to work.

My responsibility during that time was to design newspaper ads, take the best-performing ones and turn them into newsletters emails for Comex subscribers.

To do that, I had to acquire data and feedback from the marketing team and then study each ad, subtract the best graphic elements and assemble a brand new design specifically designed for mobile users.

Every design decision was based on marketing data, UX research and A\B testing.

Typography

Comex paint has created its own family font. However, I picked only a few styles due to their readability and accessibility, which help the hierarchy of elements in the email template layout.

Furthermore, I tested and studied the best weights and sizes for the suitable navigation of the email template.

Colorgraphy

Comex Paints like any other brand has a corporate colour palette and a second one used for advertising. For the design of the newsletters, I slightly modified the codes so they are ADA-proved without losing the branded colour tones from the very strict brand guidelines.

Spacing and CTA

The horizontal layout is specially designed to improve legibility. It ensures a flexible layout design. Additionally, I have defined a set of different distances that will be used consistently depending on content and design requirements.

The CTA is designed to be short with 2 to 3 words. The height of the buttons is 46px, which is slightly higher than the minimum recommended. It also follows the brand style, and its roundness is more prone to being seen as a pleasant shape feature than sharpness, hence providing a friendly and inviting visual appeal.

Iconography

A special grid has been carefully designed to contain and align all icons needed for the newsletter template. The icons are simple and easy to recognize, they can be used as an outline or as a solid shape; hence they can be used in different ways. The style does not compromise legibility.

Each icon is worth 1,000 words.

Components

The template has two different modules or components that will not structurally change regardless of the offer or content. They are designed to keep consistency, enhance hierarchy, readability, and maintain brand awareness through user experience. Each component is responsive and editable depending on the marketing requirements.

Template structure

After analyzing, prototyping, testing and most importantly consulting developers and marketing specialists, I built a functional design template that was used for years.

Header section:

• 1 second to capture the user’s attention.

• Bold and colourful.

• A\B tested.

• Curved elements break the frame and show better results.

• Design elements are directly taken from press advertising.

• Compact menu for fast accessibility.

• Very flexible design.

Featured product component:

• Reserved for best-selling products.

• The back circle serves as a spotlight element.

• CTA aligned with the overall design.

• On brand and familiar to the user.

Seasonal component:

• Reserved for one-time year products.

• Designed to feature both spaces and products.

• Copies can be larger and more detailed.

• Created to break the colour template.

• It increased conversion rates on seasonal products by 16% on online platforms.

Club membership call-out:

• Most successful component. It increased the volume of new members by 23%

• It was A\B Tested.

• Icons are self-explanatory.

• Visually appealing and on-brand.

Adobe XD final designs

I have picked the best-performing newsletters for you to visualize, each one is showing different offers, content, and colours:

Click here to view

Pandemic Support App

Target used: Local and international visitors.

Sector: Travel, Entertainment, and Social.

My Role: Research, entire product design, UI Style, and prototyping.

Tools: Figma, Adobe Creative Suite and Adobe XD.

Location: Vancouver, Canada.

Problem:

Since the COVID-19 pandemic started, the situation has become unpredictable with lockdowns, restrictions, capacity limitations, closures and the opening of new businesses every now and then. In most of the cases this data is hard to verify online because some platforms such as Google map cannot keep up with the rapid changes. Hence, tourists who are not familiar with the city are misled by online platforms making their experience unpleasant.

Solution:

VanOpen is a concept app developed by myself during my online training at The California Institute of Arts. This app is specifically designed to support Vancouver’s tourism industry during and after the COVID-19 pandemic. The application will guide and assist tourists during their visit in Vancouver by providing them with up to date information which is going to be aligned with local recommendations and restrictions.

Goals:

Help the City of Vancouver to recover from the COVID-19 pandemic
Guide tourists based on Provincial and Federal restrictions
Increase traffic to local or small businesses.

Research:

Since Canada started major lockdowns, I realized how frustrating it is to find updated information about local businesses, public parks, and local health mandates. Specifically, hours of operation, business capacity, infrastructure modifications, closure of facilities, etc.

Therefore, I have conducted exhaustive online reach and interviewed a few neighbours, and visitors who live and stay in Vancouver and I found out everyone’s experience is very similar, we all have the same question:

“ What is open? ”

Tourists want to enjoy their time while in the city but the data in Google maps or Apple Maps is inaccurate or slowly updated. Google search engine is also a compilation of both updated and outdated information, so looking for something simple as mask requirements can be tricky.

Key insights from the research:

INSIGHT No. 1

Visitors can’t find accurate information they need to go to outdoor or indoor places.

Local or International tourists face difficulty finding information about places they want to visit because that data is unavailable or inaccurate due to the unpredictability of the pandemic.

INSIGHT No. 2

Visitors don’t have the time to do the research.

Most visitors have limited time and are also usually exhausted from travelling and going through the covid-19 protocols. The best way to find up-to-date information is to research on the official provincial website, but it is time-consuming, and the language of those sites is very technical.

INSIGHT No. 3

Locals are also confused.

The provisional government acts fast whenever there is an outbreak or rise in covid-19 cases. Restrictions can be in place from one week to another. Making it even hard for some locals to actually give advice to any visitor.

INSIGHT No. 4

No ultimate platform to check out information.

Almost everyone I interviewed said the best way to obtain official information was from Google search engine and Google maps; however, everyone agreed that the data is not regularly updated by both google and local businesses.

Criteria filter:

Target audience:

Local tourists: Canadians or permanent residents from other provinces who are still uncomfortable about travelling abroad. They might have visited Vancouver before, but they want to experience new adventures and enjoy the natural wonders of British Columbia.

Foreign tourists: People from a variety of countries. They usually speak other languages, and English might not be their first language. Most of them come for less than two weeks. However, they are not too concerned about COVID-19 but want to follow the protocols.

PERSONA No 1

Foreign tourist:

Maria Hernandez is visiting Vancouver from Costa Rica, her mother language is Spanish but she is able to speak basic English. She is 30 years old and is visiting with her boyfriend for one week.

Objectives:

Visit the most popular landmarks in vancouver.
Go to a museum and learn about Canadian folklore and culture.
Visit scenic places.

Frustrations:

Language is a barrier and it is taking a lot of time to research and make reservations.
She is not aware of all health mandates in indoor places.
She realizes that business hours in Google maps are not updated and capacity is limited in some national parks.

PERSONA No 2

Domestic tourist

Thomas Langlois is a domestic tourist who is visiting from Montreal, he decided to travel inside of Canada to avoid travel difficulties. He is 25 years old and English is his second language.

Objectives:

Go for outdoor adventures and get the most of his vacation.
Quickly have a taste of the local cuisine and culture.

Frustrations:

Some outdoor activities have capacity limitations due to covid-19 restrictions.
He doesn't know if he needs a provincial vaccine card to visit restaurants
He doesn't know if certain events have been cancelled.

Current user Journey:

Taking the personas as reference, I analyzed how they think and behave when planning for a visit to Vancouver. Below is a user journey focused on domestic visitors.

User flow:

Inspired by the two personas, I learned how they behave and react whenever they are looking for a location to visit.

In the following chart, I focused on the process of travellers who are looking for the most popular places in Vancouver.

Wireframes:

For visualization the wireframes are separated in three segments. Firstly, we have the splash screen which introduces the user to the app. Then, in order to save preferences an account will be needed. It can be done by using Google, Apple or Facebook otherwise the data can be manually added. After that it is essential to obtain basic information regarding the user's vulnerability. (A consent form might also be needed). Which will be done by asking a few key questions. For the suggestion algorithm, we will be also asking the users about their interests.

Secondly, the app will let the user know about the current COVID-19 restrictions, then guide them, and recommend places to visit depending on their intentions, they can do that by tapping on the icons. With all this information the user is going to make a decision and commit to visit a place. Once the place is reached, a notification will pop up and notify the user that they have earned credits just by having reached this location.

And finally, the user can go and check coupons available, these coupons will be shown as cards that keep being swiped so the user can visualize them one by one and redeem them if they wish to. This is an incentive that has been integrated in the app in a fun manner with the purpose of boosting local businesses.

Figma Wireframes

Ui style guide

Design concepts built to create an engaging and unique user experience through the application.

Colour palette:

A well-thought-out colour palette that creates analogous harmony and keeps into consideration the ADA compliance tones for color blind people and keeps great contrast for readibility through every component of the app.

PRIMARY COLOURS

SECONDARY COLOURS

HIGHLIGHTS

Font style:

Proxima Nova family font has been selected for the project due to its readability, legibility, and accesibility. The app is meant for visitors whose priority is get information as fast as possible. This family font makes it easier to for the user to navigate the app with the right hierarchy.

Iconography:

The icons are designed to be easily recognizable and aesthetically appealing. They are structurally designed in the same grid with the same stroke line and proportions in order to keep consistency across the app The main function of having icons in the VanOpen app is to make the navigation faster and aid users in obtaining the correct information in a single tap

Spacing:

White space has been taken in consideration horizontally and vertically between components and the overall layout. All spaces are set to increment by 8 across the app so visual unity is kept. The spacing is also flexible and responsive due to not all components work in the same way.

Buttons and UI components:

Branded colours have been used for the design of the buttons, so consistency can be kept across the app. Additionally, each component is respecting spacing and basic structure layout which have been analyzed and tested for functionality and future modifications of the system.

Key features
After having defined Ui guidelines you can now find below the key features of VanOpen and the final figma prototype.

Smart COVID-19 screen

The most important data needed to filter information for users is how vulnerable they are to COVID-19. This is defined by age range, size of the group, and any medical condition that can put the life of one member in risk. This criteria was defined by using facts form the reseach made by the Goverment of the UK, see information here

The smart filter is intuitive and the user is able to swipe to the right in order to see more options. It's a very quick process that retrieves key information in a interactive and fun manner.

Intuitive questionary

Another critical value for the app's proper function is the user's interests or intentions. This information will suggest where to go depending on the restrictions and the health vulnerability of the user and whoever is travelling with them.

Smart recommendations

After users add their preferences and COVID-19 vulnerability data, the app will suggest and provide helpful information, such as operation time, capacity and whether or not masks are required. With this, the user can make a better decision without wasting time.

Rewards & businesses boost

What makes VanOpen different from Google maps is its reward program. The goal is to generate traffic to participant businesses and specific neighbourhoods.

The program is simple; users can collect credits by visiting places and exchange those credits for discounts, coupons or more. These incentives are meant to boost Vancouver's economy, which has been hit by the COVID-19 and every time, there is a new variant.

GPS points collection

Users can collect credits by visiting places such as parks, landmarks, etc. This is going to be possible with GPS. However, there are concerns about people cheating the system and faking locations. This is not a problem because the purpose is to increase traffic regardless of how discounts are obtained. This feature is going to make the experience of visiting the city more rewarding and certainly more fun.

Figma Mock-up
I have created a prototype so you can visualize and have the final feel of the overall experience I am proposing. This project has entirely built by myself.