This case study is currently not fully compatible with tablet & mobile displays, please switch to desktop view to enjoy every details of this project.
This case study prefers the grand stage of a desktop screen! It’s not fully optimized for mobile or tablet yet, so please switch to desktop to catch every detail. :)
This case study prefers the grand stage of a desktop screen! It’s not fully optimized for mobile or tablet yet, so please switch to desktop to catch every detail. :)
ProcDNA's Transformation: Website Redesign & Design System
ProcDNA's Transformation: Website Redesign & Design System
Revolutionizing ProcDNA’s Digital Identity with a Modern Website Redesign and a Cohesive Design System to Enhance User Engagement and Brand Consistency.
Revolutionizing ProcDNA’s Digital Identity with a Modern Website Redesign and a Cohesive Design System to Enhance User Engagement and Brand Consistency.
Overview
MY ROLE:
As a UX Designer intern at ProcDNA, a management consulting firm, I led a project to transform and modernize the company's digital presence.
MY RESPONSIBILITIES:
UX Research, Market Research, Design System, UI Design, Prototyping & Testing
PROJECT DURATION:
1.5 Months
(June - Mid July 2024)
TEAM:
Dev Vijh (UX Designer)
Sudhanshu Dogra (Design Manager)
COMPANY OVERVIEW:
ProcDNA, founded in 2020, is a mid-stage management consulting firm specializing in serving clients within the life sciences and pharmaceutical industries.
PROBLEM:
Originally designed and developed on WordPress by a third-party organization in 2022, their website has not been updated since, leading to a disconnect with the company's current offerings and design standards.
OBJECTIVE:
To redesign and update ProcDNA's website, ensuring it accurately reflects the company's current offerings, enhances user experience, and aligns with modern design standards, thereby improving the overall digital presence and engagement with clients in the life sciences and pharmaceutical industries.
Approach
Current Website
UX Audit
UX & Market
Research
Design System
Research & Development
Website
Redesign
Current Website UX Audit
The first step of the website redesign project was to conduct a UX audit of the past two versions to identify existing issues and inconsistencies. This assessment provided a foundation for informed improvements and a more cohesive redesign.
Website Version 1 - UX Audit
Website Version 2 - UX Audit
UX & Market Research
With a tight timeline, we shortened the UX research but still needed to understand our target audience. Interviews with key stakeholders helped identify user pain points and led to the creation of two main user archetypes for the redesign.
Given ProcDNA's position in a competitive management consulting market, analyzing competitors and evaluating their websites was essential. This helped us gather inspiration to ensure the redesign is fresh and modern.
Inspiration Board
Design System Research & Development
The UX audit and research revealed significant inconsistency across elements, colors, icons, fonts, and spacing, caused by contributions from multiple designers. This lack of uniformity underscored the urgent need for a comprehensive design system to ensure a cohesive and polished user experience for ProcDNA.
Unfamiliar with creating a design system from scratch, I extensively researched best practices for developing a button styles, states, typography, color palette, grid system, alignment, and spacing. This thorough documentation laid a strong foundation and provided crucial context for my design decisions.
Based on best practices research, we developed ProcDNA's proprietary design system, named DNA. This system will serve as the backbone for all digital products, ensuring consistency and enhancing the user experience across the organization.
Website Redesign
After establishing the design system, we began redesigning the company’s website. Through extensive user and market research, we assessed our target audience and analyzed current market trends. Conducting UX audits allowed us to identify key issues in the existing website and evaluate its current information architecture. We then made targeted changes to the information architecture to better align with the needs of our audience.
Website's Information Architecture (IA)
After finalizing the information architecture and content structure, we moved on to the website redesign, which included creating new designs for the homepage, solutions page, product page, case studies library, articles library, news library, privacy policy, terms & conditions, contact us, careers, and about us pages, among others. Over the course of five rounds of iterations and design showcase sessions, we gathered feedback and implemented changes to refine the design, resulting in the final version showcased below.
FINAL DESIGNS
Homepage
The homepage introduces ProcDNA, showcasing the company’s mission, team, solutions, and products. It also highlights case studies and articles, offering insights into their work and industry expertise.
About Us
The About Us page highlights ProcDNA’s leadership team, offering insights into their expertise. It also emphasizes the company’s team culture and core values, fostering a sense of collaboration and innovation.
Case Studies, Articles & News
This section compiles ProcDNA’s key resources, including detailed case studies, industry-relevant articles, and the latest company news. It serves as a knowledge hub, showcasing their expertise and success stories.
Solutions & Product Page
The Solutions and Products page details ProcDNA’s six practice areas, highlighting their specialized services and expertise. It also introduces AUXO, the company’s proprietary product, showcasing its features and benefits.
Contact Us & Our Offices
The Contact Us & Offices section provides users with contact details and an easy way to reach out to ProcDNA. It also includes information about the company's locations in India and the US, facilitating communication and support.
4o mini
Explore the complete website redesign by interacting with the prototype version.
Results
ProcDNA's
Design System
Enhanced Website
UI Design
Design
Consistency
Competitive
Advantage
Learnings
Through this project and the internship overall, as one of the first design interns at the firm, I have gained valuable experience not only in design skills but also in collaboration, communication, and project management. Working with a team across different time zones taught me the importance of adaptability and effective coordination. Some of the key lessons I learned include:
- Holistic Understanding of UX Processes
- Ownership and Accountability
- Enhanced Communication Skills
- Strengthened Design Rationale
I'm always happy to discuss this project and my approach in more detail.
View Other Case Studies
