App & Dashboard
Deboost
Deboost is an employee engagement and motivation platform that
combines several powerful features to drive employee satisfaction and performance.
App & Dashboard
Deboost
Deboost is an employee engagement and motivation platform that combines several powerful features to drive employee satisfaction and performance.
Overview
Deboost Offers an e-wallet that is tailored to reflect the organization’s brand, providing employees with a convenient and secure way to manage their rewards and incentives.
When Assaf Binstock (Founder & CEO) and Eyal Arbabof (CTO) reached out to me, they had nothing but an idea in their heads but the initial pitch was simple: Let’s build a platform for turning work-related goals into engaging challenges that encourage employees to excel.
This was a project of a solo designer so I led the end-to-end design of both web and mobile experiences.
My Role
UX, Design Research, Visual Design, Prototyping
Team
Moti Yahalomy, PM
Timeline
Mar 2023 – Aug 2023
Highlights
A web and mobile platform designed to motivate employees to engage in workplace challenges and win rewards.
0.1 Review user flow
0.2 Showcase of web screens
0.3 Data visualization of budget management
0.4 Dashboard user table of challenges management
0.5 Employee management
0.6 Showcase of questionnaire screens
Context
Highly motivating interface
work-related goals
Deboost strives to create a platform leading to increase productivity in workplaces and overall success of the employee’s performances.
The platform is divided to 2: Application (Web + Mobile), and a management system (Dashboard).
Dashboard (User: HR)
The dashboard would be managed by the
organization, enabling the creation of engaging challenges.
Web & Mobile App (User: Employee)
The app would include the challenges that
the HR implemented with the prizes given for participation.
1.0 User Persona (HR)
Mapping the journey
Mapping the key touchpoints, interactions, and emotions users will experience from start to finish – This would be the backbone of the experience created by the design.
1.1 User journey map (employee)
Problem Statement
A 4 month dealine
Deboost gave us a short deadline due to the need to sell the product as the Start-Up is at the stage of Pre-Seed financing.
Low budget project
Naturally, the young company didn’t have a big budget so I could only dream big but accomplish little. In terms of development, the meaning was that I had to be careful with interactions and expensive features.
1.2 Project process within timeline
Quality control
A white-label product
The three “C”‘s
Customization
This would be a self-customized product, means that the client is rebranding the design – something I had in mind always.
Consistency
It’s essential to ensure that the core functionality and usability of the product remain intact, even with different branding.
Configuration
A flexible and modular design that can accommodate a wide array of features and configurations.
The three “C”‘s
Customization
This would be a self-customized product, means that the client is rebranding the design – something I had in mind always.
Consistency
It’s essential to ensure that the core functionality and usability of the product remain intact, even with different branding.
Configuration
A flexible and modular design that can accommodate various features and configurations.
1.2 A showcase of different brands displayed on the Homepage
End user - employee
Crafting employee experiences
A smooth and clear path
A simple entrance to the app is critical, taking in count that employees may not want to invest significant effort in the sign-in process.
Furthermore, a password management is unnecessary as the employees are linked to the system with their phone numbers – this ensures a hassle-free experience.
2.0 Mobile sign-in
Insight
Creating a sense of community can be achieved by incorporating images or user avatars which trigger “the crowd effect” motivating users to actively participate in the challenges.
A journey of discovery
The homepage offers a visually engaging and user-centric interface, showing the user’s current credit in his “wallet”, and designed to encourage user engagement with challenges, activities, and rewards.
The web version of the app holds a persistent left section for a quick overview of their earned rewards and purchases through the app.
It also provides users with quick access to further information like the participants list, challenge details and more.
3.0 Mobile homepage
3.1 Web homepage with balance overview
Will you accept the challenge?
The challenge details drawer is a comprehensive view that provides users with all the necessary information to engage with a specific challenge.
The “who’s participating” section displays user profiles or avatars of participants, creates a sense of community and encouraging users to join in.
4.0 Challenges page + challenge overview
4.1 Challenges page – desktop
End user - HR
Fun also needs to be managed…
Open new organization
The page for opening a new organization in a dashboard system focused on simplifying the process and reducing user friction while maintaining data accuracy and security.
On this page, the HR configures the interface settings, including color schemes and defines the permissions for editors.
5.0 New organization page
5.1 Permissions section
Create a challenge
Challenges can be created easily in a one page process, providing a preview section of the challenge appearance in the app.
6.0 Create challenge page
6.1 Additional settings when scrolling
Metric’s overview
Customizable dashboards with visualizations, charts, and graphs are essential for a seamless user experience, providing a simple overview of the employee data and challenge tracking.
The tables and charts allow the HR to oversee and control financial resources effectively.
7.0 Budget managing page – shows the budget spent yearly/monthly
7.1 Challenges page – allows monitoring processes and approval of rewards
7.2 Employees page – tracking employee performances
7.3 Redemption – overview of the categories by popularity
The meeting point
The meeting point between an employee and their employer is facilitated by a questionnaire designed to identify needs in the workplace. This allows to gather valuable insights for improved work conditions.
8.0 Upon the first app entrance, the employees point out their crucial topics
8.1 The HR can define subjects for the questionnaire and re-order them
Visual design
Building a design concept
Style Guide
The style guide was based on Deboost’s two brand colors, which will be the methodology of the system’s customization. Each customer would define their own two main brand colors (Primary + Secondary) and the design would change accordingly to reflect their branding.
Colors
#FE2A66
Primary
#042965
Secondary
#161E41
Tertiary
#A7C9FF
Quaternary
#F5F6FC
Quinary
#FE2A66
Primary
#042965
Secondary
#161E41
Tertiary
#A7C9FF
Quaternary
#F5F6FC
Quinary
#FE2A66
Primary
#042965
Secondary
#161E41
Tertiary
#A7C9FF
Quaternary
#F5F6FC
Quinary
Typography
Rubik
א ב ג ד ה ו ז ח ט י כ ל מ
נ ס ע פ צ ק ר ש ת ץ ם ן
Iconography
Iconography
Spacing & sizes
Margin & buttons
The space between elements and their proximity is defined 24px, as well as side margin (vertical & horizontal). A double margin would be used when the user is requested to move on to the next action (CTA buttons).
Buttons and fields height are defined 60px to allow easy tapping.
Padding & spacing
The space around the content and between the borders inside a content box would be 16px to ensure sufficient proximity between the elements for them to be perceived as a group.
Iconography spacing
Icon container is 24X24 and located inside a rounded frame sized 40X40. This would enable icons to be laid out consistently with other components like the avatars.
Components
Data Visualization
Working on a white label product
Maintaining a consistent user experience required creating a set of components that can be easily customized and rebranded.
Cross-platform compatibility
designing the same product on different environments helped to learn the differentiation in the design approaches for each case.
Accessibility standards
By taking count of different colors I learned to implement accessibility standards and ensuring the design complies with regulations.
Working on a white label product
Maintaining a consistent user experience required creating a set of components that can be easily customized and rebranded.
Cross-platform compatibility
designing the same product on different environments helped to learn the differentiation in the design approaches for each case.
Accessibility standards
By taking count of different colors I learned to implement accessibility standards and ensuring the design complies with regulations.
Next project:
Ichilov Hospital
Self-service digital kiosk for emergency room check-in.
Ichilov Hospital
Self-service digital kiosk for emergency room check-in.
