Avatars and E-Commerce Design

Gamification is a cornerstone of the Whooo’s Reading student experience. Students earn coins by answering reading comprehension questions and use them to purchase accessories and other fun items from the Owl Shop.

Challenge

Present both the accessories (the “products”) and shop (“marketplace”) interactions in a new and cleaner way.
The essentials on the page: student’s avatar (“Owlvatar”), coins total, accessory information (title, price, and description), and a way for students to preview the accessory (pre purchase).

Process

First Thoughts:
Structurally, I wanted to keep the student’s Owlvatar display (including the save button underneath it) on the left. We could then use the majority of the space (on the right) to display all the accessories information.

Owl Shop Version 1.0

The main functional issues with version 1.0 was that it involved too many clicks and was clunky. Using the accordion navigation and the modal made the flow feel claustrophobic, constraining, and disorienting. For example, this is how a student would purchase or preview one accessory:
item category > accessory > buy accessory > close out modal (to try another).

Inspiration:

To get the ideas and inspiration flowing, I looked at two online ‘dress up’ games, where you essentially dress up and play around with an avatar.

I noticed some similarities between these examples:

Example A

Example B

a) The accessory categories are separated out from the area they are displayed in-either above or around.

b) The avatar is prominent.

c) Clicking on an item, shows you a preview of how it will look.

d) The color picker is easily accessible along with the accessory (for which the colour is being chosen).

Navigation
The circular approach in Example B (accessories around the avatar) was neat to see but far too crammed and not clear what each accessory was. I wanted each category to have an icon and a title underneath it, so that the categories were easily understood. By placing the category icons by themselves/without any background borders (as in Example A) and shrinking their size, we were could display more categories on each line.

Accessories Layout
When it came to the layout of the accessories, I wanted to continue with our gallery-similar to an e-commerce platform where you see the items in a grid.

Once we removed our clunky accordion, we could show eight of a category’s accessories (previously was five) at once (with navigation arrows allowing you to cycle through the rest). The accessories could now be displayed a little bigger and there was also room for the title and price tag of each accessory.

The bigger breakthrough was that we could now show the accessory’s description directly underneath it (instead of buried in a modal). The placement of the description was a little tricky though. Placing it only underneath the item selected seemed off for two reasons:

1. When one of the top items was selected, the description would appear between the two rows and disrupted the flow of the interface.
2. The description would at times appear below row one and at times appear below both rows (depending on which item was selected).

I liked having the description of the accessory (and the “purchasing button) always above the two rows of accessories. To ensure it was clear which accessory was selected, we added a border around it once clicked.

Accessory Preview
Now that we were no longer using a modal to describe the accessory, we could preview the accessory (currently selected) directly on the student’s owlvatar (on the left), instead of on the owl in the modal. This simplified things and just felt more natural; show the accessory on the student’s owl, the owl it will ultimately go on.

Color-Picker
Lastly, we used to have a category (tile) called ‘colors’, where you could change the color of a variety of different owl parts. There were two issues with this:

1. It was confusing to have a category that was not a type of body part, rather a style.
2. If you wanted to do multiple things, for example, change the wing’s color and place something on the wing, you had to navigate to two separate places. This did not feel intuitive.

We consolidated everything related to say the wings within the wings tab. The color options for the wings, are included below the accessories. I preferred to use little color boxes over our previous color adjustment bar, as it is less distracting and more minimal.

Final Result

If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Give this a clap 👏!