Interaction and Interface: April 2014

Thursday, 10 April 2014

The group work

Throughout the project we worked together on most aspects of the project, excluding tasks we gave each other to have done for when we met up again as a group.

To start off the projects we brainstormed as a group and came up with three different ideas for an user interface. The first interface we came you with was an app to do with locating and activity in NZ specifically of skydiving. The second interface was an app where you could pick a texture of picture that would then be printed onto a pair of socks, the third interface was an app where you could take a picture of an item of clothing that someone was wearing that you liked and it would tell you where to find that item. We got feedback on these ideas from the class and as a group decided to go with the sock app.

As a group came up with a user flow diagram starting to explore how someone would interact with the app. Then made a paper prototype of this app.

In class we then started to design our app using Indesign, coming up with a few beginning pages of our app and started to add functionality in terms of the buttons and how someone would use it. From here we allocated each other a few pages we hadn't already done in class to design at home to bring together next time we met up.

Page 1- Luuk
Page 2- Luuk
Page 3 & 4- Together in class
Page 5- Emma
Page 6- Luuk & Lindsey
Page 7, 8- Lindsey
Page 9- Lindsey & Emma
Page 10- Emma

After completing our first prototype we presented this in class and got feedback from class members and tutors, from this feedback we then redesigned many aspects of our app to make it more user friendly and function better.

We then met up and all worked together on different pages designing and making changes e.g the look and functionality and then brought it all together to come to a well resolved solution.

The different aspects that we worked on were:

Luuk- Designed initial logo coming up with a font that would the signature for our app, the style of progress bar, and added share buttons at bottom of receipt page and the functionality of the buttons linking them to webpages. Luuk worked closely on the functionality of the whole app making sure the buttons linked the appropriate pages. Designed the pop-up sign up button to give this extra option.

Emma- Added textures and pattern to upload pages and synced these to be consistent with the following pages, designed the background for the app to give it a modern and unique style adjusting transparency so it didn't over power things on the page, Emma also designed the style and size buttons on the edit page and the functionality of the buttons. Then Emma after we had our final product looked into how to get it to work on the iPhone5 downloading an app to do so to give it the highest degree of realness that we could achieve.

Lindsey- Developed the logo and changed the colour palette to better give our design a sharper and more sophisticated look, she then based on this colour pallete included this throughout the app to give it a seamless style and design flair. Lindsey also developed the progress bar by using the colour palette from the logo and added images and text to give clear steps throughout our product.

Although we have listed some of these things we have each focused on, we feel that we worked on everything equally as a group and nobody slacked off or put in more effort than the other. Overall we are very happy with our final product and felt we all worked really well as a team. We are now looking into the next steps we could take to pursue turning our prototype into reality.

Our Final App

Here is our final app and how it would look/be used on the product (and iPhone 5)

Feedback from our final product was that it was nice and easy to use but a few things could have made it better e.g. with the continue shopping button this could be confused with continuing to checkout so also have a button saying continue to checkout next to the continue shopping button. Also with the styles and size on the same page was quite confusing, so separate pages for these would be good.

Next steps would be to talk to manufacturers of socks or talk to people who print onto t-shirts etc to see if our product could be feasible and if they would be keen to invest.

Developing

Developing the app

Adding in a sign up option and the functionality of making it able to popup

Starting to add textures/patterns to socks to show options and also adding size options

Also developing layout of the design e.g. with the logo and background.

Included an option to be able to share your socks on social media which functional interactive links that take you to the pages. Also the option of a download receipt to pdf. Changes responding to feedback we received from peers and tutors earlier in the project.

Feedback from class and tutors

After presenting our first prototype we got important feedback from our peers and tutors. Some of the main criticisms to address were to add a progress bar so that the customer can see their progress through the purchase. A sign up button (which was something we had missed) so that people have the option to sign up and begin using the app instead of just logging in to something they hadn't set up yet. Also to add a continue shopping button and to make it clear exactly what the purpose of the app is.

Prototyping in InDesign

In class we then started to put together our app, and the interaction part of the interface, with functional buttons and text boxes to move through the app. We designed the resolution size of the app to be that of an iPhone 5, as it is one of the more recent models and our group member Emma has one which we will be able to use to present our design on at a later date. We want our app to be simple and easy to use and thats what we tried to do in this prototype.

research

I researched into Instagram and how they layout their login/sign up page, and they way they can share the images onto other social media. Also looking at how they have the effects option.

paper prototype of interface

As a group we did a paper prototype for our app, beginning to explore the interaction someone would take when using the app. We added some things we hadn't thought about earlier while paper prototyping, like a sock watermark so from the onset the customer can see what there final product will be like.