Showing posts with label wireframing. Show all posts
Showing posts with label wireframing. Show all posts

Tuesday, 13 January 2015

Wireframe and Prototype

Working with the Peter, UX Content, I produced a wireframe and eventual prototype based on the recommendations made by Peter in his summary of the results using Axure.

The website that everyone had the most problems with was the Samsung website, so it was decided that we should focus on a redesign of that website.

Peter produced a low res prototype in Balsamiq.

The major problem participants had whilst using the site was trying to find phones. After going to the phone page, the user is presented with a long page filled with smartphones and accessories. Phones made in more than one colour appear as a separate item. The page presented to the user has 233 items on it.

Filtering is possible only on a few metrics: Operating system and whether or not the item in question is an accessory. As 59 of the 60 phones for sale are on the Android operating system, this filter is next to useless.

As each phone is listed separately for each colour shown, many phones appear multiple times with only the colour as the difference.

To better filter the products, check boxes were used to filter out ‘family ranges’ of phones. This makes it easy to include or exclude phones the customer knows they are not interested in. Checkboxes are not mutually exclusive, so limitless combinations of what is desire can be shown.

Secondly, the ability to filter on Price, Display Size and Memory was included, in the form of range sliders. Range sliders are particularly useful for price, as the prices of the phones are not values set a discrete intervals but over a wide range.

Previously, each phone was listed separated for each different colour that model was available in. Seeing as it is unlikely that one of the major deciding factors for buying a smartphone would be the colour, each phone is listed once, with small coloured boxes along the bottom that can be pressed to see images of the phone in different colours. This cuts down the number of items displayed and allows the user to easily see the colour options without scrolling through several phones.

A style guide was also produced, and is shown below.


Tuesday, 2 December 2014

Wireframing - Using Axure

As part of our final deliverable, we have decided to include a prototype website that has been redesigned with respect to feedback gained during the usability testing portion of our proof of methodology.

As architect, my role encompasses the creation of wireframes for this prototype. Therefore, it was important to gain some experience in wireframing tools.

Axure is used by over 40% of UX professionals, and a educational licence is available for it - it seemed to be a good option for this project. A basic wireframe for a different site has been started. This is just to learn the basics so a decent prototype can be made later on once the recommendations for improvements to the website have been made.