Coughlin Betke Website Redesign
Summer 2016 | Skills: Web Design, UX Research, Wireframing
In the Summer of 2016, I worked as an in-house designer for a local civil litigation firm, Coughlin Betke LLP. I was the sole designer in a company of 13 individuals and led the redesign of Coughlin Betke's online presence via their website. Coughlin Betke is using Wix, a site hosting website with existing templates. Using Wix's framework, coupled with custom CSS, I created a modern, seamless, and informative website for Coughlin Betke that communicated their values and skill sets clearly and readably.
Original Website: Issues
Below is an image of the older website. Not only did it not fit current web design standards, but it also did not really communicate what Coughlin Betke LLP did or what they specialized in. It was difficult to read and there was no CSS formatting/animations in order to make the site responsive. The lack of visuals also made it difficult to parse through who the Coughlin Betke team was and how clients could connect with them. I started out by annotating the existing website using callouts to pull out the existing issues.
Content and Market
I took some notes on the overall purpose of the Coughlin Betke website, collaborating with my superiors in order to determine what types of content that should be displayed and for whom the website would be marketed towards. The main purpose of the site was to communicate to clients the practice areas, attorney qualifications, and contact information. I also came up with a list of content that needed to be included and a tentative workflow in which they would live.
In order to get an even better sense of how content should be organized on the Coughlin Betke website, I drafted a persona based on prior and existing clients. This also helped to put into perspective the hierarchy of the content on the webpage, as well as how Coughlin Betke could service the clients' needs through content organization.
Ideation & Wireframing
Using the insights gained from collaborating with my co-workers and drawing upon the persona I created, I sketched out some rough wireframes of how the website content should be organized, as well as how users would interact with the website. I decided that, in order to keep with web design standards at the time, I would create an infinitely scrolling website to seamlessly deliver information to website visitors in a clear and concise way. The only pages not included in the infinite scroll would be "people pages," where visitors could learn more about individuals within the Coughlin Betke team.
Wireframing in Balsamiq
I created higher-fidelity wireframes in the Balsamiq application to further illustrate the content and navigation of the website. I decided to incorporate the idea of a locked header so users could easily navigate to different areas of the infinite scroll. Additionally, I brought up the idea of including some splash pages in between certain areas of content to keep visual interest in the web pages.
Transition to Wix Framework
Using one of Wix's existing templates, I heavily modified it using the Wix formatting framework, coupled with custom CSS, to match the wireframes that I had mocked up. The addition of high-quality images of Boston in the background of the pages, along with cohesive fonts, color schemes, and grids, made the website much more readable and modern. It became visually compelling and could be taken much more seriously.
This project and experience taught me quite a lot about defending my design decisions to those with non-design backgrounds. Communication was essential to every decision I made; what I was doing, how I implemented it, and why I was doing it. It was an incredibly rewarding experience where I not only became competent at communicating my design decisions, but also was able to learn about the background of civil litigation and navigate working with non-designers in a productive and friendly way.