About
Hppy is a responsive web app that is data driven. It provides a platform where managers and department heads can gain insight on how their employees feel about their work environment, as well as employees are able to anonymously express themselves regarding their work. This platform collects the data from employees through surveys and creates reports through sentimental analysis which allows the managers and department heads to make informed decisions for their employees’ satisfaction.
In medium to large companies, there is usually a disconnect between the managers and employees. In this type of environment, employees are not able to report an issue without feeling like they are jeopardizing their employment key performance indicator.
In 13 weeks, my team and I conceptualized this idea to reality, from brainstorming to the final product.
Design Process
By implementing human-centered design thinking throughout the design process, I center my focus on the specific user and their context. This approach enables me to comprehend and address underlying issues effectively. I accomplish this by implementing incremental interventions and consistently prototyping while conducting tests to ensure that the solutions effectively meet users' needs.
User Research
As a UX designer, I engaged in research to gather users' feedback through surveys, which aided me in defining problems. I organized and presented these insights as user stories, blueprints, and user personas. Subsequently, I crafted user flows to address varying user needs and developed information architecture to guide wireframe design.
Persona
Employee
Head of Department
Admin
The Problems
According to the experiences of the interviewees, we have discovered a widening divide between employers and employees, where the latter saw themselves as nothing more than cogs in a much larger machine. Employee satisfaction has become the key to retaining talented employees. We believe it is the right time to take away the “boring” out of surveys and make them interactive.
Disconnect
Disconnect between managers and employees in medium to large companies.
Fear
Report issues may jeopardize employees' key performance indicators.
High resignation rate
Turnover risk is high among knowledge workers in all of the countries included in Future Forum’s survey, with the U.S. leading the way at 63%.
The Solution
Hppy is a responsive web app that is data driven. We provide a platform where managers and department heads can gain insight on how their employees feel about their work environment, as well as employees are able to anonymously express themselves regarding their work. Our platform collects the data from employees through surveys and creates reports through sentimental analysis. This allows the managers and department heads to make informed decisions for their employees’ satisfaction.
Blueprint
The project blueprint facilitated the team's comprehension of user concerns and issues addressable through platform features. This understanding guided the team in delineating project goals, scope, prioritized features, and necessary team actions for the upcoming phases.
Market Analysis
Market analysis not only helps us gain a deeper understanding of competitors' strengths and weaknesses but also provides a clear positioning for how Hppy can stand out among similar products through effective marketing strategies.
User Flow
Hppy encompasses three distinct user roles: employees, admin, and HODs (Heads of Departments). While crafting the user flow, we meticulously defined pathways for each role to fulfill their respective objectives. This approach not only guided the development of role-specific components but also fostered the creation of versatile elements applicable across various sections, resulting in significant development cost savings.
Wireframes
HOD and Employee - Daily Survey
HOD and Employee - Weekly Survey
Admin - Request
Admin - Report List
Admin - View Report
Admin - Create A Survey
Notification
My Account
Usability Test
I conducted user testing with casual users to gather feedback aimed at significantly enhancing product designs. The insights derived from observing Hppy's user interactions proved invaluable. Notably, I discovered that Hppy's interface is intuitive and user-friendly, facilitating seamless task completion. However, a noteworthy observation was that users sometimes encountered confusion regarding successful content submission after form submissions. To address this, we enhanced the interface by incorporating a pop-up notification at the top of the screen to provide users with immediate confirmation.
Mockups
Daily survey
Within Hppy, the platform features two pivotal survey types: the Daily Survey and the Weekly Survey. Upon user (employees and HODs) login, the unobtrusive Daily Survey promptly appears on their homepages, boasting an intuitive and minimalist layout.
Weekly/Monthly Survey
The Weekly and Monthly Surveys offer a more detailed assessment compared to the succinct Daily counterpart.
Admin-Request
Request list is the main screen for admin users, these requests are from HODs, they can request a customized survey or a customized report.
Admin-Report list
WAdmin report list screen is for admin to review the reports generated by system based on the data collected from survey.
Admin-View report
View report is for admin to review the reports, also they can modified its content in order to meet HODs request, after that the reports will be sent to HODs.
Admin-Create report
In created survey page, admin can created any survey based on requirements to get employees insights.
Notification
Notifications is where users can receive new survey reminders and other system messages.
Account
Account is for admin users edit their personal information, users like employee and HODS do not have the permission to edit it.
Branding
Hppy is made for improving employee satisfaction. Our team’s goal is to create an environment for the employee to thrive and be happy. The inspiration for this logo is I wish Hppy could be like a chain connect the company's management and employees. So I modiefied the chain to the letter "H" completed the logo.
UI Kit
As a UI designer, I handled various tasks to enhance the project's look and feel. I created the UI kit, designed the logo and colors, and made sure they're used consistently. I also worked on UI elements and mockups for a smooth interface. Additionally, I designed the marketing page, social media visuals, project proposal, and presentation slides to effectively communicate our project's goals and value.
Typography
As Hppy’s pilot is mainly focused on tech companies, so we want the font could have tech vibe while has good readability. Therefore, we choose Titillium Web as project font sicnce its square shapes give a slightly technological vibe, but not so overt that it can’t be used for design work outside of that spectrum. In addition to that, Titillium Web is a variable font which provides a wide variety of weights & styles.
Buttons/ Input field/ Search
4 sates of buttons, input field and search bar are used in Hppy to guide users to make an operation or a series of operations. Click a button will trigger corresponding result.
dropdown list/ checkbox/ radio button and dialogue
Enabled, hover, clicked/active and disabled, these 4 states are also applied on dropdown list, checkbox, radio button. While dialogs are used in Hppy to inform users a task. A dialog could contain critical information, require users to make decisions or involve multiple tasks.
Iconography and Illustration
Carefully crafted icons and illustrations have the ability to offer users an intuitive guide to completing tasks.
Reflections
Hppy has given me a valuable chance to grasp the significance of components and accessibility in web/mobile design and development. When I using Figma, components were merely combinations of repetitive elements. This project bridged the gap between design and development, illustrating how designs are implemented on the backend. Practicing making the mental model under four principles will give me a neat structure at the beginning of designing a website. It is also a cost-efficient way to develop.
In website and app design, impeccable accessibility practices are paramount. Hppy, designed for collecting company feedback, demands an intuitive and user-friendly solution for all employees, regardless of their physical conditions. Designers should establish a fitting solution structure, implement suitable styles, labels, captions, and descriptions, and consistently consider potential user limitations. Strategies must be devised to address and alleviate such issues as comprehensively as possible.
Accessibility isn't solely for permanent disabilities; it encompasses temporary loss of capabilities and any limitations that arise when using a device. Our responsibility is to anticipate various usage scenarios and proactively address them, ensuring uninterrupted access to applications.