Original website design.
Using Figma, myself and two other team members were recruited to redesign and rework an existing framework for Silvo Amico Law Office, who is an experienced attorney in the Miami, Florida area.
After researching their competition and other law office websites that matched their expectations of professional style, our team noticed first-hand the emphasis of a clean color scheme that included blues, golds, black and white. We also noticed quick and bold positioned calls to action, eye-catching photos, and easy to read explanations of services.
Silvio emphasized his website's target to attract serious adults in need of lawyer. We agreed that serious adults would be those who research qualifications, expertise, and track record. As such, with having nearly 27 years of experience in uncontested and contested divorce litigation, we wanted to make sure to highlight his expertise and why he should be chosen over his competition. Additionally, we understand that you can tell a lot about an attorney from their law office. This can also be reflected through a website since this is typically the first thing a prospective client will see. We wanted to make sure to emphasize a neat, orderly, efficient and well-run experience. One that feels professional, but also friendly, helpful, and easily accessible.
Role: User Experience Designer (Including: Figma, Wireframing, UI, Prototyping, and Testing)
Timeline: 4 weeks
We started the project by conducting an initial round of Secondary Research, sourcing background information about some competitors and deep diving into your current website.
Some things we took notice about your office and in researching your practice:
27 years of experience in in uncontested and contested divorce litigation.
Reviews online highlight your compassion, expertise, and ability to clearly explain what would otherwise be complicated to understand.
People in need of legal advice about personal and family situations may hesitate to contact an attorney because of the cost involved.
Reputation is important in the practice of law. Local attorneys are more likely to take special care to maintain a positive reputation in their home court.
We analyzed 3 competitors in the same Miami, FL area. Some things we took notice of about competitors' websites in the area:
Clear call-to-actions & contact info
Clean (often blue) color scheme
Connected to community through client quotes & news source rating
We observed that there seemed to be a gap in the current website design around easy accessibility to contact information and in connecting to the local community. Silvio had glowing reviews found on another website, but not on his own.
In order to develop the best possible user experience, we thought about fictional personas so that we could empathize with different wants and needs of possible potential clients.
We referred to them throughout the entire product development process.
Crazy 8 Sketches
For this exercise, I decided to use the Crazy 8’s method to quickly sketch out a lot of different ideas for the website. The goal was to generate as many ideas as possible in a short period of time, without worrying about the quality of the sketch or whether it’s a good or bad idea. I took out my iPad and used Procreate to sketch ideas and used my phone as a timer on repeat for 1 min, and got sketching. While I was drawing, I took inspiration from clean and simple websites such as Google, Airbnb, and Nike.
Big hero image - I wanted something that would draw the user in to want to explore the website more.
Practice Areas - From our research, we learned that Family Law could be rather broad, so highlighting Silvio's expertise initially can help potential clients immediately see/find what they are looking for.
Achievements - From the Google UX Fundamentals course I took I learned that equity is important when thinking about design and how users can more informed choices by connecting with the community. I noticed that there wasn't a clear presence of this on the current website and therefore wanted to think about how to highlight Silvio's experience, achievements, and even testimonials/reviews.
Clear Call-to-Action - I wanted to think about how to make it easy for people to find and connect with Silvio as to highlight this approachability. Through our research we found that people may hesitate to reach out to attorneys.
We decided to sum up our findings about what we wanted to portray as the end goal in our redesign in 3 words:
Professionalism - Professionalism is mirrored through this website not only by showcasing Silvio's experience & area of law, but also by highlighting testimonials, achievements, & incorporating clear navigation & simplification of legalese.
Efficient - With 27 years of experience, you are well versed in the law. As a reflection of this, the website has been designed for potential clients to efficiently gather information to meet their needs & build trust.
Accessible - As a dedicated lawyer who is available at the convenience of your clients, this website has been designed for easy access to your office contact information whether by, phone, email, or in-person visit.
To help visualize our end goal, we created a mood board that included color swatches, typography, and examples of other apps that achieved a similar style that we were striving for. This mood board helped guide the design decisions that shaped the final UI. The main influence on the style that we chose was the color palette. These colors were drawn from other professional business sites that portrayed a calm, simple, and modern feel. When a product is simple and easy to use, people are less likely to be frustrated navigating the product and completing tasks. The use of white space is inviting and modern and makes the product more trustworthy and easy for clients to find the information they are looking for. The imagery was chosen to portray trust and expertise in the area of litigation that Silvio Amico Law Firm practices. The images should portray the professionalism and the years of experience that Silvio Amico possesses. Using images like this will entice clients to come back and use their services over and over again.
Drawing inspiration from our mood board, we started to create a style guide for the website and incorporate a wordmark logo for his practice. This guide would have all elements of the design defined so that our team and the website developer could stay consistent and cohesive when working on the project.
After brainstorming ideas, we decided to take a few ideas from my Crazy 8 sketches and expand on our initial ideas. These early iteration sketches helped to flesh out ideas quickly allowing our team to explore screen layouts for each stage of the user’s experience. The client requested that we keep the current site mapping due to established traffick and tracking. With that in mind, we explored how to make the user journey a more rich experience.
We also wanted to think about how we could expand the experience to mobile. Therefore, we had to consider adjusting the design elements and features to fit different screen sizes. When designing for desktop or laptop computers, the content is in landscape (horizontal) mode. The screen is wide, content can be laid out in columns, and there’s much more flexibility to design.
However, with mobile, content is usually laid out in portrait (vertical) mode, which is ideal for scrolling. But, you can also rotate your phone and view content in landscape (horizontal) mode. It was interesting an interesting experience in trying to maneuver the elements like a jigsaw puzzle in order to keep the same consistency in either mode you view.
Website UI Design
This final stage of high fidelity screens is probably the most exciting for me because I love to see how initial brainstorming ideas can develop and come to life. We used a light style that displayed that clean, modern, and simple look we were going for since the beginning of our research. As such, we wanted users to easily find what they were looking for and to quickly contact Silvio with additional questions or concerns. Legal matters can be complicated and we wanted to make sure this experience was a breeze.
Mobile UI Design
We adapted our website design for mobile and paid close attention to the details in order adhere to the 4 C's of design: consistency, continuity, context, and complementary.
For our client presentation, we put together a web and mobile prototype for the client to view. Using Figma to create the prototype, we wanted to make sure we were moving in the right direction before the website was completely rebuilt and set live. Therefore, if we received any feedback from the client, we could easily adjust and not disrupt any current website traffick and avoid any costly mistakes.
One thing we did learn because we had not done it before was learning how to create hover connections for the teaser boxes of the design. It was fun to actually see our vision come to life!
Connecting to Mobile
We also wanted the client to experience the redesign on mobile and created the prototype on this platform as well.
Our next steps is to present our design to Silvio and get his feedback. We will continue this experience by expanding on any suggestions or modifications he asks for while also advocating for use experience. It's important to stay true to the core of user-centered design and remain deeply empathic for the user. It’s not just about what a product does for a user, it’s about how the experience of interacting with the design makes the user feel. We want to make sure to stay true to our original 3 feelings of professionalism, efficiency, and accessibility.
If we were able to work with an UX Writer, I think this could have helped to make some suggestions to the stakeholders about what information was truly imperative to keep on the site since it is very text heavy. Having more expertise there could have revised the experience a bit to produce an even better user experience.
I had a lot of fun working on a team for this project and getting new ideas that I never would have thought of or put together. I think it came out really great and I'm looking forward to the feedback of our client.