Revamped design for the employee recognition platform

{{problem-solution}}

{{services-provided}}

The client

About the client

Praiseworthy is an employee recognition platform that allows anyone in or outside an organization to share positive feedback and, ultimately, create a pleasant workplace within a team. Being the only Individual Feedback Management software focusing on personally reviewing employees, Praiseworthy fosters a culture of appreciation to boost performance within a company. Implementing such a platform into your workspace can have a profound impact on the business’s overall success, well-being, and reputation.

Client’s results

Praiseworthy works with over 1300 locations to help them improve employee training one interaction at a time. By adopting an employee-friendly approach of feedback sharing, the company has achieved great results, surveying over 2 million customers per year.

<div class="case__rich-result">
<ul>
<li>2M+ Surveyed customers per year</li>
<li>1300+ Integrated locations</li>
</ul>
</div>

Project outline

App design

Our main challenge was to work on the app’s design for a client who already had an MVP. However, they sought to elevate the app’s appeal and introduce additional features. To make the application more user-friendly and visually intuitive, we worked on the UX in detail and tested various scenarios and flows — from button interactions to subscription plans and user sides.

‍
Our team aimed to strike a delicate balance between simplicity and visual interest, ensuring that the app captivated users without overwhelming them. To achieve this, we carefully integrated textures into specific elements, aligning with the established branding while avoiding excessive complexity. We also implemented additional features, including category search to enable seamless navigation and diverse avatar options and created a comprehensive UI Kit to collect all the components and their specifications.

Visual style

Super-friendly design aesthetic

In our design approach for the Praiseworthy app, we aimed to showcase the delightful emotions associated with receiving praise. By seamlessly integrating images of people and UI elements, our team helped the client to create a stronger connection with users. We also incorporated round illustrated stickers as an alternative to traditional UI elements, infusing more playful feelings into our design. Texture shapes and doodles further contribute to the brand’s humanistic character, adding a personal and friendly touch to the overall aesthetic.

Playful accents

Character avatars and illustrations

As icons are a universally understood way to express emotions and ideas, we incorporated a diverse range of character avatars and illustrations into the Praiseworthy app. With a goal to create a lively and immersive environment, our team also added them into banners, pop-ups, and the Login/Sign up pages. Collectively, these elements contributed to a visually captivating experience for users within Praiseworthy.

‍
Ultimately, our team significantly enhanced and streamlined the functionality of the app, taking it from its initial MVP stage to a polished and refined version.

SaaS website

Digestible and efficient site

Our primary goal when designing the Praiseworthy website was to highlight the app’s ease of use. So the Halo Lab team focused on creating a sleek and concise layout, with a strong emphasis on showcasing the app’s user interface elements. We incorporated subtle animations to bring these elements to life, allowing users to see them in action. To enhance the user experience, we strategically integrated illustrations throughout the website, showcasing the platform’s functionality. Careful attention was given to ensure that the illustrations were not overly complex, but rather, conveyed the purpose and functionality of each feature in a clear and straightforward manner.

Logo

Distinctive mix of typography and symbolism

For Praiseworthy, we created a wordmark & sign that together embody the concept of the “praise message”. It combines three elements: the initial letter of the wordmark, the message cloud, and the smile that emanates from the message. Drawing inspiration from the client’s sketch, our designers refined the symbol to concise proportions, ensuring its visual impact and clarity.

Family types

Harmonious typography

To enhance the visual appeal of the platform, we carefully selected two fonts: MacPaw Fixel Text and Lora. Fixel boasts open letter forms, generous width, sharp edges, and a low contrast, creating a visually pleasing and distinct look. On the other hand, Lora, a serif typeface inspired by calligraphy, offers a well-balanced design. Considering the abundance of textual information on the page, we implemented a clever combination of these fonts within the app. Our designers utilized the serif typeface for titles to emphasize key elements, while employing a sans serif font for general text to optimize readability.

Vibrant colors

Perception-based color palette

By utilizing a mix of darker and lighter shades derived from the brand’s color palette, we established a captivating gradient anchored by a deep green background. These greens take center stage as primary colors for CTA, accents, and success states, while additional hues such as yellow, red, pink, purple, and blue enrich the app’s visual elements like fonts, icons, avatars, and illustrations. Furthermore, our team assigned red, yellow, and blue to represent error/danger, warning, and info states, adding clarity and distinction to the user experience.

Final line

Praiseworthy wrap-up

With a keen eye for detail and constant support from the client, our team elevated Praiseworthy’s app and website experience by implementing numerous enhancements, functional components, and design solutions. We also successfully boosted their corporate identity, enriching it with a cheerful smiley logo, warm colors, modern typography, charming icons, and human-like illustrations.

‍
Our work culminated with the creation of a comprehensive UI Kit to collect all the components and their specifications that we utilized for both the MVP and the future version of the app, which will encompass even more functionality.

What’s a Rich Text element?

What’s a Rich Text element? sdffgdfgfghfgh

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

• Sdfdfg
• Dfgdfgfdg
• dfgdfgfd
• Dfgdfg

dfgdf gdfg dfgdfgidfgiudf gdf ugidfugidf ugid

• dfgfdg
• dfgdfg
  dghjghj
• dfgdfg
• dfgdfg

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

1. 01 dfgdfgd
2. 01 dfgfdg
3. 01 dfgdfg
4. 01 dfgdfg

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.