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;

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

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

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.

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;

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.

 

Advertisement

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

Apple Watch Essay inc. Mockups

INTRO

Watches are an indispensable tool in modern day cultures for measuring time. The first clock was invented in Babylon 3.5 thousand years ago. These were a sundial which consisted of a stone dial with a rod set in the middle, the shadow of this rod indicated the time. These clocks accurate and reliable, but they have one major drawback, they can work only in daylight. The Incense clock, a traditional Chinese timekeeping device consisted of an incense stick being burnt. The time taken for the incense stick to burn was known which meant the time could easily be calculated.

The first self winding wristwatch system was invented by John Harwood in 1923, and since has gone from strength to strength. Watches are no longer worn as just a a functional device but as a fashion statement too.

THE MISSING MARKET

Apples sales started to peak with the iPhone 6 with stock prices falling since due to less phones being sold. It needed a new product to please investors. At a time where consumers had peaked in interest about smartwatches, Apple released the watch. The Apple watch, a square format Apple watch, a device that connects to the iPhone via bluetooth to make life a little easier for it’s owner. Glances were meant to be able to give the user all the information they required about their notifications. Fitness was to be tracked to try and benefit the users health, this was done with sensors embedded within the device that was able to track all types of information, heartbeat was just of one them. Not just a tech device, Apple targeted the fashion market too with this product. Three different ranges for the product, sport (£259-299) ready for fitness with sweat resistant materials Watch (£479-949) made from stainless steel and coming with a variety of different style bands to match the watch. Edition (£8,000-£13,500) a luxury model made from 18 Carat gold and different strap materials including leather. What is interesting about this range is that the while the style differs, the product and it’s function are exactly the same, with everything that the most expensive gold watch is capable of being available also on the cheapest sport model.

Apple claims that the reason they made the device rectangular rather than a tradition circle shape was that it wouldn’t be able to display the information without cutting it off at the edges.

What went wrong?

It can be argued that the Apple watch was a failure, Apple refuse to announce sale figures and reports find that the company currently sells as little as 20,000 watches a day, just weeks after it’s release (Mail Online, 2015), compared to the 818,329 iPhones sold every day (Kingsley-Hughes, 2015). So why did it go so wrong? There are no answers currently and this is where I will speculate and give my opinion about what happened with the watch.

I believe that the watch was too complicated and aimed too high too soon. Applications weren’t stored locally on the watch and were loaded from the phone directly meaning that any function of the phone took a while to load. It used a a full colour palette meaning the the systems battery, which was already small, would be drained within a day. Questioning existing users and potential buyers gives the consensus that the ui of of device is not brilliant, the main screen has lots of little icons squeezed together to display the apps (Shown Below), and that there is room for improvement.

Another inventional design Apple has used within the design of their watch is the square format. The reasoning seems almost only to stand out from other smartwatches available on the market, users consider the device to be un-watch like due to the screen being an unconventional shape. Questioning potential buyers, I found more people would be likely to buy the watch if it came in a round form factor. The current ui, while already flawed, is not built for a round watch face and so would require a complete redesign;

What I’d change

Firstly, if I would change to a conventional round form factor, this would attract the majority of the people I questioned regarding the watch. I would scrap the external apps and use the watch for a few simple functions that it could achieve really well. It would be able to aid with fitness, music, contacts, e-mail and social feed, anything more complex requires more than a simple ‘glance’ and should be done on the phone. Pulling the majority of the colour from the ui is important, this mean the device could use the different colours as detail to amplify meaning, green becomes good or accept, orange being a neutral colour, red becomes alerts or warning. The watch would be capable of three simple modes, time mode which displays the time and customised notifications, fitness mode displaying the heartbeat calories being used and speed of which user is running and finally music mode offering simple controls over the song currently playing.

The above image shows how the watch face really uses a simple single colour palette to amplify its’ design with the red appearing for just the notifications on the device.

This shows how the cut down menu doesn’t need to be difficult and complicated, it’s simple and flat design allows the user it easy and quickly understand the layout and access they desire straight away.

The above Image combines the entire social feed, just like Blackberry devices do in an easy to understand way. Checking if you have new messages has never been easier.

This shows how the simplistic design of the watch face makes the information on the screen a little easier to understand rather than being cluttered with too much information the neutral orange has been placed around the edge to help the user to understand the progress they have made.

This image shows music mode, with basic controls over the song choice and volume, it is set up to ensure the user can control their music easier than taking their phone from their pockets.

The above image displays the music selection app, using the alphabet around the exterior of the screen it means the centre can display more, the actual artist. This means there are quick ways to jump to characters within the alphabet or just scroll through artists as you would wish.

