At ONE400, we pride ourselves on crafting great online experiences for our clients. We also believe in leading by example, which is why we knew that it was time for a site redesign of our own. Our old site had the basics–information about what we did, the team, our services, and a method to contact us. However, both the content and design wasn’t quite an accurate reflection of our personality. We wanted our online home to be inviting, modern, and comfortable. So we followed the same process we use with our clients to figure out how we can take our website to the next level.
A website redesign never begins with us going straight to the drawing board and sketching out designs. Instead, we start with research and strategy, or more specifically, questions: Where do we see ourselves down the line? Who will our clients be? How can we speak to both law firms and legal tech startups? We began brainstorming ideas for our tone and positioning. We wanted to be sophisticated, but approachable. Informative, but not didactic. Several of the team members started writing content for the pages and we went through multiple drafts and revisions before we settled on the copy we have now. Not only did we have to craft content that conveyed our purpose, in our voice, but we did so with the intention of refining our SEO (Search Engine Optimization). After all, if we are to tell our clients that quality content matters for higher page ranking, what better way to exemplify this than to start with our own content?
Concurrently, we also thought about how our message would translate visually. We started off with a site map to help everyone stay on the same page in terms of the number of pages we would have, the different page templates we would need, and what content to feature on which page. After that we began the process of sketching. One of the challenges was making sure that the site would be contemporary and modern, but not so trendy that it would become obsolete very quickly, or worse, that it would not be intuitive for younger and older users alike to use. Many trees later, we had a batch of rough sketches that eventually became wireframes, which are basically rough outlines of how a web page will be laid out. Once the wireframes were solidified, we created mockups of each page that featured the typefaces, colors, and imagery that would go into the final product (more on this in a bit). One of the main goals we had was to make sure the web pages were constructed in a way that would be flexible enough to accommodate our internal strategic changes. We decided to go with a modular grid layout that included one column rows mixed with two column rows so that we could always arrange these columns however we wanted. The other benefit to this arrangement is that some types of content, like our Twitter feed, simply does not need to take up that much room so placing it in a smaller column made sense. On the other hand, we wanted to highlight our successes with case studies so that type of content took up a whole row.
We also wanted to make sure we got all of our points across very quickly without overwhelming the site visitor with dense paragraphs of information. So we laid out the homepage in a way that intersperses text with imagery, and that serves as a sampler plate of text snippets and links, giving the visitor an overview of our company in a visually interesting way. For the internal pages, we applied the same idea of pacing the user through the content. So for example, on the Work page, we feature additional case studies other than the one on the homepage, and instead of displaying all of the text from all of the case studies on this page, we gave them their own pages (this is also good for SEO). We also used the same grid layout and colored blocks to create a sense of visual cohesion among the pages.
On that note, when we began thinking about our ideal typefaces and imagery, we knew it had to be professional, timeless, and approachable by both law firms and legal tech startups. For the images, we went for photos with a twist: each photo at the top of each page features the ONE400 blue in some way. Using photos of real objects conveyed a certain sense of authenticity, if not a bit of seriousness. This was desired, but we also balanced that with some fun vectors on the Capabilities page. As for the typefaces, we wanted a combination of both serif and sans-serif typefaces, bringing together the professional and the approachable. Finding the right typeface takes quite a bit of testing because it should look great at smaller sizes if you’re using it for body copy, and it should look great large and bold if you’re using it for headlines. A good quality typeface should also have proper kerning (the spacing between individual letterforms) and contain all of the characters you will need. You also need to consider your budget because you will have to purchase the desktop versions of them (if they’re not free) for all of your printed materials. Once we figured that out, we moved onto establishing our color palette. We bought a stack of magazines and cut out any picture or color we liked. We also went on Pinterest to do some more research on colors to see what they would look like in context. Ultimately, we decided to build a palette off of our logo colors of black and blue by adding another shade of blue, its complementary orange for some pop, and accompanying neutrals of light and dark grey, creating a color scheme that is balanced, gender neutral, and professional. From there, it was just about putting in the time to implement, tweak, test, tweak, and repeat. (Obviously the development process takes up a good chunk of the time, but I’ll spare you the hairy details.)
In condensing several months of work into a few paragraphs of text, I want to give you a brief glimpse of what we think about when we redesign a site. There are so many considerations that have to be taken into account regarding the design, business strategy, and development, and these three factors should never operate in silos. We launched the site two weeks ago and in this short amount of time, we have already begun to see more conversions and more site visitors. With the redesign part of this undertaking mostly complete, we will continue to optimize and refine the site based on our visitors’ feedback and best practices.
Have a question? Get in touch with us. We would be glad to hear from you.
By 
