Web User Interface Design
Law Firm Website Redesign
Freelanced as a Website UI Designer, creating visually engaging and user-friendly digital experiences. Led the redesign of an established law firm's online presence, delivering a modern, accessible, and visually compelling website.
Industry :
Law
Client :
Craybeck Law LLP
Project Duration :
11 months
Brief :
I have been tasked with a complete revamp of the online presence of a Law Firm. Based on customer behaviour, I make changes to enhance the user experience, thus creating a site that is easy for customer usage. Including updating content, refreshing layouts, and improving navigation for better business and site performance.
Problem :
How might I embark on using my design process to redesign an existing law firm's website to improve usability, aesthetics and site navigation in order to attract new customers.
Outcome :
User response and analytics shows an increased customer satisfaction rate of 15% by improving website interaction. Design changes to the revised site even strengthened customer loyalty.
Design Process :
Step 1: Research & Planning
Research and planning were vital for the website redesign. It started with analysing the current site's performance, customer feedback, and market trends. These insights formed the basis of a clear strategy for architecture-led planning and wireframing. This approach ensures the redesign aligns with user needs and the business goals of Craybeck Law, to hopefully result in a more customer-friendly, and compelling website.
Step 2: Redesign & Test
In relation to the research and planning, the redesign phase involves implementing design solutions and new features based on user feedback. User testing helped pinpoint any remaining problems and validate the effectiveness of the redesign. This iterative approach guarantees that the final product not only looks visually appealing but also delivers a superior user experience.
Step 3: Update the Craybeck Design System
Updating a website's design system is crucial for maintaining a consistent and user-friendly online presence. Plus, it aligns with accessibility standards, making the website more effective and satisfying for users.
Job & Responsibilities :
01 | Gaining Context
To have a better understanding of the problem, I explored existing data and research from existing customer reviews of their own digital experience from the site in its current state. I also set up 1:1s with partners, engineers and designers from the company to learn more about the problem.
02 | Client Communitation
Since this was going to be a large-scale project, I had weekly meetings with the team, to discuss what design improvements should be implemented into the site for better ease of use. I also spent time talking to other designers about their product surfaces.
03 | Redesigning the User Interface
I used WordPress, Oxygen Builder and the Craybeck Law design system to create a new visual design for each webpage across the whole website. Changes were made based on specifications handed to me by Craybeck Law, and on customer reviews.
04 | Fixing Bugs
Using my knowledge of CSS and HTML, I was also able to fix already existing UI bugs on various pages before the newly improved site is pushed back out to the customers.
05 | Updating the Design System & Building Frameworks
While working on the new interface, many design elements such as typography, colours, and UI components were changed to support the new branding. I supported the design system for Craybeck Law. I made updates to the design system and wrote frameworks for multiple systems
User Research and Planning :
After interviewing customers, I soon discovered they were having issues with inconsistent designs. Inconsistencies in layout, colours, and fonts, across the website confused users, thus making it feel unprofessional.
Data suggest that users want improved usability. The site in its initial state was too complicated for users the navigate effectively and get to the page they want. The complex navigation could frustrate users, making it difficult for them to find what they're looking for. I felt this could be too overwhelming, especially for new customers.
The solution to these problems would be to revamp the user interface with improved navigation so users can find what they are looking for without any issues. The design of the site requires updating, along with a newer design system.
Ideating Design Solutions :
The Problem
HMW Statements
Design Solutions
Readability - cluttered layouts overwhelm and hinder the customer focus, creating cognitive strain and driving them away from the website.
How might we reduce cognitive strain on customers and simplify the website design for better legibility.
Choose fonts and sizes that are readable on various devices. Ensuring there is contrast between text and background colours.
Complex navigation - Too many pages, with confusing information architecture. Customers struggle to locate features and get frustrated.
How might we increase customer satisfaction with the site navigation for a better user journey.
Ensure a clear logical categorisation of content, and to utilise intuitive labelling. Search function is good for quick access to specific information.
Insufficient error handling – various broken links scattered throughout the site coding and errors in the interactions.
How might we find and repair the user interface bugs and error messages for better interaction.
Provide informative error messages that clearly explain the problem, and provides contact information for help the customer. Or use a 404 page.
Oxygen Builder Software :
The website was hosted on WordPress and I edited the UI using the Oxygen plugin as shown in the image below. Every page was revamped using this editor.
Updated Screen Designs :
Home Screen
About Us Screen
Company Service Screen
Contact Us Screen
Updating Design System :
Throughout designing, I was required to maintain and update the Craybeck design system and build frameworks. I documented the improved design system in Figma.
Reflecting on the project outcomes :
01 | Successful outcome
User response shows that the design changes are vastly increasing customer satisfaction by improving site navigation and interaction. Testing this new interface with customers shows it has even strengthened customer loyalty to the firm.
02 | Positive response
The testing phase of this project provided valuable feedback on the performance. The user response shows that the new website design was an overall success, with successful interactions and navigation with the interfaces.
03 | Next steps...
This project requires an iterative process, and the website should evolve based on user feedback and changing needs. The next steps will include regular reviews and updates to the website to ensure it continues to meet its objectives and provides an excellent user experience.
Hi
Let's work together
Drop me a line! I will get back to you asap.
Web User Interface Design
Law Firm Website Redesign
Freelanced as a Website UI Designer, creating visually engaging and user-friendly digital experiences. Led the redesign of an established law firm's online presence, delivering a modern, accessible, and visually compelling website.
Industry :
Law
Client :
Craybeck Law LLP
Project Duration :
11 months
Brief :
I have been tasked with a complete revamp of the online presence of a Law Firm. Based on customer behaviour, I make changes to enhance the user experience, thus creating a site that is easy for customer usage. Including updating content, refreshing layouts, and improving navigation for better business and site performance.
Problem :
How might I embark on using my design process to redesign an existing law firm's website to improve usability, aesthetics and site navigation in order to attract new customers.
Outcome :
User response and analytics shows an increased customer satisfaction rate of 15% by improving website interaction. Design changes to the revised site even strengthened customer loyalty.
Design Process :
Step 1: Research & Planning
Research and planning were vital for the website redesign. It started with analysing the current site's performance, customer feedback, and market trends. These insights formed the basis of a clear strategy for architecture-led planning and wireframing. This approach ensures the redesign aligns with user needs and the business goals of Craybeck Law, to hopefully result in a more customer-friendly, and compelling website.
Step 2: Redesign & Test
In relation to the research and planning, the redesign phase involves implementing design solutions and new features based on user feedback. User testing helped pinpoint any remaining problems and validate the effectiveness of the redesign. This iterative approach guarantees that the final product not only looks visually appealing but also delivers a superior user experience.
Step 3: Update the Craybeck Design System
Updating a website's design system is crucial for maintaining a consistent and user-friendly online presence. Plus, it aligns with accessibility standards, making the website more effective and satisfying for users.
Job & Responsibilities :
01 | Gaining Context
To have a better understanding of the problem, I explored existing data and research from existing customer reviews of their own digital experience from the site in its current state. I also set up 1:1s with partners, engineers and designers from the company to learn more about the problem.
02 | Client Communitation
Since this was going to be a large-scale project, I had weekly meetings with the team, to discuss what design improvements should be implemented into the site for better ease of use. I also spent time talking to other designers about their product surfaces.
03 | Redesigning the User Interface
I used WordPress, Oxygen Builder and the Craybeck Law design system to create a new visual design for each webpage across the whole website. Changes were made based on specifications handed to me by Craybeck Law, and on customer reviews.
04 | Fixing Bugs
Using my knowledge of CSS and HTML, I was also able to fix already existing UI bugs on various pages before the newly improved site is pushed back out to the customers.
05 | Updating the Design System & Building Frameworks
While working on the new interface, many design elements such as typography, colours, and UI components were changed to support the new branding. I supported the design system for Craybeck Law. I made updates to the design system and wrote frameworks for multiple systems
User Research and Planning :
After interviewing customers, I soon discovered they were having issues with inconsistent designs. Inconsistencies in layout, colours, and fonts, across the website confused users, thus making it feel unprofessional.
Data suggest that users want improved usability. The site in its initial state was too complicated for users the navigate effectively and get to the page they want. The complex navigation could frustrate users, making it difficult for them to find what they're looking for. I felt this could be too overwhelming, especially for new customers.
The solution to these problems would be to revamp the user interface with improved navigation so users can find what they are looking for without any issues. The design of the site requires updating, along with a newer design system.
Ideating Design Solutions :
The Problem
HMW Statements
Design Solutions
Readability - cluttered layouts overwhelm and hinder the customer focus, creating cognitive strain and driving them away from the website.
How might we reduce cognitive strain on customers and simplify the website design for better legibility.
Choose fonts and sizes that are readable on various devices. Ensuring there is contrast between text and background colours.
Complex navigation - Too many pages, with confusing information architecture. Customers struggle to locate features and get frustrated.
How might we increase customer satisfaction with the site navigation for a better user journey.
Ensure a clear logical categorisation of content, and to utilise intuitive labelling. Search function is good for quick access to specific information.
Insufficient error handling – various broken links scattered throughout the site coding and errors in the interactions.
How might we find and repair the user interface bugs and error messages for better interaction.
Provide informative error messages that clearly explain the problem, and provides contact information for help the customer. Or use a 404 page.
Oxygen Builder Software :
The website was hosted on WordPress and I edited the UI using the Oxygen plugin as shown in the image below. Every page was revamped using this editor.
Updated Screen Designs :
Home Screen
About Us Screen
Company Service Screen
Contact Us Screen
Updating Design System :
Throughout designing, I was required to maintain and update the Craybeck design system and build frameworks. I documented the improved design system in Figma.
Reflecting on the project outcomes :
01 | Successful outcome
User response shows that the design changes are vastly increasing customer satisfaction by improving site navigation and interaction. Testing this new interface with customers shows it has even strengthened customer loyalty to the firm.
02 | Positive response
The testing phase of this project provided valuable feedback on the performance. The user response shows that the new website design was an overall success, with successful interactions and navigation with the interfaces.
03 | Next steps...
This project requires an iterative process, and the website should evolve based on user feedback and changing needs. The next steps will include regular reviews and updates to the website to ensure it continues to meet its objectives and provides an excellent user experience.
Hi
Let's work together
Drop me a line! I will get back to you asap.
Web User Interface Design
Law Firm Website Redesign
Freelanced as a Website UI Designer, creating visually engaging and user-friendly digital experiences. Led the redesign of an established law firm's online presence, delivering a modern, accessible, and visually compelling website.
Industry :
Law
Client :
Craybeck Law LLP
Project Duration :
11 months
Brief :
I have been tasked with a complete revamp of the online presence of a Law Firm. Based on customer behaviour, I make changes to enhance the user experience, thus creating a site that is easy for customer usage. Including updating content, refreshing layouts, and improving navigation for better business and site performance.
Problem :
How might I embark on using my design process to redesign an existing law firm's website to improve usability, aesthetics and site navigation in order to attract new customers.
Outcome :
User response and analytics shows an increased customer satisfaction rate of 15% by improving website interaction. Design changes to the revised site even strengthened customer loyalty.
Design Process :
Step 1: Research & Planning
Research and planning were vital for the website redesign. It started with analysing the current site's performance, customer feedback, and market trends. These insights formed the basis of a clear strategy for architecture-led planning and wireframing. This approach ensures the redesign aligns with user needs and the business goals of Craybeck Law, to hopefully result in a more customer-friendly, and compelling website.
Step 2: Redesign & Test
In relation to the research and planning, the redesign phase involves implementing design solutions and new features based on user feedback. User testing helped pinpoint any remaining problems and validate the effectiveness of the redesign. This iterative approach guarantees that the final product not only looks visually appealing but also delivers a superior user experience.
Step 3: Update the Craybeck Design System
Updating a website's design system is crucial for maintaining a consistent and user-friendly online presence. Plus, it aligns with accessibility standards, making the website more effective and satisfying for users.
Job & Responsibilities :
01 | Gaining Context
To have a better understanding of the problem, I explored existing data and research from existing customer reviews of their own digital experience from the site in its current state. I also set up 1:1s with partners, engineers and designers from the company to learn more about the problem.
02 | Client Communitation
Since this was going to be a large-scale project, I had weekly meetings with the team, to discuss what design improvements should be implemented into the site for better ease of use. I also spent time talking to other designers about their product surfaces.
03 | Redesigning the User Interface
I used WordPress, Oxygen Builder and the Craybeck Law design system to create a new visual design for each webpage across the whole website. Changes were made based on specifications handed to me by Craybeck Law, and on customer reviews.
04 | Fixing Bugs
Using my knowledge of CSS and HTML, I was also able to fix already existing UI bugs on various pages before the newly improved site is pushed back out to the customers.
05 | Updating the Design System & Building Frameworks
While working on the new interface, many design elements such as typography, colours, and UI components were changed to support the new branding. I supported the design system for Craybeck Law. I made updates to the design system and wrote frameworks for multiple systems
User Research and Planning :
After interviewing customers, I soon discovered they were having issues with inconsistent designs. Inconsistencies in layout, colours, and fonts, across the website confused users, thus making it feel unprofessional.
Data suggest that users want improved usability. The site in its initial state was too complicated for users the navigate effectively and get to the page they want. The complex navigation could frustrate users, making it difficult for them to find what they're looking for. I felt this could be too overwhelming, especially for new customers.
The solution to these problems would be to revamp the user interface with improved navigation so users can find what they are looking for without any issues. The design of the site requires updating, along with a newer design system.
Ideating Design Solutions :
The Problem
HMW Statements
Design Solutions
Readability - cluttered layouts overwhelm and hinder the customer focus, creating cognitive strain and driving them away from the website.
How might we reduce cognitive strain on customers and simplify the website design for better legibility.
Choose fonts and sizes that are readable on various devices. Ensuring there is contrast between text and background colours.
Complex navigation - Too many pages, with confusing information architecture. Customers struggle to locate features and get frustrated.
How might we increase customer satisfaction with the site navigation for a better user journey.
Ensure a clear logical categorisation of content, and to utilise intuitive labelling. Search function is good for quick access to specific information.
Insufficient error handling – various broken links scattered throughout the site coding and errors in the interactions.
How might we find and repair the user interface bugs and error messages for better interaction.
Provide informative error messages that clearly explain the problem, and provides contact information for help the customer. Or use a 404 page.
Oxygen Builder Software :
The website was hosted on WordPress and I edited the UI using the Oxygen plugin as shown in the image below. Every page was revamped using this editor.
Updated Screen Designs :
Home Screen
About Us Screen
Company Service Screen
Contact Us Screen
Updating Design System :
Throughout designing, I was required to maintain and update the Craybeck design system and build frameworks. I documented the improved design system in Figma.
Reflecting on the project outcomes :
01 | Successful outcome
User response shows that the design changes are vastly increasing customer satisfaction by improving site navigation and interaction. Testing this new interface with customers shows it has even strengthened customer loyalty to the firm.
02 | Positive response
The testing phase of this project provided valuable feedback on the performance. The user response shows that the new website design was an overall success, with successful interactions and navigation with the interfaces.
03 | Next steps...
This project requires an iterative process, and the website should evolve based on user feedback and changing needs. The next steps will include regular reviews and updates to the website to ensure it continues to meet its objectives and provides an excellent user experience.
Hi
Let's work together
Drop me a line! I will get back to you asap.