Wireframing

These wireframes provided an early visual that I used to review with the client. From a practical perspective, these wireframes ensure the page content and functionality are positioned correctly based on user and business needs. And as the project moved forward they were used as a good dialogue between members of the project team to agree on the project vision and scope.

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.

microinteration-form_mokup-955x949
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