Project Case Study:
Healthper Website Design
Overview
Role: UX/UI Designer | Senior Content Developer | Marketing and Customer Solutions Specialist
Duration: Designed and Developed in 60 days (Fall 2021 - Winter 2022).
Company: Healthper USA, Inc.
Website: www.healthper.com
Scope: Seamless collaboration with the client, providing ongoing support and creative direction.
Project UI Design and Development: Website Re-Design, and transfer design from Figma to Webflow.
Perks: Lots of Coffee Time! ☕️🥳
I worked for Healthper in multiple roles as a versatile designer, handling responsibilities as a UX/UI Designer and Senior Content Developer. I re-designed their marketing campaign assets and structured their website to effectively communicate the company’s programs and highlights.
I delivered a comprehensive set of marketing assets and website re-design user interfaces, transitioning their design from Figma to Webflow. Collaborating closely with the company’s founder, project managers, and engineers, we successfully enhanced the website, resulting in a 10% increase in client engagement.
Problem
Healthper designs branded programs tailored to the unique culture and aspirations of their clients, focusing on workplace initiatives that target the health concerns of various groups within the workforce. Known as well-being architects, they excel in delivering maximum engagement through targeted well-being programs. However, their website was outdated and did not align with the preferences of the Gen-Z audience, hindering their ability to effectively communicate their value proposition to a younger demographic.
Pain Points
Outdated Website Design: The existing website did not reflect contemporary design standards or the interests of the Gen-Z audience.
Poor User Experience: Navigation and content presentation were not user-friendly, resulting in a low engagement rate.
Lack of Modern Features: The website lacked modern features and interactivity that could enhance user engagement and satisfaction.
Solution
As the UX/UI designer at Healthper, I redesigned their website to align with Gen-Z expectations through iterative wireframing, prototyping, and user testing. I delivered a full set of UX/UI designs, an expandable design system, and a fully functional website on Webflow. The redesign presented Healthper’s programs in a structured and visually appealing manner, leading to a 25% improvement in user satisfaction and a 10% increase in client engagement.
Work Progress Management
1. Research and Planning
-
Collected all required assets and content from clients.
-
Confirmed all writing materials with the client.
-
Reviewed and revised the present website for design and content.
2. Sketching and Wireframing
-
Sketched the new UI layout and created wireframes for the website.
-
Held meetings to discuss questions and gather client feedback.
-
Identified missing information and new features to include on the website.
-
Conducted brainstorming sessions to explore new design ideas.
User Flow
Visual Design Direction
Home Page
-
Designed to be clean, modern, and visually engaging, with a focus on easy navigation and clear communication of Healthper’s core services and values.
-
Modern and visually appealing design with clear navigation and user-friendly interface.
3. Digital Design & Prototyping
-
Developed digital wireframes and high-fidelity mockups on Figma, incorporating all approved assets and actionable elements.
-
Conducted final product testing, incorporating feedback into the design.
-
Transferred the design to Webflow, ensuring all elements were functional and polished based on user and client feedback.
4. Launch and Post-Launch
-
Launched the live website on Webflow.
-
Monitored the website’s performance and user feedback to ensure smooth operation.
Program Showcase
Structured layout presenting Healthper’s programs in an organized and visually appealing manner, enhancing user understanding and engagement.
Organized layout with easy access to detailed information on Healthper’s programs.
Reflection on Tools and Project
The redesign of Healthper USA Inc.'s website successfully aligned with the expectations of the Gen-Z audience, enhancing both user experience and engagement. By leveraging a structured design process, extensive user testing, and a focus on modern aesthetics, the project delivered a website that is not only visually appealing but also highly functional. The redesign led to a 25% increase in user satisfaction and a 10% boost in client engagement, reaffirming Healthper’s position as a leader in workplace well-being solutions.
Project Experience
User-Centric Design: Emphasized user feedback and iterative design.
Collaborative Environment: Effective teamwork with developers and stakeholders.
Challenges Overcome: Balancing feature requests, user adoption, and scalability.
Tools Utilized
Figma and Adobe XD: Facilitated collaborative design and prototyping.
User Research Tools: Google Forms, Zoom, Google Meets for user interviews.
Project Management: Trello for task management, Slack for communication.
Prototyping Tools: Figma, Miro for interactive prototypes.
Interactive Features
Integrated modern UI elements and interactive features, such as animations and hover effects, to enhance user experience.
Engaging UI components, animations, and hover effects to enhance user interaction and satisfaction.
