FindMyTune Prototype


Challenge

The aim of the project was to redesign a website prototype using Axure Pro. However, the old prototype was not visually attractive and usable. The theme of the website was ‘Edinburgh night life’.

Objectives

Using updated knowledge, practical skills and insight of methodology to improve the prototype and evaluate the old website using industry standards and based on this, redesign the prototype.

Target Audience

The artefact is a prototype of the website, which sorts pubs and clubs according to the music genre, gives a description, location, photos, contact details and more information. The audience of the project are users who look online for information about Edinburgh night life and like music.


Methods

Heuristics

Using heuristic unveiled problems mostly with aesthetics of the prototype. The website does not look attractive and need to be simplified. Many of the options, for example ‘print’ are not useful for this specific project. The design is not optimized for bigger screens and there is no grid system used. There is enough user control and freedom. However, there is good consistency through the design, navigation is easy, and user is familiar with the system.

Cooperative evaluations

The results of cooperative evaluations confirmed most of the heuristic results. All users identify the problem with the visual design, as ‘old school’, ‘visually not attractive’, ‘not useful for reading’. Participants noticed many usable but not useful functionality. For, example, printing is not something they would use very often anymore, if they did, they would just use a browser functionality.

Surprisingly, evaluations showed that there is no need and use for the user profile page, as they do not see any benefit in creating personal profile on the website and would be very careful about signing up process. That also showed lack of trust for the prototype. Two participants expressed need to see map faster than on the 3rd screen, as an important factor of browsing places.


Wireframes and design

Looking at the old prototype and taking findings into consideration, the new prototype was designed first as a wireframe. Considering different grid systems every page was redesigned. The system architecture did not change except removing user profile page and replacing it with a contact page.

DSC_1007

Development


Home screen

The layout of the each page was changed significantly. Designing for responsive layouts, the website was prepared to look similar on different screen sizes. The home screen does not contain much information, just a welcome message and slider which is part of the branding.



Before

4

After6


Places

On the ‘Places’ page instead of small grid with 3D effect, a new design was introduced that uses blocks with a photo, short description, “call to action” button and interactive map with location of the club.


Before2

After7


Place profile

The old, busy layout was redesigned using elements hierarchy and design rules, to provide a better user journey. This page was also created from scratch.


Before3

After8


Contact

The contact page replaced user profile completely, providing new opportunities to contact the company or express an opinions. The layout is focused mostly on functionality.


Before1

After9


Testing

After redesign was finished, couple of tests were conducted. Firstly, testing on different platforms, which showed that the prototype is usable on variety of platforms and the interactions works. It would be valuable for the project, to make it fully responsive, and by that more accessible on mobile devices. Therefore, given more time, further development is recommended. However, testers were pleased with simple aesthetics and style of the website. The functionality and interactions were reduced to the most core elements.

Summary

The prototype was re-designed successfully. There is improvement within aesthetics and usability which effects in better user experience. The difference between the old prototype and the new one, awareness of the user experience and prototyping methods showed the progress not only of the skills but also of the design approach, critical thinking and evaluation.

8