My role in the project

UX/UI Lead
100%

Key skills, methods and tools
Digital Branding, Card Sorting, Wireframing, Visual Design, Accessibility, Team Leadership, Conflict Resolution, Developer Handover, Sketch, Zeplin, Miro

A bit of background…

For more than 75 years, State Trustees has been helping Victorians with legal wills, estate planning, probate, power of attorney and trustee services. In other words, they deal with a bunch of sensitive subjects that most people like putting off because it doesn't seem important until a significant life event occurs.

 

 

THE BRIEF

The State Trustees website needed a refresh, both in functionality and visually. Making updates to page content was currently a challenge and adding new content blocks was nearly impossible. Their content lacked accessibility and ease of navigation wasn't a consideration in their current site design.

This is how their existing site looked.

Their existing site was in need of a refresh.

They wanted a site that would meet the ongoing need of their customers both now and long into the future. Internal stakeholder requirements were also crucial factors we needed to consider throughout the design process.

 

 

PRIORITIES & GOALS

As has become common practice at GMG, we always establish the priorities and goals on any large client projects. This helps prevent the client from derailing the project by focusing our attention on aspects that aren't important. It also helps us as a design team to focus on the right parts of the project. It's no necessary spending hours on a 'contact us' page if users don't have to be able to make contact with our client.

The short version of the project goals was as follows:

  • Commercial: Generate enquiries and sales of their products.
  • Functional: Educate users on products and services that State Trustees offers and provide a more personalised contact us experience.
  • Emotional: Demonstrate empathy and care towards users and position
 
 
The one page priorities and goals document.

The one page priorities and goals document is the "source of truth" for all parties to refer to throughout the project.

 

 

SORTING OUT THEIR BRANDING

One thing that we uncovered in the early planning stages of the project was that State Trustees didn't have up-to-date brand guidelines. More specifically, they had no website guidelines that we could follow when coming to the UI design phase. Seeing as we were starting with wireframes, there would be some time for us to come up with a solution to their online branding before the UI phase.

I assessed their existing brand guidelines and worked with internal stakeholders at State Trustees to identify areas in the digital guidelines that needed work. After we had agreed on the digital guidelines that needed to be added, we worked on a lean version of the digital branding — specifically to be used for the website redesign. We limited the digital guidelines to the bare basics rather than spend time designing specific elements like cards, navigation and buttons etc. This was a compromise so we (in the design team) could have some solid digital guidelines to refer to and still deliver the website as per the original project timeline.

 
 
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.
The digital brand guidelines for State Trustees.

I led the thinking behind the digital brand guidelines and my team worked on the document layout and design solutions.

 

 

ESTABLISHING THEIR INFORMATION ARCHITECTURE

As per the statement of work, GMG was required to conduct and utilise research that would inform the new IA on the website. Head of Strategy, (Nick) was in charge of the research and analysis and presented State Trustees with a suggested IA.

My recommendation was that GMG runs a card sorting exercise to help validate our suggestions. Nick agreed that it would be a good idea, and the client agreed also. I set up the test using the online testing platform called Usibilitest rather than a physical card sort. I'd used physical card sorts in the past, but I found them to be far more time consuming and less accurate at the reporting stage. Also, with an online tool, it was far easier to conduct the tests because the users didn't need to be physically present. I sent out the test link via email to our internal network and allowed State Trustees internal stakeholders to do the same.

The results of the card sorting exercise shed some light on areas that needed to be adjusted. The client was impressed that we validated our assumptions about the IA and were confident that it was going to serve users adequately as they navigated the new site.

Card sorting exercise

Above is a snapshot of our analysis of the IA post card sorting. You can see the full Miro board with card sorting results here.

 

 

WIREFRAMING TAKE 1: SOME BIG MISTAKES

Being the UX Lead on this project, it was my responsibility to oversee the work by GMG's internal UX Designer (Andy) and provide assistance and guidance as required. I provided a verbal brief to Andy on what was needed, and he started working on the wireframes. Forty hours later, and it was my responsibility to give feedback on those wireframes.

Post my round of design feedback, it needed to go to Head of Strategy (Nick) for final feedback before showing it to the client in a feedback session.

This is where it all fell apart.

