Olympia Trust Website UX and Design

Design, User Experience, Web Design

One of our UX hungry clients while working with Post+Beam was Olympia Trust, a financial company based out of Calgary. They had an interesting problem of the different lines of business being operated very separate, to the point where marketing and creative had also diverged so much between them that they truly look like separate companies. What we wanted to help their team on the Trust side do was really bring the Olympia visual identity back and hope the other lines of business would eventually want to do the same.

Some of the specific client requests we were fuelled by were:

  • Using a certain mountain image in the designs without obscuring it too much
  • Making sure the back-end of the site was easily used by the company’s own team
  • Making the site mobile friendly
  • Making the payment and support areas more user friendly
  • Getting back to Olympia’s visual identity and helping define styles for the web moving forward

Research and Analysis

One of the first steps for any UX exercise is research and analyzing your findings. While I can’t share everything we found with you, I can give you a bit of a rundown of the process and some snapshots. The slides below represent a small cross-section of some of the findings through:

  • Heuristic analysis
  • Stakeholder interviews
  • Competitor reviews
  • Available analytics and data
  • One of our employee’s experience in the financial world

It helps having a Subject Matter Expert on hand, and having someone on our team who was well-versed in many aspects of the financial industry helped a lot.

ux-slidemosaic

0720_olympiaapproach_sg_v02_page_04

0720_olympiaapproach_sg_v02_page_05

0720_olympiaapproach_sg_v02_page_06

Pretty normal asks, and no huge surprises, right? So, our main issue would end up being rounding out some of Olympia’s online styles and helping them present themselves better, as well as making sure the payment and support sections made more sense.

IA, Wire-framing & Prototyping

Just a quick snapshot so you can see how things evolved, with some additional requests coming in along the way.

0812_olympiawireframes_sg_v03_page_19 0812_olympiawireframes_sg_v03_page_07 0812_olympiawireframes_sg_v03_page_06 0812_olympiawireframes_sg_v03_page_08olympia-prototype-giphy-v04-reduced

It’s normally difficult to understand a wireframe without it being explained to you or being embedded in the project. However, in this case, we found that higher fidelity wireframes were more easily consumed by the Olympia team, and also allowed us to start refining styles as we went. This effectively allowed us to work iteratively in design, working up wireframes from a rudimentary stage of showcasing functionality and usability and building them right into prototypes and working out the visual style.

New scope was introduced part-way through the project, but having already been working in such an agile and iterative fashion we were able to continue with ease.

After only a few feedback sessions with the client, research, analysis, information architecture, and wireframes were all approved by the stakeholders and visual design continued to be refined.

Visual Design

homepage1support1 contact1siteflats-mobile-mockup