Trends As A Design Tool
Revitalizing The Agencyport.com Website
6/6/16: Updated Links now that Agencyport.com has been updated
In the world of design, the word “trend” has negative connotations. Rather than denote anything of substance, it’s more like the verbal equivalent of flared jeans; Something that is temporarily in style, only to be exiled to the back of one’s closet. But trends aren’t necessarily bad, nor do they all fade away like last season’s questionable fashion choices.
It’s important to talk about the old website — not to pick on it’s previous design, but for comparison and context. This design of the website was live for at least a year and was my first impression of Agencyport as a company.
Naturally, I was very confused at first. Knowing absolutely nothing about insurance, I really had no idea what was going on. The average person doesn’t exactly understand phrases like “ACORD form-to-XML” conversion. Later on, I would understand that this website really wasn’t geared towards job-seekers such as myself.
Overall, I thought the website could benefit from some structure. On every page, there was a lot going on. Videos took up large portions of the pages, information in boxes was not evenly distributed.. I knew that it would benefit greatly just from a more strictly defined grid system and better use of space.
While the website wasn’t necessarily intended for people like me looking for a job, I wanted to appeal to that audience more. I wanted to do this without sacrificing our main audience — people in the insurance industry. There had to be a way to make a website about insurance software more approachable.
I also wanted to avoid certain elements I believed were on their way “out” such as carousels. When thinking in terms of trends, it’s as equally important to consider what no longer works. Since users will leave websites within 10–20 seconds, hiding necessary information can be risky.
The first thing to go — the contact form in the footer. I was probably a little too honest about my feelings about that one.
When it came to re-designing the Agencyport.com website, one thing I knew I had to prioritize was modernization. In the insurance industry, it’s easy to find websites that look pretty old-school. Rather than settle for a design that was “good enough” by industry standards, I wanted it to be a well-designed website by today’s definition.
I find it can be difficult to define what is “modern” without the aid of trends. It’s what places marquees and neon-text strictly in the 90's, back with Geocities and Angelfire. Websites back then could’ve benefited from what we know now, as we embrace concepts such as material design, flat design, and minimalism.
Still, not all these trends made sense with what I knew of the company, it’s products, and it’s overall mission. A website resembling a French design boutique would only alienate and confuse our existing clients. I would pick and choose what kind of trends I believed would promote my overall vision of the site.
I searched for a variety of websites for inspiration. A lot of inspiration I found in an unlikely place — design agencies. Agencyport doesn’t exactly have any direct competition, but even so — we knew our website was considered “well-designed” compared to other insurance-y websites. If I wanted to emulate what I believed to be good design, I was going to have to look beyond insurance.
Purple, Rock, Scissors
I really liked the impact of having a large-scale video as the first impression. But it’s not just the use of video or it’s size — it’s the content. They used a loop of clips that give a sense of the agency’s environment, which inspired our own use of clips. Similarly, I wanted to give a sense of AP’s environment and culture before the user moved on to the next page.
The Asana website has changed since I originally was inspired by it, but still has some of those elements I liked initially. I like the high-resolution, large-scale images mixed in with the vector illustrations. The big, flat-colored buttons are a direct inspiration for what I did for AP’s website.
I really like Thoughtbot’s “About” page, particularly for a company that has so many people. It can be tricky to be inclusive of everyone if the company is big enough. One of the priorities we had for our “Team” page was highlighting a variety of the people that work at AP. We didn’t want to separate the page into “important top-tier people you should know.. and here’s everyone else!”
The Android page has changed from a year ago when I made the website, but it still is just as neatly laid out. I knew we would be using a lot of images of devices in our product pages, and this served as a good example of how to go about it. Now I have a folder of high-resolution images of tablets, laptops, and phones.
Trends of Choice
In the end, here are the trends I honed in on:
1. Video: We already used video in the old version of the website, but not effectively. The content didn’t make much sense to someone visiting the website, and they took up too much space on the page. Instead, we use video much more strategically and in a way users are already familiar with.
2. Transparency: The Asana website used transparency more than it’s current website, and I liked the effect of flat color on-top of transparency. It would prove to be tricky when it came to designing for IE, but it was worth the added visual effect.
3. Flat Color: In the previous iteration of the website, there was a lot of white. I wanted to infuse more color into the website, which I knew would give more personality and be more visually interesting. As someone who is a fan of white-space, it is possible to have too much of a good thing.
4. Highlight Those Devices: For a software company especially, it’s important to highlight how ours looked on a variety of devices. I knew I had to make sure that these images were on-point. Thankfully, there’s an incredible amount of resources available for just this purpose.
Not all of these trends translate easily to older browsers, such as Internet Explorer. Being in the insurance industry, I have to keep in mind people working on older devices and defunct browsers.
For video, I coded it so certain browsers render still images instead — similarly to how I coded it for mobile devices, since videos don’t work the same on phones. For transparency, I had to replace those rgba codes with normal hexademical code. Otherwise, the website did pretty well going from one browser to another. Thanks, Bootstrap!
The Website Now
Now if you look at the website, you’ll see how some of these ideas came into play. For the front page, I used that clip of video to give that first impression of AP as a modern company. Information is neatly consolidated into a grid format. And look.. color!
Looking Into The Future
Moving forward, I have more ideas to improve the site’s design and further showcase AP’s spirit. One of these plans is to update our “Team” page and make it more manageable to update over time. I also want to figure out a better way to format information that is repeated across pages.
As a designer, it’s important not only to think in the present but also the future. This extends from everything from leaving comments in the source code to keeping track of inspiration and justification. Looking back, I can see why I made the design the way I did. It will help me avoid making the same mistakes over and over again and strive for innovation.
While I see that the current design is a big step forward, there is always room for improvement. Perhaps it’s my inner restless designer — or maybe it’s simply a need to adapt. A website is no longer static, but a living thing — not only in the sense of the environments it can be seen, but how it is interpreted over time.
With that said, none of this could’ve been accomplished without AP’s marketing team, fellow AP designer Dave Marshall, and my supervisor, Michael Albert. Thanks, guys!
As always, recommend this article if you found it at all helpful :)