Nick was quick to highlight that a lot of the research he had conducted and documented hadn't been considered in the wireframes. At first, I was in shock, then I remembered that in my verbal brief, I'd asked the Andy to go find the research document and refer to it regularly during the design process. My mistake was I never followed him up to ensure that he understood or even read the right research document. It turns out he read the wrong document and subsequently was designing wireframes with the wrong user insights.

Lessons learned:

  • Never assume. As a leader, I need to make sure my team is clear on the task at hand and have regular catchups with them to make sure they're on the right track. If I'd taken the time to do this sooner, it could have potentially saved thirty hours of wasted work.
  • Arrange a formal handover. Considering I had minimal involvement in the research phase of this project, I really needed to arrange a formal handover meeting where we (designers) could ask the strategy team any questions we may have had about the research.
  • Never neglect a large project. I was busy working on other "urgent" tasks, but I shouldn't have neglected such a large project. I should have been more aware of my team's strengths and weaknesses to know that they required more supervision and guidance, considering they hadn't worked on a project of this size before.
 

 

RECTIFYING THE SITUATION

There were several problems I had to handle as the UX Lead:

  • We were potentially going to blow timelines and budget considering a large amount of design work had been wasted.
  • Andy was demoralised and felt like it was his fault for the misunderstanding. He understandably didn't want to be at work.
  • Head of Strategy and agency co-owner (Nick) was understandably concerned that our mistake was going to impact the client/agency relationship.

Here's what I did to try and solve these problems:

  • For us to make up lost time and budget, I had to get back on the tools and establish a super-efficient workflow. I also had to negotiate with the project manager to take some of the allocated development hours and use them for design.
  • I took Andy out for a walk and reassured him that we were going to work together as a team to arrive at a positive outcome. He was visibly disappointed with himself, so I didn't want to beat him up over what had happened. It was a great learning experience for both of us, and we identified weaknesses that we both needed to work on.
  • I reassured Nick that I was going to be checking in with him more regularly to ensure we were staying on track and accurately incorporating his research into the wireframes. I also had to call up one of the key internal stakeholders (Gavin) and explain to him that we would need some extra time before we presented the first iteration of the wireframes. Gavin was very gracious about it and said it was fine to postpone the first design delivery milestone to get the wireframes to where they needed to be.
 

 

WIREFRAMING TAKE 2: THE NEW APPROACH

As the UX Lead, I had to come up with a new approach that had to result in success.

  • I needed to have a deep understanding of the research, so I spent a half-day reading overall material and documenting my comments and questions via Miro.
    I read carefully through the research and made notes of the key points that needed to be incorporated in the wireframes.
    I read carefully through the research and made notes of the key points that needed to be incorporated in the wireframes.

    I read carefully through the research and made notes of the key points that needed to be incorporated in the wireframes.

  • I decided that I would create some low-fi wireframes for Andy to work off as a base. I referred back to the one-page priorities and goals document, along with my understanding of the research and came up with a few mockups.
    I threw together some rapid wireframes using Miro's wireframing tools to give Andy a base to work off.
    I threw together some rapid wireframes using Miro's wireframing tools to give Andy a base to work off.
    I threw together some rapid wireframes using Miro's wireframing tools to give Andy a base to work off.

    I threw together some rapid wireframes using Miro's wireframing tools to give Andy a base to work off.

  • Before getting Andy to flesh out my rough wireframes, I made sure Nick was providing regular feedback and direction. If we started to go off track, he would have the opportunity to get us back in line. The key here is that it was regular — at least once a week. It ensured we wouldn't drift too far and reduced the chances of wasting time and effort.
 

 

BACK OVER TO ANDY

Andy was determined to make amends for his previous oversight. With my direction, he created a Miro board that incorporated the project timeline, information architecture, mood board and research excerpts. This helped him arrive at a deeper understanding of what he was required to do, and I was really impressed with how he handled himself and how quickly he learned from his mistakes.

Once Nick had seen and approved my rough wireframes in Miro, it was up to Andy to take the concepts further in Sketch.

My low-fi wireframes were turned into hi-fi wireframes by Andy.
My low-fi wireframes were turned into hi-fi wireframes by Andy.
My low-fi wireframes were turned into hi-fi wireframes by Andy.

I was creating rough wireframes in Miro (left) and Andy was using this as inspiration for higher fidelity wireframes in Sketch (right). You can see the full Miro board here.

 

 

PRESENTING WIREFRAMES TO THE CLIENT

