RI Occasionwear

In update of River Islands’ Occasionwear page for the 24th June. The key aspects included on the page are image links, hover-over images, live text, a mobile slider, break points and a duplicated 1 pixel banner to the left and right side of the hero and promo2 image.

OCCASION_HP

Below you can see screenshots of my HTML, CSS and JavaScript for the RI Occasionwear page:

The final page was tested on staging the River Island main server, before being made live. The following images are screenshots of the page in desktop, ipad and mobile view.

This slideshow requires JavaScript.

Womens’ Essentialedit

In utilizing my skills I have gained through Codeschool and my day to day work. I decided to create a small transition slider feature for River Islands’ Women’s Essential Edit page. The slider was to be used by customers through the mobile version of the page, whereby a customer would tap on an image of a models full outfit and then this would slide to the left uncovering each item of clothing in the outfit. Then for example, the customers can click through to either the outfits jeans, top or jacket.

Below is my draft model, of which I built on CodePen:

I added a transition of 0.8 seconds for the slider function and tested the transition on staging prior to launch, via both an Android mobile and an Apple iPhone.

This is my final model in action, represented on the live site:

RI Home Page

In creation of the new River Island home page, I was handed the below graphic design of the pages chosen arrangement. The key aspects included on the page are image links, hover over images, live text, break points and a responsive full-width hero.

WK46_HP

Below you can see screenshots of both my HTML and CSS for the River Island home page:

The final page was tested on staging the River Island main server, before being made live. The following images are screenshots of the page in desktop, ipad and mobile view.

This slideshow requires JavaScript.

RI Home Page

In development of the new River Island home page, I was given the following graphic of the pages proposed composition. The key aspects included on the page are image links, hover-over images, a Lightbox video, live text and break points. Moreover, from this period onwards, the River Island website is in preparation for Christmas, a key period of our online E-commerce sales.

WK45_AD_CAMP_HP_SUNDAY

Below you can see screenshots of both my HTML and CSS for the River Island home page:

The final page was tested on staging the River Island main server, before being made live. The following images are screenshots of the page in desktop, ipad and mobile view.

This slideshow requires JavaScript.

Adyen Payment Gateway

In moving onto UX design, my first initial task was to re-design and develop the Adyen payment gateway on the checkout of the River Island Website. This was to ensure that the journey for NL (Netherlands) customers who use the iDeal/Adyen payment path is consistent with the current RI checkout design.

Below is the current Adyen Payment Gateway:

AdyenPage

This gateway needs to flow and be consistent with the previous check out system step, which is demonstrated in the below:

1

My final design for the Adyen payment gateway was created in Photoshop and is presented in the below graphic:

Adyen

In development of this I ensured that the colour scheme (green, black, grey) and style of the checkout was consistent and carried right through to this final step. Key aspects included in the design were box icon buttons, payment bank icons and a clean drop down menu.

Idea Development

My proposed app design idea for the ‘Applied Design’ live project involves the development of an app which stimulates users to want to take a selfie. The idea takes key inspiration from the interactive displays ‘Make a face’ and ‘Strike a pose’, exhibited at the Cleveland Museum of Art. Audiences are given a selection of photo imagery of paintings and or statues and are then asked to imitate the facial expressions and pose of the character portrayed in the image. The taken selfies will have the ability to be shared via social networking and or uploaded to a Magna #selfie library of content. Below are graphic representations of this proposed app design:

MagnaCartaAppMagnaCartaApp

The app design complies to the Magna Carta exhibition through its history and displays and responds to the given brief effectively. It is aimed at an audience of 13 years and above and is designed as a component of an App. The app is to respond to the design agencies style guidance and colour theme, which will be concluded at a further arranged meeting with Redballon. With relation to Continue reading Idea Development

Design Iterations

The Understanding of Iterative Design

Iterative design is designing, but more specifically understanding what one is designing through actually creating it. Alistair Cockburn describes it as “learning by completing”. Perhaps most importantly, an underlying principle of the iterative method is that until you have actually built what you are designing, you are not going to be able to fully understand it.

When presenting sketches and ideas to users for their feedback, you are effectively asking them to imagine how the product will work, to prototype it in their mind as it were, and then provide feedback on what they are imagining. However, with Iterative Design you are prototyping at every stage and therefore you get more reliable user or client feedback (The Design and Technology Association 2014).

To demonstrate our understanding of the iterative process we will individually be creating a piece of interactive information graphics for a shared public space, which will elucidate some idea or concept we perceive as key to our 21st century media experience.  This unit will allow us to look at how people react to and understand the graphics we create and how different people experience our work in an environment. We will be observing how people move through and use a space, what they look at and what mechanisms are used in the space to grab attention.

Approaches to the Iterative Process

There are many different approaches to the Iterative process; one approach is the waterfall method:

350px-Waterfall_model_(1).svg

‘Getting it [design] right the first time’, is not achievable in user interface design.” Yet use of iteration is not an excuse for being sloppy in the first time (Gould, J.D., and Lewis, C.H., 1985). The problem with the waterfall method is that it does not allow trial and error through designing, so therefore we can not simply go back to the drawing board.

Other Iterative processes include the Double Diamond Process:

doublediamond

Bryan Lawson’s Architectural Process:

Screen Shot 2014-10-13 at 11.17.09

Management Environment- Iterative Process:

Screen Shot 2014-10-13 at 11.13.29

In designing an interactive information graphic I will be following this iterative process; this process will allow me to continually evaluate, improve and redefine a design to achieve the highest standard outcome for deployment.

References 

Gould, J.D., and Lewis, C.H., 1985. Designing for usability: Key principles and what designers think. Communications of the ACM, 300-311.

Tech Republic Apps, 2006. Understanding the Pros and Cons of the Water-fall model of software development. Tech Republic. Available from: http://www.techrepublic.com/article/understanding-the-pros-and-cons-of-the-waterfall-model-of-software-development/ [Accessed 13th October 2014].

The Design and Technology Association, 2014. Developing an Iterative design process[online]. D&T. Available from: https://www.data.org.uk/for-education/local-branches/developing-an-iterative-design-process/ [Accessed 13th October 2014].