explorers
explorers copied to clipboard
netlify
Show a users' of achievements on the profile page
A logged in user has access to a profile page:
https://explorers.netlify.com/profile
Once they have attained their first achievement, this should include a list of their achievements including either:
- Mention of the reward the've earned if a reward is associated, with a call to action to claim the reward
- An indication that their reward has been claimed
@lsell We'd love to get a little design help with this task. We're not looking to redesign this profile page at this stage (although we can evolve it over time) but instead we'd like to add an achievements section to the page in a similar format to the Your Courses progress section. Could you help us with the visuals of this?
Here's a visual output of the said achievement section. Except we need it to look so much better 😄
Although I like positioning this in the sidebar under the certificate progress, the need for flexible text there, and the amount of likely text made it a little incompatible with the narrow element and the centered text. So I've "designed" this as a another component in the body of the profile page.
Here you can see three variants:
- with a claimed reward indicator
- with a "claim reward" CTA
- with no associated reward
Also note the ability to include descriptive text for each achievement which might include markup for the purposes of including links.
All text styles and alignments are taken from the "Your Courses" component.
The notification nude in the menu bar should also use the same device/asset which is echoed in the achievements listing in the profile page. Here's a design for that.
The rosette icon used i both places is available as an SVG. And linked up in slack
https://netlify.slack.com/files/U1U80996Z/F01PQN3PY1M/rosette.svg
Small iteration of the achievement / rewards display to accommodate the representation of a reward code.
Where the reward is for a specific item in the swag store, we should include a link to that item along with suitable instructions of how to redeem this code. I've taken a stab at that language here.
