Skip to content

Crafting UI Visual Assets Design Sprint Three

e-southgate edited this page Oct 3, 2022 · 3 revisions

Ideation Process

Level 2 is centred on a darker and cooler colour scheme. This means less golds and whites, and more blues and blacks. In response to the finalised theme for level 2, our team decided that the crafting menu that was designed for level 1, simply didn’t encapsulate the theme for level 2. Therefore, a decision was made to design and integrate a different crafting menu for level 2.

Throughout the Ideation process, it was clear that the theme for the crafting menu should focus on plumbing, as the level 1 menu focussed on the Greek theme. Hence, the following images were used as inspiration: image

From the initial research period, it was decided that the level 2 crafting menu would:

  1. Be shaped like a plumber’s blueprints
  2. Feature a plunger
  3. Would have a blue colour scheme

Sketching Process

In visualising our new menu, the following rough sketches were produced. These assisted in the final creation of the menu in pixelated form.

Design Iterations

image

This was the initial design that was created in pixilart. It successfully fulfills all the requirements that were outlined in the ideation process, and adequately represented the sketches.

In review of this menu, the design team and programming team collaborated to ensure that the integration of the level 2 crafting menu would be similar to the level 1 crafting menu (programming wise). After having this discussion, it was realised that if the layout of the level 2 crafting menu was identical to the level 1 crafting menu, the integration of both assets would be identical.


So, a second design iteration was created, utilising the level 1 menu to ensure that all widgets were placed in the same place: image

Noticeably, the main blueprint was flipped, and the crafting and inventory sections were swapped.


Additionally, the catalogue pages were also created. Once again, the level 1 crafting menu was utilised to ensure that the layout of both menus was identical. image

These menu designs were then user tested, through the use of an online survey. This survey had the goal of determining whether changes needed to be made to these designs. The results from this survey are discussed in the “Crafting UI Visual Assets Design User Testing Sprint Three” wiki page.

Final Design

After an analysis of feedback provided in the user test survey, the following designs were finalised for the level 2 crafting menu:


Page 1: Inventory

image

Page 2a: Catalogue Page

image

Page 2b: Catalogue Page 2

image

Future Directions

Whilst we believe that the majority of changes have already been made to both the level 1 and level 2 crafting menus, there are possible enhancements that could be introduced in the last sprint.

For example, a small animation to celebrate when a user crafts an item. This would add to the interactability of the crafting menu. Additionally, secondary rounds of user testing could be pursued, potentially receiving feedback from users outside of the usual scope. These actions could ultimately enhance the crafting menus to ensure that the finalised version of each asset is the best possible product.

Clone this wiki locally