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;
Once they were made to look digital, they ended up looking a lot more professional looking.
There are a few issues but allowed me to turn the basic concepts into initial designs that could be improved upon.
These designs meant I could continue with the plan through the site but also raised a few questions about use of colours and textures
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;
Customising the frog;
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.
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.
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.
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.
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.
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.
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.
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.
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 (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.
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.
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.
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.
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.
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.
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.
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.
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;
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.
The current CMS is available to view here;
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;
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.
A main part of Frog Voyage is the characters that can be customised with additional extras. I also wanted to have more than just one frog with multiple different frogs. A fitting idea would be to have a different frog for each of the different continents apart from the antarctic (where frogs cannot survive).
I researched the different frogs and picked out the 5 most popular frogs from each continent and arrange them on a sheet with a tally chart like so;
The next step was to get these animals checked by some children in my target audience, here are the sheets filled in by the students;
A total of 55 students were asked and gave their opinions in a form of a vote. The votes are interesting and seems to show no bias in gender or age in the different frogs. This will guarentee success of my characters. It is also promising to note that when the students were shown the different sheets, they were excited by seeing the different types of frogs they had never seen before, this is a clear indication of my characters being likeable.
Below are the five most popular frogs;
Corroboree (Australian)
Agalychnis callidryas (America)
Blue-spotted tree frog (Asia)
Mediterranean Tree Frog (African)
Tyrrhenian painted (Europe)
The initial sketches of the frogs turned out perfectly, with the dran frogs already looking very similar to their real life counterparts. I have added them below;
I was very happy with these inital sketches of the frogs with the only critique to the work was to add more emotion to the faces of the frogs in both the mouth and eyes. The top left one could be cheery and happy for example while the one on the top right could a grumpy frog.
From these sketches, a paid illustrator turned these skteches into vector art using illustrator. After subtle changes were made to the original frogs, the final versions looked like this;
These are the designs and user journeys that take place with them. This top one is the desktop version showing the order of the screens.
This second one shows the designs of the website but also the order in which the user would visit them.
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.
The Coachella logo is well in need of a redesign it has remained the same since 1999. It was vital to remain key to it’s demographic and still keep its meaning while updating it with new branding. This describes how I have done it!!
By it’s pure nature, designing a project that uses Polymer is going to be demanding and restrictive. The important part to note is not only does Google specify many of the design techniques to be used, but the project is, put simply, a framework. Add into the mix the fact that I am learning how to use it at the same and it becomes a very complicated and difficult project to attempt, let alone complete.
So with this in the back of my mind at all times, it is important I try to use the components that are available to me and don’t try to make things too complex for myself. Therefore I need to note the elements that are available to me, here are the different elements that are available to me;
THE LAYOUTS
These are layouts and animations that I am able to use in my project, it is import to understand the elements available to me too!!
Since flat design has taken over subtle animations make all the difference in making an experience different and stand out from the rest. The below show how animations in UI can change the experience entirely;
As you can see the most important thing being shown here is smooth animation mixed with bright colours. They all follow the same Google Standard which means the user knows what to expect when they action any button on a site. One really vital note here is that the user understands the concept of depth within the design to allow them to understand the context of the content. You can see here a really good example of how this works;
It is important to note that material design can also be mixed with real images to create an even more interesting design and layout;
It also works really well with the use of current web trends, an example of this is how parallax design still works really well here;
It is really good that good that Google themselves have put together the following video to show how appealing material design done properly can really be.
The use of animated icons aren’t included in material design but always seem to work quite well so I have included a few nice examples that I could consider using…
The payment system;
Each artist will get their own individual pages, much like on iTunes store;
References;
https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File
https://dribbble.com/shots/2267655-Ui-Parade-2-0-Ui-Style-Switch
https://dribbble.com/shots/2234148-Swipe-animation
https://dribbble.com/shots/1722183-Drop-Loader
https://dribbble.com/shots/1801398-Audio-player
https://dribbble.com/shots/1997201-One-of-9squares?list=users&offset=0
https://dribbble.com/shots/2067564-Replace
http://theultralinx.com/2015/03/25-gorgeous-material-design-interface-animations/
https://dribbble.com/shots/2072658-i8-parallax
https://www.behance.net/gallery/21280343/REDBUS-APP-Material-Design-Preview
akbrodie.wordpress.com 