Nutrition Solutions for Rare Metabolic Disorders

UI/UX Redesign and Front-end Development

For web

Nutrition Solutions for Rare Metabolic Disorders

UI/UX Redesign and Front-end Development

For web

Nutrition Solutions for Rare Metabolic Disorders

UI/UX Redesign and Front-end Development

For web

About

The project involved a leading company specializing in medical nutrition products for individuals with rare metabolic disorders. Their primary focus is providing dietary solutions for conditions such as Phenylketonuria (PKU), intractable epilepsy, and severe food allergies. The company offers a variety of products, including unique protein formulas for PKU and low-protein foods and hypoallergenic formulas.

About

The project involved a leading company specializing in medical nutrition products for individuals with rare metabolic disorders. Their primary focus is providing dietary solutions for conditions such as Phenylketonuria (PKU), intractable epilepsy, and severe food allergies. The company offers a variety of products, including unique protein formulas for PKU and low-protein foods and hypoallergenic formulas.

About

The project involved a leading company specializing in medical nutrition products for individuals with rare metabolic disorders. Their primary focus is providing dietary solutions for conditions such as Phenylketonuria (PKU), intractable epilepsy, and severe food allergies. The company offers a variety of products, including unique protein formulas for PKU and low-protein foods and hypoallergenic formulas.

Process

  • Discovery

  • Ideation

  • Design

  • Development

  • Developer handoff

Team

  • 1 Project manager

  • 5 Developers

  • 1 QA

  • 1 BA

  • 1 UX UI designer

My Role

  • UI development

  • UX design

  • UI design

Tools and Technology

  • HTML/CSS

  • Bootstrap

  • Figma

Process

  • Discovery

  • Ideation

  • Design

  • Development

  • Developer handoff

Team

  • 1 Project manager

  • 5 Developers

  • 1 QA

  • 1 BA

  • 1 UX UI designer

My Role

  • UI development

  • UX design

  • UI design

Tools and Technology

  • HTML/CSS

  • Bootstrap

  • Figma

Process

  • Discovery

  • Ideation

  • Design

  • Development

  • Developer handoff

Team

  • 1 Project manager

  • 5 Developers

  • 1 QA

  • 1 BA

  • 1 UX UI designer

My Role

  • UI development

  • UX design

  • UI design

Tools and Technology

  • HTML/CSS

  • Bootstrap

  • Figma

My Role

I was responsible for both UI/UX design and front-end development. My involvement included creating and refining the user interface and actively participating in the development process.

Problem

The client, operating in the medical nutrition industry, had an existing store on WordPress. Due to platform limitations, they decided to transition part of their business to a custom-built site. They required a fresh UI design for the new site, ensuring consistency with their existing WordPress design system. The goal was to use a WordPress-developed landing page to redirect users to the new custom site while maintaining a cohesive look and feel and introducing an updated interface.

Outcome

The transition from WordPress to a custom site was successfully completed, maintaining a consistent design system and introducing a fresh, updated user interface. The new design preserved the familiar look and feel, ensuring a seamless user experience when redirecting from the WordPress landing page to the custom site. This approach addressed the limitations of the WordPress platform, enhanced client satisfaction by providing a modern, intuitive interface, and improved performance, user navigation, and accessibility. Ultimately, the project supported the goal of better serving customers with specialized medical nutrition products.

Process overview

  1. Initial Stages: We conducted requirement-gathering meetings with the client to thoroughly understand their needs. Based on these requirements, we created low-fidelity wireframes and iterated on them according to client feedback.


  2. Design Phase: After finalizing the requirements, we focused on both web and mobile responsive design. A working prototype of the application was developed and presented to the client for feedback. Necessary iterations were made based on this feedback.


  3. Front-End Development: We began front-end development, providing regular demos to the client and their team. Feedback was collected continuously, which caused some delays as each round of feedback required restarting the UI design and prototyping process before continuing with development. These challenges were accounted for in our timeline.

Future Work

Current Scope

  • Deploy the product to production.


Future Development

  • Gather feedback from end users post-launch and implement necessary improvements based on this feedback.

USMAN DAWOODI © 2024

EXPLORE

mail.usmandawoodi@gmail.com

mail.usmandawoodi@gmail.com

USMAN DAWOODI © 2024

EXPLORE

mail.usmandawoodi@gmail.com

mail.usmandawoodi@gmail.com

USMAN DAWOODI © 2024

EXPLORE

mail.usmandawoodi@gmail.com

mail.usmandawoodi@gmail.com