Stanley St - Website

Company: Stanley St | Platform: Web | Role: Experience Design Lead (UI/UX) | Year: 2019


About

 

Stanley St is the largest full service agency in New Zealand.

The website is used to showcase work, careers, press as well as tell the story of Stanley St and the people that make it work.


The project

 

In March our Managing director came to the digital team with highly secretive project at the time of creating a brand new agency website as we were undergoing a massive rebrand.

This site had to show off the agency work in the best way possible, it had to tell our story and it most importantly it had to stand out from the rest of the local agency websites in order to create a high level of conversation about what this new brand was doing.

Demonstrating the navigation behavior on the live Stanley St site.


Who we designed for

 

When designing the Stanley St website we had a set of 6 personas in mind;

Internal team member
Someone that currently works at the agency, who wants to view the work that the business has created or further understand the businesses mission.

Prospective Client
Looking for a new agency to work alongside. They need to be motivated by the work and how it’s displayed & sold into working with the agency through the information presented.

Examples of the persona’s that we’re created at the beginning of the project, these were used as key reference points as we went through the design process.

The corresponding user journeys for how what we thought would drive & motivate that person to come to and use the site.

 

Existing client
They currently work with the agency and would use the site to help further validate a future project with them. Also they use it as a place to showcase previous projects with the agency.

Job Seeker
I want to work here, they care about the work that the agency makes and want to be able to imagine themselves working there. Team culture is also of high importance to them.
External media

Invested browser
Someone who currently works in the same industry, they want to view the work that the agency has created. They may use this for influence or to help understand the agency and its offering better.

External media
Members of the press who would use the site as a place to learn more about the agency or to see what work that we have created as part of a story.



Design process

 

Once we were briefed on the project, business goals, the brand. We went about creating the key personas of who the site is designed for along with mapping out the initial IA of the website.

After this we then went off to an extensive competitive analysis phase focusing on finding influences that matched up with our persona’s wants and needs. This process was invaluable in giving us influences of purpose as opposed to creating a library of nice looking visuals.

We then moved on creating a set of early wireframes outlining the key sections of the site and highlighting how they matched up to each unique persona group. This was then turned into a interactive prototype and presented to the wider team for a demo in which like all internal project created a lot of conversation around the direction it was taking, which lead to my junior and I having to create several iterations of the site until we found a happy median between the key stakeholders wants and needs.

Following the wire-framing phase we then set about refining this further to a design level that was more representative of the final site, this particular phase was the most challenging for us as throughout the whole project the brand was very much still being created and defined which lead the to the site design being very much in flux. Also there was no final content created at the point we creating the site so we had to design a site that had a high level of flexibility around the types of content that was could be housed and displayed.

Organising the structure of each page/section what it would contain. With initial scamps of assumed content that would be placed in these sections.

Animated example of the initial set of wireframes that we created for the homepage, this was made to demonstrate how we intended a user to navigate the content.

Menu expansion concept, this would expand in width depending on what option was being interacted with.

One concept that we wanted to achieve was a contextual contact form as we had identified through out discovery phase that there were significant gaps in the way that other agencies were enabling customers to a contact them.

One concept that we wanted to achieve was a contextual contact form as we had identified through out discovery phase that there were significant gaps in the way that other agencies were enabling customers to a contact them.

We experimented with a dark theme during the initial phase of the project. Which gave prominence to the imagery.

 

Once we created this initial design of the site this was then presented again to the wider group and led to a few final tweaks but overall we were able to define a couple key aspects of the site after this;

Let the work doing the talking
The work had to have a strong visual presence with very little fluff around it.

Tell a story
There had to be area’s which explained the story of the brand and our mission.

Add value through our process

Case studies need to feature constant validation and proof of projects and their successes.

These points were carried throughout the amendments of the site through to final design.


Outcomes

 

Overall we were really happy with the site and the way it serviced the initial personas.

The project was a massive learning experience for all those involved as it was the internal business-wide digital project that the agency had undertaken. This lead to the experience design team having to educators of UX and its best practices inside a traditional environment.