Warrior Wolf Guide Services Site Redesign

A case study for a responsive website design using strong UI/UX strategy

Summary

Bruce Wilson owns and operates Warrior Wolf that specializes in avalanche training and other programs including sea kayak guide training and wilderness survival training.

Opportunity

Although popular through word of mouth, Bruce is virtually unknown in the outdoor adventure and training market. He came to us looking to help boost his profile and attract new clients, helping him diversify his network while keeping it a manageable amount of work. He is also looking to create focus and clarity on his website; to promote the various programs that he has to offer.

Bruce is different from his competitors as he offers life coaching as well an outdoor training with his philosophical approach to his teachings and outlook on life.

Team

Dexter Yun and Carlos Comparan — UX Design
Ben Frey — UI Design

Task

  • to increase brand clarity and message
  • to differentiate from competitors
  • to increase web traffic and presence

Tools

Thumbnails sketches, affinity diagram, Photoshop, Illustrator, Sketch, InVision, Google Slides


Overview

  1. Brief
  2. Primary Research: Interviews & Surveys
  3. Research Synthesis
  4. Ideation
  5. Visual Identity
  6. Outcome

Brief
Warrior Wolf Guide Services is an outdoor skills training and life coaching service that targets the adventurous type, aged between 25 and 50. Our objective is to create a responsive website redesign that meets the goals that our client has presented to us: to increase sales/sign-ups of courses, increase web presence, and increase the clarity and message of his brand.

Primary Research: Interviews & Surveys
We conducted interviews and online surveys with the potential market (adventurous/outdoorsy type, ages 25–50) and asked a series of questions based on their previous experience in outdoor skills training, life training, spending habits, internet usage among other things. We then created an affinity diagram with the feedback obtained in order to find trends in the potential users’ responses.

Research Synthesis

Wolf Warrior Affinity Diagram results

From what we gathered from our affinity diagram was that our users were adventure seekers that are very active and loved the outdoors and travel. They’re hard working and prefer to fix problems themselves, whether it be something hands-on or something personal. They look for opportunity for self development but don’t want to be forced into it. They’re also very frugal and live a minimalist lifestyle.

When asked what came to mind, visually, when thinking of adventure seeking most users thought of bold colours, greys and blues. They imagined mountain summits, cabins, leaves and tents with a simplistic arrangement. Their responses helped shape the inception of our design ideas and a motive behind the redesigned site: “Skills training with experience and investment in you”.

Ideation
In order to convey a great visual story for the website, we produced two separate moods. In doing so, it gave our client options on how his brand could be conveyed. The two directions that we took were a “Philosophical” and a “Taking Action” theme.

Mood Board: Philosophical theme

The general mood of this direction is a feeling of no ego, honesty, patience. It’s inspired by Bruce’s teaching practices of providing questions rather than solutions; fighting within ourselves to be the best that we can be. Responses from the demographic suggested that they didn’t want to be hit on the head with life coaching, but allowing it to be found by themselves through outdoor lessons and training. This mood captures going down a tough road, being vulnerable and gaining strength from that. The images portray peacefulness and introspection(think solitude in the middle of nature, mentally overcoming life’s greatest struggles).

The colours were adopted from our initial meeting with Bruce. He firmly believed that the colours that best represented his brand were silvers and blues that were bright, yet earthy; positive and driving.

Mood Board: Taking Action theme

The second direction was to approach the mood with keywords such as exciting, empowering, thrilling, and survival. The user demographic is ultimately adventure seekers so we wanted to convey that message across as well. Images of mountain vistas, treks and epic shots being on the water would work well in this context. The colours are bolder; which we gathered from our user interviews. The images illustrate excitement and looking fear straight in the eyes, like being on the edge of a cliff and earth is miles below.

With both moods, we felt that the use of great photographs is essential as well as using minimal design in order to push the imagery.

The next step in our process is to elaborate more on the mood boards and begin playing with icons, typography, the use of buttons and experimenting with how colours work.

Style Tile: Philosophical theme
Style Tile: Taking Action theme

In our further development with the philosophical approach, we chose type that would sit unobtrusively with the imagery. The contrast of the fonts is consistent throughout. We chose photos that fit the colour palette and also conveyed the theme set in the original mood board. The graphic imagery included is to possible samples of texture or illustration. We experimented with iconography that would represent the courses that Bruce offers.

The Taking Action approach displays more bold colours and textures. The typography is changed to be stronger, and it could possibly work better in context with photography. We chose the central photograph as an example of a profile photo of you that we could use (although the vibe that this fellow is giving off isn’t what we’re going for!). This design direction is intended to be exciting and strong, yet minimal and organized.

The client was more taken by the Taking Action theme as it conveyed a message that said “don’t wait, now is the time to act, right in this moment because all we have is this moment”. Bruce did however like the colour palette of the Philosophical theme and wondered if there was a way to find a font that took action but remained grounded, solid and substantial.

Style Tile: Combination of themes

From Bruce’s feedback, we combined the elements of the art directions that he preferred and created a new theme that best represented his brand.

Visual Identity
As a means of making the client’s website more clear, I decided to create a unique set of icons for each of the programs that he had to offer. It simplified the information that was presented to the user.

Icon Sketches

Because the programs were quite different in it’s setting or season, we needed to create a style that tied each program together. What we gravitated towards, style-wise, were two sets of line-weights. One weight was the thick, outer line of the image and a thinner line for the detailed bits within. We also used rounded edges for corners.

Warrior Wolf Iconography

The UI team arrived at a style that conveyed “taking action” and “skills training and investment in you”.

Outcome

Warrior Wolf: Desktop high fidelity prototype. Note: Parallax is not Bruce Wilson and just a placeholder for the time being.
Tablet high fidelity prototype
Mobile high fidelity prototype

Our final composition of the Warrior Wolf interface integrates a surface impression that integrates action and a self awareness that is connected to nature.

The UI design benefits the user experience of navigating seamlessly through the app by the use of bold and rounded iconography, strong yet grounded fonts, and the prominence of striking mountain and oceanic photography.

Conclusion

The redesigned website successfully brings clarity and focus to the site’s intention; to increase more signups for courses and to grow the Warrior Wolf brand. The brand is also Bruce Wilson and we were able to communicate this throughout the entire platform. The programs are easily detectable with the use of smart and dynamic iconography and in turn let’s the user discover the individual opportunities. The overall design was based on our user research by applying boldness but keeping the overall design minimal, much like our demographic’s lifestyle.

The prototype is in the middle of being developed through RED Academy’s Web Dev program, and the UX/UI team is excited to see what they produce. Bruce will be providing us with new portrait photos that we can swap out in order to really sell him as the brand.

Link to Invision Prototype