ANTIMATTER: a case study

overview

project:
creative agency website: fully responsive
role:
project lead
timeline:
3 weeks - 70+ hours

background

As a former Lead Producer for various creative agency based in NYC I have met my fair share of dreamers and creators. When sharing my journey into UX Design with a friend and fellow creative, she mentioned she putting together a team of strategists to launch an agency.

Thats where my skills came into play.

problem

In the competitive agency market, a compelling website can really make or break a client decision. It must communicate a point of view, credibility and energize clients to reach out.

project goal

To break the mold of traditional agency sites with simple way-finding, clever animations and tons of personality.

01 - the market

~competitive analysis
~stakeholder interviews
~key insights

competitive analysis

For a marketing agency based in NYC, the competition is aggressive. We began to exam various “award winning” websites for companies in the space.

Specifically, we examined the portfolios of two smaller NYC agencies Juliet and SQAT NY as well as freelance art director Or Halevi. These companies offer clients a similar set of services including brand strategy, art direction, front & back end development, digital marketing, and graphic design.

Our competitors landing pages felt cramped, overloaded with jargon-packed information. In response, our design would lean minimalist, feel approachable, and walk the walk more than talk the talk.

stakeholder interviews

In stakeholder interviews I learned how important this project was to the founder who had quit her job to strike out on her own. Her nerves around this big decision meant being transparent at every step.

We also discussed the benefit of offering a targeted set of services in the beginning, offering a select set of services to start, and then expanding to grow. That meant the website needed a flexible system that could support added pages down the line.

key insights

The founders alignment to being really differentiated and targeted in their service-suite made it possible to make a strikingly simple site where every detail was considered.

We also uncovered that the founder had a love for analog film, and so we wanted to nod to that in the design.

"Agencies are hard to compare for clients, because they rely on the same jargon, while hiding valuable information on what they're actually like to work with"

STEPHANIE, 34

02 - define

~research synthesis
~pain points
~personas

research synthesis

Ultimately, the goal was to gain further insight on what makes an excellent site from members of the creative industry.

Stephanie, who works as a Creative Director in NY claimed that agencies “often bury valuable info on how the company does business” making it difficult to decide which company can best address a client’s needs.

pain points

After collecting various opinions from our users we began reducing feedback to key pain points our team would need to solve

~ Creating a website that is decisively original in its' presentation.

~ Building trust towards the team, and igniting curiosity for the two services provided.

~ Breaking traditional modes of navigation while still being easy to use

personas

After synthesizing feedback from our key stakeholder, I proceeded to develop a persona based on the project parameters.

Meet Peter. He represents our target client. He is an executive at a fledgling company, searching for guidance from a small agency. He doesn't want to pay the steep price-tags associated with established agencies. Instead, he wants to partner with a smaller agency or freelancer that would clear a path towards growth for his own brand.

“I have recently founded my own start up; however, I’m having trouble developing my brand and deciding what we should represent in the market.”

Peter, 48

03 - ideate

~project goals
~sketches & wireframes
~branding
~ui kit

deliverables

Before jumping into wire framing I wanted to ensure that the project was on target and the client was aligned.

lo-fi wireframes

Mid-fi wireframes

Branding & Ui Kit

04 - prototype

~final design walkthrough
~hi-fidelity prototype

final design

05 - testing and reflections

~lo-fi testing
~usability tests
~product reflections

lo-fi testing

After some initial sketches, I thought it best to quickly share the concepts with a lo-fi prototype of the landing page with our stakeholder. The feedback was clear; it felt a bit busy. During a collaborative workshop we began laying the bones for a final vision.

In this session, we decided to lean away from the traditional nav bar and opted for a “four corners” design.

usability testing

Usability testing played a key roll in changes that were implemented to the final site.

Through our initial user research, I had established a rapport with 4 of our previous contacts and began scheduling rounds of testing for our final prototype. Several participants were surprised by the overall presentation of case studies and struggled navigating around the site. The non-traditional navbar left a bit to be desired regarding intuitive usability.

After a round of refinement with this feedback in mind, I also conducted testing directly with our key stakeholder. Together we were able to minimize some of the more elaborate prototype animations we had worked on previously in order to “get straight to the point.”

reflections

Since building this prototype, I have been working closely with developers to launch this website in the coming months. The company renamed itself to ROUG CORP, which included minor changes to the overall structure.

Usability testing played a key roll in changes that have been implemented to the final product and working in close connection with a direct stakeholder presented its fair share of challenges and rewards.

Be sure to check it out!