Achievement Inspiration & Ideation - UQdeco2800/2022-studio-1 GitHub Wiki
Page Navigation
Jump to a section or return to the general Achievements page here.
Inspiration
Inspiration was taken from various images which incorporated somewhat similar features.
Badge Design
- 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
Notification Popup
- 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
Inspiration
- 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
Ideation
Icon Sketches
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.
Initital Prototype Design
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.
Box Design
It was realised that the current shop and inventory pixel boxes would not be suitable considering that various sizes and shapes which were required. Therefore, boxes were created which will be implemented within the achievement page, allows for a similar design to the present across the inventory and shop pages. Generates a flow through the pages, positive experience and meets user expectation.
- Black pixelated border
- Colours chosen to match those already within the game
- Angular border
Final Prototype Design
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
Colour Scheme
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.
Tick and Lock 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
- Lock icon represents to the user the they have not completed/ started the achievement
- Simple design, effective and matches other badge designs.
- Brown border, strands out
Box Design Box design was changed to include borders as stated within the design guideline, despite this, it was mainly altered to imporve the sizing and scaling. Further, a more pixel look was able to be achieved. Summary button was also created, was not necessarily considering the previous singular tab design.
- Black border, 2 pixel size
- Angular border edges
More details of testing, key kindings, and result analysis from all testing completed may be found here: Achievement User Testing
UI Development
The UI was designed to keep the style consistent between the shop and achievement screens. This would make sure that the new achievement screen would integrate well with the aesthetics of the game as a whole, and prevents the user's emersion from being broken.
Sketches
Initial UI Design
- Progression summary achievement count
- Singular column tab system, this may see development considering it is an integral part of creating a positive experience
- Shaded and lock icon implemented on achievements which have not been started
- The design featured within the second annotated figure is the same design for all achievement type pages, the only difference is the information of title, description, and icon
Final UI Design
Only one page is being displayed for the mockup of the achievement page as they are all the same, differing the title and description for the achievements. Further, the boxes that were created above will be implemented to follow design guidelines.
Sprint 4 Final Design
Current Page Design
Two designs were created for the tab signifier; however, the highlighted design was chosen. Due to the variances of screen size and therefore, what may look good on a larger screen may instead look clustered and overwhelming on a smaller computer screen. This may have been the case if the light colour box signifier were implemented due the pixel design. Consequently, the highlighted current page signifier was chosen, flawless integration within the pre-existing design and user testing was conducted which demonstrated users’ recognition and expectations regarding the design. These expectations were met.
Icon and Summary Design
- Shaded design: Overlay of black colour box, set 40% opacity
- Current vs Not Current design is obvious, constrast against one another
- Summary button: text removed as the design committee stated the requirement of the “Summary” text to be H2: Style name; “Title” and .setFontScale(1f)
Content Boxes
- UX/UI committee created and reinforced design guidelines, as a result, the text boxes saw change to create a cohesive design
- Achievement box colour changed from white to a light neutral colour which has been implemented throughout the rest of the game
- Neutral colour allows for the black text to the contrast – easy legibility. The icons brighter colour draws the attention of the user
- Boxes are simplistic and allows for room for the title, descirption, and milestone numbers of the achievements
- Box inside colour: #D4BC9C
Final Implemented Design
More informatio regarding the achievement interface may be found here!
Summary Page
Resource Page