Nathan Streater | UX & UI Designer
8.png

Phuel

 
 

Phuel

Phuel works with leading organisations and individuals to help activate the human factor aiming to increase individual and team performance. They offer tailored, passionate and motivated facilitation and training workshops to empower those they work with.

Photo credit to Tran Mau Tri Tam on unsplash.com

Photo credit to Tran Mau Tri Tam on unsplash.com

The problem statement

During my tenor at Alpha Salmon Designworks were updating Phuel’s brand identity, we partnered with them to help design and build a responsive website with a CMS with a mobile first approach. Phuel’s new brand was focusing on being purposeful, impactful & playful conveying this through post-it note colours, typography, vox pops and illustrations by Gapingvoid artwork.

My role

Was to led the UX & Design and was responsible for applying the new brand identity to the responsive website. It was important that we had an open and collaborative environment to ensure the success of the project. This was possible as I engaged constantly with our project managers, the design team at Designworks and key stakeholders from Phuel.

My key responsibilities were to perform a content audit, create information architecture and wireframes, perform guerrilla usability testing with internal staff and key stakeholders, followed by UI concepts and final UI designs. 

The process

Discovery

To ensure we built the right product it was important to speak to those who were responsible for the website, managing the website and considered the feedback they received from those who used their website. We started by

  • Interviewing internal staff, the team at Designworks and stakeholders from Phuel
  • Interviewing those responsible for managing the content via the old CMS
  • Performed a content audit of the old static website to understand what we had to work with, what we could re-use, alter and re-think
Photo credit to Tim Gouw on unsplash.com

Photo credit to Tim Gouw on unsplash.com

Define

After we gather all the feedback we synthesised them by cluttering the feedback into themes and finally into insights. This helped us define the content strategy, user experience and features for the CMS. Following this we defined the information architecture and a rough wire-flow highlighting possible templates and which pages would house different types of content.

Design

Once the information architecture and rough wire-flow was defined we next took them further by creating clickable prototypes with Axure. We iterated a number of times before finding the right solution that validated with guerilla testing and usability testing with the stakeholders at Phuel.

Working with Designworks we took the work they had done for the new visual identity and applied it to the final UI design. The colour palette was representative of Phuels number 1 item in their tool kit, Post-It Notes. The typography was bold and round similar to a Sharpie, add that with hand drawn elements, black and white natural photography and illustration from the GappingVoid this helped us design the responsive website.

Validation

We used guerilla methods to test the usability of the website - both desktop and mobile, we performed this on the floor and with key stakeholders from Phuel. After a few iterations of testing and tweaking we felt we had minimised the risk and identified majority of the gaps. This gave us confidence to build and deliver the solution.

Outcomes

We successfully launched the Phuel website alongside their new brand identity in December 2014. We saw a increase of mobile traffic and longer dwell times. As individuals and companies looking for facilitation and training could immerse themselves in content and videos. This showcased their proprietary simulations which focus on themes like; management, team building, KPI measurement and leadership skills.