Achievement Inspiration & Ideation
Jump to a section or return to the general Achievements page here.
Inspiration was taken from various images which incorporated somewhat similar features.
- Icons must be representative of the category type
- Considering the art style: pixel, simple design is best to not make the small icon look messy
- Icon has a blackout to follow design guidelines, allows for a consist style while also allowing for it to stand out – catch users eyes.
- Appropriate use of colour to help represent and distinguish the badges
- Badge design is simplistic circle with ribbon, legible icon in the middle
- Bright colour scheme, shinning
- Location on screen varies, dependent upon the layout of your screen and surrounding icons and buttons (top right or centre screen)
- Small though noticeable, main goal is to not completely take the attention of the user, subtle.
- Rectangular curved shape with associated icon design, something suitable for the game style
- “Achievement Unlocked” “Achievement Earned” along with the title of the badge, possible could have a short description
- Achievement type categorised to the left side of the screen, becomes highlighted/ changes colours when selected o Users can observe all the possible achievement types, Icons will clearly represent
- Progression scale for each badge, represents what the user has achieved in comparison to what must be completed for them to obtain the badge
- Glowing bright border around the completed badges, draws the attention of the user and provides a special experience
- Coins/ stars become filled in once completed, another wat to visually represents to users what they have completed and how much more they must do
- Popup page, would allow for the user to access easily during game play – would not have to leave the game
- Rewards granted once achievement completed, reward system would scale upwards – the more they complete the large the rewards. Rewards could be in the form of resources, coins, or upgrades.
- 2 column layouts, efficient and condense considering the large number of achievements. May not be necessary, 1 column layout only as there are not as many achievements
- Scroll ability, arrow hands
Sketches were completed in an effort to brainstorm potential ideas while also understanding how elements of the clock would fit together. The design aimed to encompass a effective, simple, though engaging design - while an important feature of the game, its main goal was to tell the user the time of day.
Achievement Badge Design Originally believed that various sprites would be implemented within each individual category type, show the users progression of the statistic achievements. Once stage completed, would change sprite to the next hierarchy colour.
- Gold, Silver, Bronze, Brown.
- Considering the art style – pixel- and the small size implemented of the badges it was important that the design be very simple and recognisable, it has been found that it is very easy to create a very detailed design which doesn’t look very good as it is so pixelated.
- If users are not presented with all the sprites, it is not obvious that the colour symbolises their progression of their statistic type badges.
Notification Popup
- Simple design, entailed of only the necessary and important information
- Badge icon displayed depending upon the achievement completed, descriptive title and brief description.
- Black text allows for adequate contrast against the neutral notification popup colour
Achievement Icon Sprites
- Various icon designs were created for each category, user testing was completed which allowed for a single icon to be chosen to represent.
- Background colour on all the badges is the same, allows for continuality
- Future concern: there is nothing special about the designs, nor the badges. Testing may be completed to understand if users value the badges – if not, this may be a design issue.
Achievement Badge Design
- Maintained the simplistic circular design, proved to be highly effective and suitable for the places of implementation
- The colour border of the badge was changed to a gold colour (#e6c057) to allow for the design to help symbolise a prize/ achievement.
- Makes earning the badge more special
Notification Popup
- Location: Top centre of the screen, user expectation acquired from user testing
- Dark brown boarder added to follow the designs that have already been created within the inventory and shop, allows for consistent design across the pages.
- Boarder allows for user’s attention to be caught, subtle design – not flashy
- The gold badge border contrasts effectively against the neutral notification colour, further the bright badge colour allows for users to further associate a colour to the achievement type.
Achievement Icon Sprites
- Background colours implemented and tailored specifically to represent the achievement category type
- Reinforces awareness and recognition while allowing for a pop a colour which draws the attention of the user’s eye where implemented.
Green Tick Icon
- As a result of not implementing the colour scaling (gold, silver, and bronze, with gold representing the completion of the achievement)
- Green tick will appear within the achievement page only once the achievement is earnt, allows for efficient communication of it being obtained
- Simple design, effective and matches other badge designs.
- Brown border, strands out
More details of testing, key kindings, and result analysis from all testing completed may be found here: Achievement User Testing