It was my responsibility as UX Lead to run the wireframes presentation in person with State Trustees. Five State Trustees stakeholders would be present, including the Head of Marketing. Here's how I approached it:

  • I started with providing an update on where the project was at, what we expected State Trustees to do post-presentation and what GMG was going to do post-meeting.
  • Then we would refresh everyone on the one-page priorities and goals document so their expectations would be aligned from the outset. This would also help limit feedback to only be about relevant goals and priorities.
  • When presenting the wireframes, I wanted to ensure all our design decisions were annotated on. I'm a stickler for annotating on every piece of design work because what might be clear to a designer, will rarely be clear to a non-designer. Plus, the client is always going to appreciate and value our design work more if they can see the thought process that has gone into it.
The final low-fi wireframes that we presented to the client.
The final low-fi wireframes that we presented to the client.
The final low-fi wireframes that we presented to the client.

As you can see above, we presented the wireframes with annotated sticky-notes so we could clearly articulate each design decision. You can see the full Miro board here.

The client was impressed with the initial wireframe design concepts. During the meeting, I took detailed notes and grouped action items that were shared internally. 

Following the presentation I combined all feedback and questions into a concise email that grouped each action item/question by each responsible GMG team member.
 

 

UI DESIGN PHASE: ACCESSIBILITY

The State Trustees Marketing team were adamant that website accessibility was an essential requirement that needed to be factored into the design. We informed them that a AAA rating would be challenging to achieve within the project scope. Instead, we suggested they satisfy a AA rating as a minimum, and we would implement some AAA features.

Considering they serviced a large portion of elderly users who may be vision impaired, we decided to implement a text-size adjustment feature that would give the user control to increase or decrease the text size.

We included a text-expansion feature.

We included a text-expansion feature as part of our AAA accessibility rating features.

We also made sure all brand colours passed AA colour contrast ratings — this was identified in the digital branding phase of the project.

ensured all brand colours passed AA colour contrast ratings

We looked at their main brand colour (orange) and modified it slightly so it could meet the minimum AA requirements.

 

 

UI DESIGN PHASE: OVERVIEW

I worked closely with Andy to make sure that the digital branding we had created was represented in the interface designs. I gave Andy the freedom to explore some different approaches in areas that hadn't been defined in the digital brand guidelines.

The final low-fi wireframes that we presented to the client.
The final low-fi wireframes that we presented to the client.
The final low-fi wireframes that we presented to the client.

Andy did a great job applying the UI design to the wireframes. My role was to oversee his work and provide feedback and direction where necessary.

 

 

UI DESIGN PHASE: ICONOGRAPHY

State Trustees didn't have a suite of icons we could use on the new website, so we had to create them. We referred to the approved digital guidelines we had worked on earlier in the project and mapped the iconography to the IA so we could make sure every label had a corresponding icon.

The final low-fi wireframes that we presented to the client.
The final low-fi wireframes that we presented to the client.
The final low-fi wireframes that we presented to the client.

Andy and I worked together to ensure each nav item was represented correctly with each corresponding icon. We also provided some in-situ mockups of the icons on pages.

 

 

HANDOVER TO THE DEV TEAM

As per our usual handover process, we sent all Sketch artboards to Zeplin and conducted a handover to the dev team. Considering we worked very closely with the dev team (they literally sat opposite us), we could easily assist them with any design related questions.

We found it was effective to sit at the developer's desk to nut out some solutions in a collaborative manner. The best outcomes happened when the developers and designers could collaborate harmoneously. We needed them and they needed us.

 

 

THE END RESULT

The project was delivered on time and under budget and was the largest web project the business had undertaken at the time. The client was extremely happy with the outcome and they provided anecdotal feedback that all key performance metrics had improved drastically since the new website was launched.

Screenshots of the live site as at November 2019
Screenshots of the live site as at November 2019
Screenshots of the live site as at November 2019
Screenshots of the live site as at November 2019

Here are some screenshots of the live site as at November 2019. You can visit the live site here.

Key takeaways

  • I was able to navigate and resolve a potentially derailing situation.
  • As a team, we were able to deliver the project on time and under budget by implementing effeciencies.

Site performance

  • They experienced an organic traffic increase of 30%.
  • Their accessibility score went from 50% to 91% (based on a Chrome Accessibility Audit).
  • Average pages per session went from 5 to 3 (meaning people were finding their content quicker).
  • Their bounce rate went from 9% to 4%.