Mobile first approach

Challenge

Through research, I knew how many users were reaching the website using mobile devices. The challenge was to define the right questions, provide the answers in the least amount of brain effort and friction.

Five taps and no need to scroll was what I provide with this design. This simple and user-centered approach increased dramatically the number of inquiries with validate leads and consequently the companies revenue.

 

Grid System

Designed with the mobile layout first to help separate the essential elements from the secondary ones. Once the mobile design questions are answered, designing for other devices was easier.

Mostly Fluid pattern is a multi-column layout that introduces larger margins on big screens, relies on a fluid grid. It works well on sites with a diverse set of layouts among its many pages like marketing sites, e-commerce sites, news sites — anything with more than one type of content. It did include a powerful mobile-first flexbox grid system to build layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range.

955px
Form & Interaction

Challenge:

As a global company offering over 20 trip destinations and programs,  they needed to get validated leads through making the users fill up a form on the landing and home pages.

Because of many different visas restrictions, we defined the form fields based on what we needed to know from them to be able to classify the quality of the lead.

Micro-Interactions

Micro-interactions are based on human-centered design. Responsive interaction encourages deeper exploration of a web experience by creating timely, logical, and delightful screen reactions to user input. Each interaction is thoughtful, perhaps whimsical, but never distracting. Feedback from the micro-interaction is meant to be intuitive and easy to understand. Users don’t need to think about the feedback because it naturally confirms the interaction has been initiated. That’s an important thing to remember when designing micro-interactions.

Presentation

Sure, just about any design is possible as a website but it doesn’t mean it’s easy to combine user interface methods with a clear flow of information hierarchy. It is all about getting users as familiar with your site in as little time and with as little brain effort as possible. Especially because responsive design is no longer a luxury, but a necessity, designs for the web need to be thought about as fluid canvasses that both look good and react at all different screen sizes.

gwat-brand-redesign-concept-01
Brand Identity & Web Experience

Brand identity, UX & UI design for one of the world’s leading and largest youth travel companies focused on cultural exchange. Headquartered in Australia, and with offices in Canada and the UK, the website showcase over 100 experiences in over 50 countries.

Lead strategic thinking to ensure that simple and intuitive user experiences are designed and adhered to; define standards of usability and accessibility; empowering excellent, high-quality visual designs and front-end development; engage with product managers, design, and development leads to solving user and business goals using the principles of user-centered design.

My job was to lead and go through the whole process of research, in-depth interviews, messaging, and making a new product website.

First, I analysed the process of running the travel agency from the inner company perspective. Then I’ve made in-depth interviews with the CEO & owners. Then I used Value Proposition Canvas, and with members of the team, we identified the core values and pain healers.

Then I’ve made the information architecture, wireframes, and then the prototypes.

Some of the priorities were UX research, in-depth interviews, synthesis of core values, information architecture, messaging, wireframes, and prototypes.

GWAT Co.

Year: 2016
Categories: UI/UX Design, Creative Direction, Branding

UI/UX Design
Creative Direction
Interaction Design

aww1 Featured on Behance

 Featured on Wacom Gallery