Michaels House
Objectives: To create a compelling narrative that persuades visitors to take action, to prominently feature a specific treatment program, and to make the phone number call-to-action (CTA) highly visible and engaging.
Role: UX Designer
Duration: 2 Months
The original website's architecture was confusing, with a lot of pages and dead ends. I wanted to trim it down to the essentials, with focused actions. I ensured there were reasonable content and access to each space necessary for users, while having a natural navigational flow. Since this was an extension of an already developed site we opted out of a traditional Information Architecture session and research and proceeded directly into design. Below is a design reference for the new landing page the facility would like replicated.
Information Architecture and Strategy
Research & Discovery
The branding was just taken from what they already had for their original site. A clean, readable font hat conveys professionalism while maintaining approachability was used throughout. I also incorporated imagery of serene settings, supportive staff, and recovery-focused environments to create a comforting atmosphere provided from the facility.
Accent
#479AA4
Primary
#354861
Links & Buttons
#C6521E
Branding
Research & Discovery
A very simple low-fidelity wireframe was drawn up showcasing where the components would best make sense for for best layout. Iterations were made based on client feedback, particularly around making the CTA more prominent.
Moving forward to creating a High-Fidelity mock up, I focused on a clean layout with strong content hierarchy. The top of the page features the phone number prominently next to a headline that communicates Michaels House’s value proposition. The mid-section highlights the program with a supporting testimonial. I used contrasting colors and bold buttons to make the CTA stand out. The highlighted program was given a dedicated section with details, imagery, and a clear CTA. As well as, ensured the page met accessibility standards, including high contrast text and clear, accessible navigation.
The landing page was designed to be fully responsive, ensuring the CTA and key information were easy to access on mobile devices. The simplified navigation and sticky CTA elements ensured that mobile users could easily find the phone number and key information.
Wireframes
Design
The landing page effectively met the client’s objectives, leading to an increase in phone inquiries. While the design process was smooth overall, we encountered development challenges with the image carousel’s interactions due to CMS limitations. I collaborated with the development team to subtly adjust the design, ensuring both functionality and the intended user experience were maintained.
Outcome
Conclusion & Reflections