IDCS - Improved UX/UI Design
Role: UX Designer, Developer
Duration: 4 weeks
Tools: Figma, Webflow
Company: IDCS Design & Construction LLC
I tackled the project in three phases:
Research and Discovery - Problem Discovery, Objectives, Results and Challenges & Strategies
Design & Development - Design Process, Solutions Implemented, Webflow development
Impact- Client Testimonials & Feedback
I conducted a focused interview with my client to pinpoint the main issues and collect essential details, using questions to reveal their main concerns. Their current website, built on WordPress, lacked a user-friendly interface and presented challenges in management and maintenance.
Goals:
The project's main goal was to:
- Redesign the website's navigation and landing page, enhancing user experience and improving navigation, readability, and overall usability.
- Transition the website to Webflow for superior management and CMS capabilities.
In the last couple of months, the client's website faced a significant challenge with user engagement. A deep dive revealed that users found the navigation complicated, often leading to frustration. Upon inspecting the original website, I immediately identified critical areas for improvement and started planning a more organized site layout and rebuilding the landing page. The website should show the clients IDCS worked with and their services. It should also have a section for questions people often ask so anyone can quickly find out what the company does. And it should be obvious what visitors should do next.
- Maximize Engagement: Implement compelling calls-to-action that convert visitors into active participants.
- Visual Cohesion: Achieve a harmonious design by seamlessly integrating color, typography, and content.
- High-Fidelity Presentation: Deliver a polished, high-fidelity website that represents unity in its composition.
- Customer Journey Clarity: Ensure a clear understanding of the user’s Journey and the website’s role.
During the redesign process for IDCS’s website, I encountered several challenges. Crafting a navigation system that was both intuitive and comprehensive creates a challenge, as it needed to accommodate a wide range of information without overwhelming the user. Achieving a seamless, responsive design across various devices and screen sizes demanded meticulous planning and testing. Lastly, organizing content in a logical, user-friendly way while also optimizing for search engines was a complex task.
- Focusing on the end-user experience, I guided the navigation improvements, ensuring the layout was intuitive and user-friendly.
- I tested the design across multiple devices. This allowed me to make any adjustments in real time.
- A hierarchical approach to content organization helped me create a logical flow that users could easily follow.
With improving navigation, readability, and overall usability in mind, I am ready to begin creating the user flow. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy to navigate. This stage is about simplicity and clarity, ensuring the user’s journey through the site is intuitive and logical.
I had so many ideas in my head when I started this project. I began designing the wireframes to outline the skeletal framework of a website, focusing on the placement of elements and functionality, which allowed me to understand how users will interact with the website. I wanted to immediately grab people’s attention with a call to action and tell them about IDCS Design and Construction LLC and what they stand for. I also wanted to show off the main things IDCS does. I thought about putting the most important stuff at the top of the homepage and keeping it easy to understand.
The primary issue identified within the hero section relates to the top navigation bar. Following a consultation with my client, they highlighted concerns regarding the menu's lack of organization. Additionally, they noted that certain links fail to direct users to the intended pages, while some pages are non-existent. This results in an unconnected user experience that is frustrating and holds back the website's seamless navigation.
I initiated the navigation bar redesign by integrating the existing company logo and introducing a call-to-action button in the right corner. I aimed to prominently display the website’s specific pages, enabling users to locate the necessary information effortlessly. This approach is intended to foster immediate engagement with the website. The large hero section with an overlaid title and subtitle immediately informs visitors about the company’s focus, where the user can identify IDCS and how it operates. My client and I decided to include the second call to action button, which the user can start by scheduling a consultation. Adhering to the client’s preference for maintaining the established color scheme, I crafted the design utilizing the existing palette.
Scrolling down, the user can see the "About Us" section, which introduces the company's history, mission, and values. This builds trust and credibility. The user can also see the benefits of working with IDCS. This benefits section outlines the advantages of choosing the company's services. When redesigning these parts, I wanted to keep the same colors but make the information more transparent and easier to understand by adding the headline to the benefit section.
Next, I wanted to present the kind of clients IDCS is working with and their strategic partnerships featuring logos of various companies, indicating a solid network of clients and partners. This establishes credibility and showcases the company’s reach within the industry. This section is designed to communicate the company’s commitment to its clients and the strength of its partnerships.
Scrolling down, the user can learn about IDCS's services. I wanted to include this section on the landing page because it is essential to highlight and demonstrate the company's offering, providing a clear overview of the services available and making it easy for users to understand what the company does. I wanted to include photos and call to action links to individual service pages to make the section more engaging and help visitors visualize the services.
Lastly, I finished redesigning the landing page with the Frequently Asked Questions section and added a call to action for users to contact the client. The FAQ section is a strategic addition to a landing page that supports marketing efforts, enhances customer satisfaction, and streamlines the user journey. It assists with common questions and helps improve user experience by addressing common concerns.
In summary, redesigning my client's website's landing page and navigation has been a transformative journey. By prioritizing intuitive design and seamless user experience, I've crafted a digital gateway that captivates visitors and guides them effortlessly through the site's content. The updated navigation system ensures that every user interaction is meaningful and straightforward, increasing engagement and satisfaction. My goal was to create calls-to-action that stood out with unmistakable clarity and to present the website's information straightforwardly and easily understandable for users. Here is the final redesign:
.webp)
Once my client approved the designs, I used Webflow to transform the concepts into a functional website. Using the latest technology, I created a stunning website that engages the audience. Webflow allows websites to be coded visually, managing all the code behind the scenes. Another key feature Webflow offers is a fully integrated Content Management System (CMS), so the design and content changes are just a click away. As my client mentioned at the beginning, managing the website on the previous platform was a bit complicated. That is why they decided to use Webflow, which is more user-friendly and easy to use.
view live website
While developing the website on Webflow, I employed various technical skills that were pivotal in creating a dynamic and responsive user experience. My expertise in responsive design ensured that the website was accessible and aesthetically pleasing across various devices and screen sizes. I leveraged Webflow’s robust interactions feature to introduce subtle animations that guided users’ attention and enhanced the site’s interactivity.
Additionally, I utilized Webflow’s integrated CMS (Content Management System) for my client to manage content. This addressed their primary concern with the previous platform, making updates easy and efficient.
Here’s what the client has to say about our journey together and the impact of our work. This feedback reflects the dedication to excellent work and commitment to creating meaningful digital experiences that resonate with users and drive business success.
.webp)
In this project, I applied my expertise in web layout and user interface design to excel in a dynamic visual design sprint, enhancing the aesthetic and functional appeal of the digital experience. It was great redesigning a landing page for a company with such solid and admirable values as IDCS. Through the redesigning process, I wanted to present the information about IDCS and invitingly engage the user.
I look forward to more projects like this, where I can solve problems and collaborate with clients. I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the user's real needs when coming up with design ideas and solutions.