Custom Achievements

References

I found some examples of customization flows that were similar in nature. These served as an initial reference for my explorations.

Wires

I proposed these two wireframes, along with the references above, to the product manager and design manager (stakeholder) to get some initial thoughts on approach and direction.

Explorations

With approval to move forward, I put together some options, got feedback during critique, and iterated. These are the 4 designs we discussed:

To create an achievement, an admin would need to decide on a few details:

1. Name (what to call it)
2. Shape
3. Color
4. Text to embed within the badge
5. Icon to embed within the badge

These specifications were based on the default achievements the design team had already created a while back.

To simplify implementation (and to keep achievements consistent for now), we decided to make each field required. So in order to successfully create an achievement, the admin would need to see and complete each step of the process.

We were planning to use inline error messages to help facilitate this experience, but of course, we still wanted the flow to feel as intuitive as possible in hopes of avoiding any error messages in the first place.

Icon Selection

We needed a simple way for admins to add icons to their achievement badges. We wanted to include an image upload field for maximum flexibility. We also wanted to provide a default set of icons to make it easy for admins to create their first few achievements – or to at least serve as inspiration.

Of course, when letting users upload their own images, there is little we can do to ensure "quality." I included some general guidance for image format and dimensions, but ultimately, even a high-resolution, transparent PNG can look out of place if the uploaded image style and/or colors do not complement the badge style and color.

For the default icon set, we quickly ruled out using emojis because the style and color of emojis would not look good against our base badge designs. We wanted to use simpler icons whose color we could adjust to match the user's badge color selection. The obvious solution was to use Font Awesome, our existing icon library.

Ideally, we would have liked to let users browse, search, and filter the full Font Awesome icon library. But in the interest of time, we decided to start with a simpler approach that would not introduce too much added complexity to the UI. So instead, I selected a handful of potentially versatile and relevant icons from which the user would be able to choose.

A Quick User Test

Based on the feedback I received during critique, I created Figma prototypes for options A and B. I then conducted an informal, moderated usability assessment. I asked four internal colleagues who were unfamiliar with this feature to complete a task (i.e., create an achievement) using both prototypes. To mitigate some bias based on order, users 1 and 2 saw option A first, then option B; and users 3 and 4 saw option B first, then option A.

Results

Overall, both designs were well received and users were able to accomplish the task successfully with little confusion or error. However, it became clear that option A had an unnecessarily high interaction cost associated with tabbing between sections. If a user progressed through the sections and wanted to go back to change something, tabbing back and forth was a little annoying.

I do believe that progressive disclosure can be an effective way to help users complete a task, especially if each step is independent and/or complex. In the case of these designs, however, neither of these factors seemed to be relevant.

Option B allowed users to complete the task a little quicker. One user also reported that it was nice to see all the fields and selections together in one view because it made it easier to see exactly what was involved in the creation process at a glance.

We decided to move forward with option B.

Error Handling

As mentioned earlier, for the initial release of this feature, we decided to make every field required in order to create a custom achievement. I also decided to keep the "Create" button enabled by default. This meant that most fields would need to support an error message in case the user attempted to prematurely create the achievement. Shape and color fields would not need an error message, however, because an option would be selected by default without the ability to deselect.

For text input fields, we also had a standard way of providing some leeway to users when typing against the character limit. If the user hit the character limit, we did not prevent further input. Instead, we allowed them to exceed the limit and we displayed an error reinforcing that they need to adjust their input.

Management

We needed a page in the platform where admins could view and manage all the custom achievements in their workspace. This would also serve as the entry point for the creation modal.

I put together a simple design that used some existing patterns and conventions that we had implemented in other parts of the platform.

User Profiles

We already had a section on user profiles dedicated to displaying achievements since we had already implemented the default, automated achievements previously mentioned. I did not see a need to make any drastic changes to this section, as it was already pretty scalable. The only necessary change for this iteration was adding a way for admins to assign/award an achievement to the user whose profile is being viewed. We already had a pattern established in these profile cards for incorporating a CTA, so the solution was pretty straightforward.

Add More Profile Categories

When we launched this feature internally, we started off using it as intended: as a way for the company to acknowledge the larger, more meaningful accomplishments of individual employees. But soon after, people started using this feature to highlight other types of accomplishments as well. While not exactly our intent, this provided some useful insights.

Ideally, I did not want this feature to become a catch-all solution for highlighting anything and everything. I figured this would dilute the significance of receiving this kind of achievement. However, by witnessing this broader usage, we were able to see where some of the gaps were.

For example, it became common to use this feature to showcase courses and certifications that employees had recently completed or earned – courses such as those about generative AI, LLMs, and related topics; and certifications such as PMP, CompTIA Security+, and AWS Cloud Practitioner. We had not yet implemented a unique profile category for this type of data, but with the emerging excitement and curiosity around AI, and tech workers taking the time to learn more about these advancements, we figured we should probably bump up the priority of this new profile category.

Add More Icon Flexibility

As mentioned earlier, we wanted to add the ability for users to access the entire Font Awesome library when selecting badge icons. This would lower the bar for creating new achievements.

Depending on feature adoption, there could also be value in exploring additional image editing capabilities when the user opts to upload their own image. For example, allowing the user to convert their image into a monotone that better matches the badge color they selected. This could also help promote more visual harmony across the workspace with better-looking achievement badges.

Investigate support for recurring achievements

Some achievements are confined to a specific period of time. For example, a company might want an "MVP of 2023," "MVP of 2024," etc. Or perhaps even more granular than that, such as by quarter. Over time, these recurring time-based achievements might clutter the experience and be difficult to manage. It would be worth exploring how to better support this. Should all the time-specific achievements roll up under a time-agnostic achievement? Is there a better way to visually represent the time component?

Include the default achievements

Default, automated achievements were initially omitted from the scope for simplicity, and because users were not yet able to modify them in the platform. However, it makes sense to represent them on the page.

Improve Feature Awareness, Education, and Usage

• How might we encourage adoption and usage?
• How might we encourage company leaders to give achievements?
• How might we encourage employees to share and interact with achievements?
• How does this feature continue to differentiate itself from bravos and any other similar employee recognition features we add in the near future?

These were some of the considerations and questions we wanted to continuing asking as more data rolled in.