Digitalising my Crazy 8s

The original crazy 8s post found here have been digatalised and imagined how the design intended them to look. The original crazy 8 looked like these;

125

Once they were made to look digital, they ended up looking a lot more professional looking.

1

There are a few issues but allowed me to turn the basic concepts into initial designs that could be improved upon.2

These designs meant I could continue with the plan through the site but also raised a few questions about use of colours and textures3

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.

 

CMS: Client Prototype Testing

The current CMS is available to view here;

https://xd.adobe.com/view/63da3ffd-3f30-47b5-a331-917c16bbe4f2/screen/9b86018e-668f-4aaa-a574-e6d413cd5a39/Live-Edit-Mode

I gave the mockup to one of the regular users and this is the screen recording of their usage;

The feedback was really usful and this is what I learnt;

  • The upload page needs an upload button
  • Menu size needs adjusting a little

Key functions of good CMS’

There are some rerally important features that make a great CMS. Since the main issue is usability with the current cms, this is going top be the main focus of the redesign. Simple adjustments that will make a world of difference to the user.

The Editor

The content needs to be easily editable and this is one of the key features of every cms. Therefore a great question is whether to use a top-aligned editor or an inline editor? This is reasonably easy to answer, the main editor should be available at all times while the inline editor should be available in a live edit mode. A great inline editor is the medium editor (https://yabwe.github.io/medium-editor/).

 

Managing assets

The user must be able to see images via upload date, and also search for file names, they should be able to delete or upload images to the assets section of the site.

Help/Search

The help and search feature is an important one, it offers users with no technical know-how information regarding a specific topic they are stuck with. For example they could search questions into the guide to get specific help with something, they could search for the title of a page they are looking for so they can edit it quickly. This feature could save the user from wasting valuable time.

Customisation

Customisation of the site should vary depending on the users needs. The majority of the sites the client designs for are predesigned and should not allow for further editing. That said, should the company want to update the looks of their site they should be able to without having to pay the company more to do so.

Customisation on a smaller scale could be like allowing the user to update the colours used in the navigation bar or site wide fonts.

Versioning

Versioning is a great feature that allows the user to have the safety of knowing that if they accidentily content, they can revert to an older version of the site. This makes it easier for them to update the site for short periods of time with short promotions etc with the ability to easily revert.

Social Media Integration

Social media is such a large part of running as business today, it should be relevant for the organisation to have a hub of all the social media on the site. The site could pull the integration even more into the design so that when the site developer adds a story to the blog they have the option to easily share the story through their social networks.

Analytics

Analytics should offer the organisation an outlook at hit views so they can track success of their posts on the site, what sections are most important to their users. Allowing them to move forward with enhanced knowledge of their business.

Wireframes

Desktop.png

Mobile.png

The wireframes are a vital stage within the design process. I started with the list of vital information created from my research and set about creating a design that held of that information. It is vital to remember that the entire experience was streamlined as much as possible to create an easy to use website but also to allow the animations to work.

HOME

Starting in the top centre image you are presented with three updates, these are anything to do with the festival itself, new announcments or news of artists. Along with this information, there is a timer until the festival starts, videos and images of the previous years festival. This means new or returning visitors will have something interesting to see.

MAP

This is a great function that I will not fully be able to represent fully in my design itself because of it’s complicated and techincally difficult nature. There is a map of the entire site, with iconography and key to link up with to allow the user to see where the different items are on a map. This is good for users to get to grips with the location before they arrive, but it really would come into it’s own league when the user arrives at the festival and uses the mobile version of the site. It would allow the users to be able to pinpoint their location on the festival site, so that then they could see where they need to go to find toilets, the nearest food or bar stand. This is great, but another feature would be that the users could find their friends on the map. This means that the biggest problem of loosing friends is easily resolved!

LINEUP

This is my wireframe really shines, compared to the artist profiles there is a lot more information about the artist and a much nicer experience. Instead of a list of names, there’s an entire page dedicated to the images of the artist and their name. When on their profile  you will find a themed page with the artist details and songs playing in the background!

TICKETS

I wanted to streamline this as much as possible, there are currently 36 ticket variations including add ons, and the ui is difficult to understand. I broke choosing the ticket down into 3 simple stages which makes the purchase much more straightforward.