Web Design

ERPHealth

Project Overview
ERPHealth is a med-tech startup specializing in outcoming tracking technologies for the behavioral health industry. Our goal was to redesign the company's website to reflect their new company structure and product offerings, while updating and enhancing the brand's visual appeal. This was a long-term project.
My Contributions
Role: UI/UX Designer.

Team: This project was lead by ERPHealth's Chief Marketing Officer. The team included me as UX/UI Designer working hand-in-hand with a Wordpress Web Developer and Quality Assurance Specialist.

Tools: Relume, Figma, Wordpress.
June 2023 - December 2023

Web Design: overview of various page

Project Objectives
  • Custom Website Design: Craft a user-friendly and visually appealing website that not only showcases ERPHealth's new company and product structure but also embodies the brand's personality, values, and commitment to exceptional user experiences.
Process
  • Kick-Off Meeting: At the start of this project the team met to outline our goals and discuss best methods of implimentation. It was decided that we would start on a new site instead of trying to update the old site after a quick audit revealed that the old site had already gone through a number of updates by different developers. To save time and ensure a cleaner deliverable, we determined which sections of content could be moved over and repurposed and which could be scrapped. We also discussed what the architecture for the new site might look like based on the company's goals.
  • Site Mapping: Once we had a clearer idea of the company's structure, product offerings and audience, I went to work outlining the information architecture of the new site. Once this more general outline was signed off on by the project lead, I further developed that outline into a site map, including a breakdown of the different sections on each page.

Site Mapping using Relume

  • Low-Fidelity Wireframing: Once our stakeholders had reviewed and signed off on the architecture proposed for the new site, I began wireframing. Using content we had decided was still relevant to bring over to the new site, I was able to plug sections to provide better context as I developed each section.
  • High-Fidelity Wireframing & Prototyping: As I had already worked with the company on the brand and visual identity a year before, the process of creating high fidelity wireframes ran very smoothly. I worked on incorporating more of the brand's design elements into the website, and more sure that text, spacing, icon-styling and color remained consistent throughout with the help of a style guide that I included within the Figma file.

Low-Fidelity Wireframes

High-Fidelity wireframes, reviewed, signed-off, and ready for development.

    • Dev Support: During the planning process we had outlined an implementation plan divided into 3 phases. Each phase included key action items for design, dev and QA testing. Once designs were ready and had been signed off, pages were marked for development. Before development started, I'd meet with our developer and run through the design and answer any questions. During the development phase I made myself avaliable to support where necessary. Once development was complete, I'd review the page and put together a punchlist. After those items were resolved the page was sent to QA where any further issues would be resolved.

      Prototype for the website's hero animation.

      Page sections overview.

      Business cards.

      The home page hero section (still shot).

      Outcome Tracking Solutions for Providers.

      Clinical Corner blog section of website