This project was completed in-house for the marketing and design agency where I worked.
Brllnt needed a new website to promote the agency to potential clients. The existing site had been designed a few years prior, and it was difficult and confusing to navigate. It had some fun touches, like the full-screen gif on the landing page that the user could change, but it didn’t showcase their work or communicate what they did.
With the redesign, I hoped to present the agency as more credible and polished, but still give a sense of quirkiness and fun.
Potential clients coming to our website needed to be able to quickly understand what our agency did and what services we could provide them. They needed to be able to navigate with ease through the site without much thought, keeping their focus on the message and content. Difficulty navigating the site frustrated them, didn’t allow them to learn about us, and left them with little faith in our expertise.
There were two main user groups our site was for: potential clients and potential hires. We decided that generating business leads was the main purpose of the site and therefore chose to focus on potential clients.
Brllnt focused on doing work for small businesses, local government, economic development agencies (like DMPED), and social impact organizations. Many of these potential clients had never worked with an agency before and were unfamiliar with marketing, so we needed to give them a clear idea of what we did right away. Recognizing that the users weren’t inundated with marketing and design, I realized that being trendy or flashy to “stand out” wasn’t a priority; the priority was making it easy for users to find information.
Because Brllnt didn’t have the budget for a large development contract, the website was developed over the course of several months. However, there were a few pages that the leadership team wanted functional right away. For this reason, we had a unique step-by-step rollout, where the home page was updated first and then pages were updated as the design and development were finished.
This definitely presented challenges in the design process. Once the style was defined, any changes that affected the existing pages would have to go through the development team.
I was the lead designer on this project, working mostly independently with some support and feedback from our senior UX designer and design director.
I started with an audit of the existing site to see what was working and what needed to change.
The existing site consisted of a home page, Contact, About, Our Work, and Blog. However, there was no existing template for posts under the blog or work pages; instead, links led the user to posts on the blogging site Medium. By leading the user off our site, we lost the opportunity to control the user’s flow through the site, and we left the user with confusion about how to return to the main site. So it was clear that creating a blog and work template would be part of the redesign.
The existing site utilized an unusual navigation where users had to click a slider on the side or bottom of the page to navigate to the next page.
While we didn’t have the budget for formal testing, I asked a few friends and family members to navigate through the site while I watched. Most expressed confusion on the landing page about where to click next. Once they found the slider, they were able to navigate to a particular page, but because the sliders changed positions with every page, the arrows were never where they expected them to be. This led to confusion, frustration, and lots of fumbling and wasted time in trying to navigate.
Pulling information from our site’s Google Analytics helped inform our decisions moving forward. For instance, we found that the majority of our users were visiting our site in a full-screen desktop browser, with mobile browsers a significant second. Since I expected most of our users to be potential clients visiting our site during the workday, that made sense. With this info, we could focus on the desktop experience, while still making sure all essential elements were visible and navigable on mobile (something the existing site failed to do).
Since the IA was fairly simple, I would reuse some modules between pages, but each page would have a unique design (besides the blog post and case study, which would be templated).
I started by looking at the existing site structure. Was it possible to keep the sliding navigation, which the agency leadership was partial to, but make it easier to navigate and add new pages? I experimented with diagramming various ways that the pages could be organized spatially.
The problem with the sliding navigation was that it got complicated once the pages grew to longer than browser height. One possible solution was to have the longer-form pages, like blog posts and case studies, appear as single-page applications within the page, allowing the user to scroll within the app container while the rest of the page remained stationary.
However, ultimately, none of these adequately addressed the confusion of the navigation.
WHO IS IT FOR?
The existing website was flashy and fun, but was confusing and frustrating to use. It was made for the designer, not the user.
With the user in mind, the best option was a simpler, more traditional layout that users could navigate through with ease.
We started with the design of the home page and the case study page, using eye-catching header graphics and some small animated touches that retained the playful quality of the existing site.
From there, I created a style guide to define the typography across the site. The style guide and the home page became the basis for the rest of the page designs.
The Our Work page presented a challenge: how to organize the case studies and what meta-information to display.
Each case study had multiple pieces of information attached to it:
- Client name
- Campaign name (important to include for disambiguation, since our portfolio included a few different projects for the same client )
- Type of work (website design, ad campaign, branding, etc.)
- Type of client (social impact, tech, government, etc.)
Deciding how to organize the items required me to make some hypotheses about how users were approaching our site. If someone from a social impact organization who needed a website redesign visited our site, what would they be looking for: our social impact work, or our web design work?
It also required a look at the logistics. Was it feasible to filter by type of work, or did we have too many outliers that would result in one-result filters that made our work appear skimpy? Was it feasible to display the type of work on every post, or would it overwhelm the user for projects where we provided multiple services?
I ultimately landed on a design that highlighted the client type and relied on the content (descriptive titles) to point to the type of work.
Handoff & Implementation
I used Zeplin to hand the designs off to the development team and ensure they had all the assets they needed.
Where annotation wasn’t sufficient, I created high-fidelity prototypes of specific elements to ensure the design was communicated clearly.
I helped our dev team implement a new software for feedback that allowed me to pinpoint exactly where issues were occurring and give specific feedback.
Because of a limited budget, the new site was rolled out in phases, with the new home page going live first and then each page being updated as the dev team completed it.
The phased rollout is still ongoing and should be completed soon.
This was the first UX project where I led the design, and it was a huge learning experience for me.
One of my biggest takeaways was that the more work you do on the front end to plan out the project, the fewer issues you’ll run into later on. This was especially true because of the phased rollout of this project. There were many times when I ran into issues that could have been solved with tweaks to the design system, but those changes would have cascaded through pages that had already been completed and handed off. More planning on the front end and a more extensive/specific style guide could have mitigated some of those issues.
I learned to always give the user as much specificity as possible and minimize ambiguity. There should be no question in their mind of what will happen when they interact with the site.
Good user-focused design is about empathy. When issues arise, learn as much as you can about the user and use that to approach it from their perspective.