Helpline Software
Led UX Research, Design, and Implementation of a B2B website leading to a 97% increase in website traffic and a 178% increase in user engagement.
Executive Summary
I improved the user experience of a B2B website selling 24-hour hotline software. Through extensive research, collaboration, and iterative design, I created a user-friendly and visually appealing website.
My key accomplishments include
Conducting thorough UX Research to understand users,
Integrating stakeholder feedback, competitive analysis, and heuristic evaluations to continuously iterate and improve the user experience,
Enhancing information architecture for improved findability and usability.
Improving visual appeal with a clean, user-focused design based on research,
Achieving increased website traffic, enhanced user engagement, and positive stakeholder feedback.
HelplineSoftware.com offers software solutions for 24-hour hotlines.
Responsive B2B Website Design
How it started
I proposed a redesign of my former manager's website to improve its user-friendliness and aesthetics, with the aim of reaching more companies and boosting customer interest.
Project Duration
Completed in 1 month from UX Research to the final product.
My responsibilities
UX research (stakeholder interviews, competitive analysis, heuristic evaluations)
Designing the responsive website through several iterations.
Collaboration with stakeholders.
Implementing the final design using WordPress.
Design process showcasing the iterative stages of user research, ideation, prototyping, testing.
UX Process
I followed a user-centered design process involving researching user needs, ideating potential solutions, prototyping, testing, and validating the design, and iterating on the design to create effective, user-friendly products and experiences based on user needs and research insights.
Overcoming UX Research Challenges
Problem:
Unable to conduct user interviews or usability studies with users (i.e. businesses) due to concerns of the stakeholders about reaching out to their users for a favor.
Solution:
Combine alternative qualitative and quantitative research and analysis methods.
Stakeholder Interviews: Conducted thorough stakeholder interviews to gain valuable insights into expectations and user demographics.
Competitive Analysis: Analyzed competitors' websites, to gather user insights and inform design decisions.
UX Heuristics: Used general UX design principles to check the website's usability, and solicited feedback from stakeholders on the design to ensure it met their needs.
Stakeholder Interviews
Through weekly stakeholder meetings, I gained a holistic understanding of the project’s context and gain valuable insights.
Requirements and expectations: Presented a quick overview of the website and discussed stakeholder feedback and goals.
User insights: Captured user behaviors, preferences, and pain points by gathering stakeholders' input on their target users.
Project scope: Identified specific features and functionalities that needed emphasis to meet stakeholders' goals and user expectations.
Timeline: Agreed to finalize the project before the End Violence Against Women International Conference for attendee access.
Content Consistency: Red circles indicate stakeholder-approved word choices.
SWOT Analysis: Assessing Strengths, Weaknesses, Opportunities, and Threats
UX Competitive Analysis
Evaluated the strengths, weaknesses, opportunities, and threats with the aim of identifying areas for improvement and developing strategies to optimize the user experience.
Competitors
Usability Radar Chart showcasing the evaluation of the website based on usability heuristics. A score of 100 indicates full adherence to the heuristics, while a score of 0 suggests non-compliance.
UX Heuristic Analysis: Evaluating Usability Principles and Identifying Design Improvements.
UX Heuristic Analysis
Main Issues & Solutions
Match between the system and the real world: Simplify language and navigation for better information architecture and design.
Consistency and standards: Maintain consistency in design and layout, use high-quality images, and minimize word usage.
Recognition rather than recall: Use icons and labels to represent functions and options for better visibility.
Aesthetic and minimalist design: Use minimal design and clear typography with clutter-free presentation.
Prioritizing Design Features via UX Research Insights
Boost information architecture: Simplify complex information and the organization and structure of information.
Add "How it Works" page: Show technical details of the service.
Improve mobile layout: Make it more intuitive for users.
Refine the main page: Improve top navigation, concise content, and design for clarity and usability.
Design "We Offer" section: Showcase product features.
Highlight key statements: Improve clarity and emphasis.
Add impact section: Present testimonials and statistics.
Build banner ad: Promote the flash trial offer.
User Flow
Based on the research, analysis, and ideation, I created a simple website scheme with a prominent homepage and easily clickable CTA buttons throughout the website to prompt users to easily schedule a meeting with the business.
User flow for Helpline Software in the improved design
Aligning Stakeholders and Presenting UX Research Findings
Presented UX Research Findings to stakeholders to ensure a shared understanding, gather valuable feedback, determine the next steps, and address any concerns or questions they may have.
Key Feature Sketches: Highlighting the Software offered by the business.
UX Sketches
Researched ideas for showcasing the key features offered by Helpline Software with detailed and interactive presentations.
Created sketches to generate initial prototypes for rapid ideation, which were then refined and transformed into Figma high-fidelity prototypes.
New Design Iteration with High Fidelity Prototype
I improved the usability and aesthetics of the design by conducting thorough research through stakeholder interviews to understand their requirements, competitive analysis to determine industry standards, and heuristic evaluations to identify potential usability issues.
Based on these findings, I made design decisions that were tailored to the user's needs, resulting in a better user experience that is both intuitive and visually appealing.
Before and After: New design implementation in Figma based on UX Research insights.
WordPress Implementation
Implemented the new design in WordPress, resulting in a fully responsive and functional website that meets project requirements and delivers an optimal user experience.
Incorporated feedback from stakeholders and some minor edits, published the website: https://helplinesoftware.com/.
Website analytics summary by Monster Insights.
Design Impact
I utilized the Monster Insights plugin in WordPress to analyze performance metrics over a span of two months. I find
97% increase in website traffic,
178% increase in user engagement.
Figma High-fidelity Prototype
Built detailed and realistic product page mockups with interactive and visual elements to solicit feedback from stakeholders in the high-fidelity prototype stage.