Character Customisation

Customisation of the characters are vital they mean two things. Firstly, each user has a completely different style frog, and secondly to gain access to the customisations, they must engage in certain experiences. This is something that has been important from the beginning of the experience planning. It is at the state that now I have an intuitive user interface that I can start developing the characterisation of the frogs.

Colour

In the character customisation, I want as much customisation as possible for each user so to begin with, each user can customise the colour palette of their frog, it is only at the beginning of the experience that they can do this though. The frogs were initally designed from their real life counterparts, but the colour palettes should be interchangable. Therefore, below are the frogs and their colour palettes;

Screen Shot 2017-04-20 at 16.08.11.png

Then below are the real life frogs that I used for the new colour palettes;

So here are the new colour palettes;

Screen Shot 2017-04-20 at 17.57.38.png

and here are all the frogs in the differen colour palettes;

12345

 

This means instead of having 5 different frogs, with the addition of 10 new colour choices and an overall total of 15 colour palettes there can be a total of 75 variations of frogs.

Accessories

Next I wanted to allow accessories to be added to the frogs to ensure they could be truly customised, the items which they could use would be collected as they use the experience.

The first stage of choosing the accessories was purchasing a pack of themed people from around the world. Next I had to choose the countries I had the background artwork for. This was done in Illustrator as you can see below the characters, the list of countries and the actual countries chosen along the top of the file.

Screen Shot 2017-04-20 at 12.36.18.png

Next I took these characters to a new file and organised them a little neater. Meet all the characters and the accesories I needed.

Screen Shot 2017-04-20 at 13.11.12.png

Next I started to pick apart the characters themselves and the items that could be used for the frog characters. This is what I was left with;

Character-Customisations.png

This means to add to the 75 variations of styles from the colour stage, by adding 33 accessories, there were now 2,475 variations of customisations.

Scene

Last but not least, to ensure every users experience was entirely different, I introduced the idea of a scene, this meant that the users profile would show a ‘scene’ of that users frog. The backdrop would be the imagery of the location the user last visited/currently visiting while online, along with the frog and all it’s accessories. These backdrops can be seen below.

This meant that by adding 21 backdrops to the current total variations of 2,475 scenes, there could now be a total of 51,975 different scenes for the users. This number would only grow with time and the addition of new places and accessories.

Advertisements

FV: Crazy 8s

The crazy 8s, Googles’ method of wireframing its’ designs is what I used with this project.

Here are the two crazy 8’s I did.

The homepage;

Scan.jpeg

Customising the frog;

Scan 1.jpeg

Breaking down what the different sections do;

The homepage section is the most important as it where the user will be greeted with content. This page should define the look and feel of the rest of the site, so therefore should reflect all of my research thus far.

HOMEPAGE1.jpeg

HOMEPAGE 1 (above): This homepage sets out the view of the world map for the user to select certain countries that they can visit, this homepage has an icon in the top which contains the profile data of the user. Additional links can be added along the top of this design.

2.jpeg

HOMEPAGE 2 (above): This homepage has a much more defined structure as it lists the flags in a grid view for the user but maintains large menu along the top which can contain user data and additional links.

3.jpeg

HOMEPAGE 3 (above): This homepage takes the setting of a frogs natural habitat, a pond in which it would live. The frog can sit atop lily pads while signs in the bakcground contain the navigation of the site, and addition content.

4.jpeg

HOMEPAGE 4 (above): This homepage is similar to the 3rd one but instead it offers a much more zoomed in version of the frog that allows for a top navigation.

5.jpeg

HOMEPAGE 5 (above): This homepage is a lot cleaner, with a black bakcground and frog resting on a branch, it means that the navigation can become the center of attention for the user.

6.jpeg

HOMEPAGE 6 (above): This homepage is like homepage 4 but is again zoomed in more. The main difference with this one is that the content portrayed behind the frog can change in a more 3d enviroment, making the homepage much more interactive.

7.jpeg

HOMEPAGE 7 (above): This homepage is a standout design where the page is an intereactive game while it also serves as the function of the main menu too. It gives a new breathe of life to something that is otherwise potentially boring for my target audience.

8.jpeg

HOMEPAGE 8 (above): This homepage is very simple as it portrays the frog sitting on a frog in a pond, the menu is tucked away in a side navigation, to allow the homepage just be the main visual of the site.

CUSTOMISING THE FROG

1.jpeg

CUSTOMISING THE FROG 1 (above): This frog customisation page features the frog on his lily pad with the customisable items kept in a fixed sidebar that the user can scroll through.

2.jpeg

CUSTOMISING THE FROG 2 (above): This frog customisation page features much more importance on the character and how it looks with the items, in this version the user can look the the catalog and select items they want to wear.

3.jpeg

CUSTOMISING THE FROG 3 (above): This frog customisation page is like the second where it focuses on the character but this time instead of selecting a catalog to look through the user is presented with the flags and the items categorised by their country.

4.jpeg

CUSTOMISING THE FROG 4 (above): This frog customisation page puts a lot more attention on the specific items being changed as it zooms on the relevant area of the frog of which the item of clothing is being chamnged. As the user browses the items the flag in the corner changes to be relevant to the item.

5.jpeg

CUSTOMISING THE FROG 5 (above): This frog customisation page allows the user a lot mor customisation as it allows them to drag and drop the specific items from a side store of the items.

6.jpeg

CUSTOMISING THE FROG 6 (above): This frog customisation page puts much more importanceon the items as the frog is much smaller while the items are much bigger allowing the user to scroll through them.

7.jpeg

CUSTOMISING THE FROG 7 (above): This frog customisation page allows for the frog and items to be seen equally,  the frog is shown in a spotlight while the items can be displayed by flag.

8.jpeg

CUSTOMISING THE FROG 8 (above): This frog customisation page is the same as the one shown above with just the simple change of showing the frog on a lily pad rather than in a spotlight.

TESTING ON USERS

Once i had complied these designs the testing on the user was soon to begin, what I doscovered was the following;

The homepages were all relevant to the design so picking one was difficult but the homepage being a world map was most popular as it was highly visual and relevant.

The audience thought it would be too much choice to select a country at this section, so here the user should choose just the contininent, then choose the country they wish to visit within that continent. This is done using the two screens above.

The next wireframe to be chosen by the target audience was the 5th customisation screen;

5

The reason for this as it looks like a really simple layout which is easy to use, with a drag and drop ability for the user.

Other wireframes were less important and relied so heavily on the digital artwork that it made more sense to create digital wireframes, these can be seen here for the digital experience mockup.