This shows how simple it is to pick a song once you have selected an artist, this is important as it doesn’t confuse the user with an over complicate layout, just a simple list will suffice here.

Finally, this mockup displays the different screens the user has been through to get to their current screen, this means instead of hitting the back button the can push harder on the device and it would show the user every screen allowing them to choose how far back they would like to go.

While this is a simple concept, I believe Apples’ watch user interface is what let it down, and that it is trying to do too much at once. A simpler device with five main functions that can be handled really well is much better than a device can try and fail to achieve a far greater amount of functions. This would set the foundation for the watch, allow people to see the watch as a true fashion item and allow Apple to build upon it for it’s next generation.

References:

Kingsley-Hughes, A. (2015). Nine iPhones sold every second | ZDNet. [online] ZDNet. Available at: http://www.zdnet.com/article/nine-iphones-sold-every-second/ [Accessed 17 May 2016].

Mail Online. (2015). Apple Watch is a FLOP: Sales have fallen 90% since April, report finds. [online] Available at: http://www.dailymail.co.uk/sciencetech/article-3152514/Apple-Watch-FLOP-Sales-gadget-fallen-90-April-report-claims.html [Accessed 17 May 2016].

Mockup of the site

Since I am exploring Polymer Project for the first time, I decided it would be important to mockup my designs with the animation i wanted to implement so I can prove the clear differences between plan and end product. The mockup is something I made in Adobe After Effects. You can see it here;

Designs & User Journeys

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.

Wireframes

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.

Marketing Redesign

While my site works well to create interest and intrigue in the exhibition, there was the fact that the site didn’t really fulfill the brief in the sense that it wasn’t built around marketing made me decide to go back and redesign elements of it to make them more suitable for the branding, I also redesigned based on certain user testing that I did.

 

The homepage has been given a colour scheme to match the other elements and the overall theme of the site, note the two social media links at the bottom of the page.This page listing the four elements has been modified to show the logo at a bigger scale, to improve brand recognition, social media links added to the left and also a call to action to try to make users buy tickets straight away.This screen is an improvement on the Instructions page, I found that users wanted to click on the different elements on the page. This is what I have designed to happen if they were to click on the individual instruction.

The same apples for the ingredients, users expected to be able to click on the elements, so I decided the best thing would be to allow them to click and display further info on the location of where the ingredients can be found.

Finally, I added a map to the exhibition to allow the user to locate the exhibition to know they were close just before they bought tickets.

Mockup of content management system

While using the couch content management system was reasonably simple to install and use, it is important to consider that a fully editable site would include its own content management system. Therefore this was the reasoning behind researching what good content management systems looked like. The influences of the interface design can be seen here;

After this stage I went on to create wireframes based upon my research, you can see these here;

Finally, I created actual designs of my content management system, you can see this here;

Final Whaling Museum Mockup

You can access my final mockup here;

 

https://invis.io/5S5HOGHWY

Self-Promotion Evaluation

When creating my self-promotion pack, I wanted to create a set of items that represented my brand in a specific way. I wanted to come across in a manner that was seen as luxury with a high quality to it, this was following my research of luxurious branding how they presented themselves as not just a product but as a way of life. By using a maximum of three colours, two of which being different tones of purple throughout the packaging I have created general look across everything I have produced, this makes it easily recognisable as part of something produced by AKB Design.

From my research about a self-promotion pack I knew that I had to create something that I could send out to the client so that I could close the deal. I wanted to create a little a package that would contain something that would be nice to look at and be an enjoyable experience for the client to open. In it I created a iPhone mockup which included information about myself such as what I can do and again contact details. I also created a mini poster that would describe their perfect designer and then explain that I am that designer. I also gave them a discount card within it so that they felt like they were getting a better deal.

I also created a envelope for my letterhead that followed the same design cues as my promo pack. It had simple design which took advantage of white space which created pleasant packaging for the letter. It was folded and shaped in an unusual way which makes it stand out from the crowd, which is something that has to be done as a designer because then a client is more likely to use your services, because if you stand out from the crowd and are able to show you can make that happen for yourself, then you more than definitely will be able to do it for someone else.

I think it was the depth of my research that really helped this stage become as successful as it did, understanding what others did allowed me to understand what I needed to do be professional but again what I could do differently to stand out from the crowd. Essentially my research allowed me to think outside of the box because i was researching what others ‘inside the box’ had previously done.

An example of this was my business card, I wanted to create something that would explain what I did without really having to read too much on the card. Again research played a massive part in this because I found the most successful business cards reflected the line of work that they were representing, therefore I chose a the design of a laptop, and added my logo to it, on the screen I created a mockup that didn’t advertise google but reflected it so that people understood what it was, then showed alb design at the top.