Iterative Design

The chart below demonstrates the processes I went through in order to reach my final design. Through prototyping, building and analysing I was able to refine and tweak the interface. John Cato (2001) states that through this development process designers must assess key high risk areas, ubiquitous and complicated components and similarities between areas of information and user activity. This was particularly evident with regards to the navigation. Designing the navigation horizontally across two lines, cleared the interface, placed more emphasis on film content and highlighted that the top line, “home, view profile, search, logout,” were the most important links.

Another ubiquitous component i hadn’t noticed until building the site were user’s comments. Only after building was I able to recognise that as users posted a comment, all comments remained on the homepage, regardless of how many comments there were on one film. This therefore led to a huge build-up of comments on the same film, overloading the interface with opinions on one film and ruining the main concept of the website. To avoid the interface becoming cluttered, the PHP was adapted to upload the most recent comment on a film to the home feed. In doing this, users were able to see a wider variety of film reviews rather than reviews of the same film over and over again. Additionally only after building the site was i able to recognise that i had not considered designing all the functionality of the website. In particular how to present users comments. After building the site, I was able to recognise that comments didn’t look right when placed underneath each film. I had to therefore analyse the best way to represent user’s opinions that would accommodate the site layout. This involved replacing the description when hovering over each film with user’s comments.

Iterative Design

Advertisements

Designs

FORMmainpage

filmpage1profilepage

 

To ensure that focusing heavily on imagery was the right path to go down I questioned users on their preferences. When asked whether they found a focus on strong visual aesthetics more engaging than more textual based sites user’s responded :

365445 Yes, i think other sites rely too heavily on textual content and find it a bit boring to flick through. I really like how the amount of text it limited but you can still view the most valuable info by hovering over images
365585 Yes; I liked the fact there was not too much text which can often websites look busy and messy, and feel pictures can often do a better job as well as looking more professional
365586 I think having images makes the site really visually attractive which is very important. It’s nice to have the images alongside the written descriptions because it gives you a better impression of what the film will be like.

This confirmed my belief that user’s did value a focus on imagery when searching the web.

Information Visualisation

The book Interactive Visualisation: Insight through Inquiry by Bill Ferster inspired the steps taken to build this project. Ferster (2013, p.20) defines information visualisation as, “The use of computer supported, interactive, visual representations, of abstract data to amplify cognition.” This definition implies the way information is visually presented can effect and increase an individual’s understanding. Therefore one of the most important aspects of designing the interface was recognising the theoretical issues that surround audience reception and understanding, including how they engage with information and communicate online.

Firstly I addressed the issue of engagement, attempting to establish the best solution to encourage users to join and take part. Pawan Vora (2009, p.50) states that as a designer we should, “delay registration for as long as possible and allow users to explore the application so that they fully understand the benefits of setting up an account.” In doing so users are able to recognise whether the site adheres to their needs. This view is supported by Topix.net who found an increase in posts after the removal of the registration process from their forums (Blake, 2006). I decided to incorporate this into my project by allowing users to explore the interface and therefore recognise the benefits of joining but denying them the ability to join in and share their opinions. In doing so, user’s were still encouraged to sign up so they could partake in the social interaction.

Secondly, I addressed the concerns surrounding the best way to represent the information visually. Stone et al (2005, p.171) highlight the importance of a clear interface stating the,

             “Designer should employ actions, icons, words and user interface controls that are natural to the users. Complex tasks should be broken down into simpler subtasks, to keep the behaviour and the user interface appearance as natural as possible.”

To create as natural an interface as possible, I kept the film categories as designated by the BFI in order to maintain consistency for users who were already familiar with the festival. Furthermore to prevent information overload I limited the film content to the most significant information as chosen by users during testing. When asked what information on a film played the most important role in decision making 39 out of 60 respondents said a movie trailer, 35 said actors and 34 said film synopsis. I therefore only incorporated the information that users deemed most  valuable in helping them decide on a film to watch.

 

Untitled-1

Designing for small screens

Thirdly I needed to consider that consumers are no longer limited to the desktop screen, thanks to the abundance of technology available today. Therefore I had to contemplate the potential difficulties of designing for smaller screens. The greatest difficulty I came across involved styling content whilst maintaining a consistent look and feel across all screen sizes. This proved particularly difficult on the mobile screen. Icons appeared to work better, this was particularly evident on the movie page and was extremely useful when designing for the mobile as textual links were too small and difficult to click. When all content was presented textually, this overloaded the screen and defied Gestalts law of proximity, with different content overlapping and appearing confusing to the eye. Zwick et al (2005, p.124) highlight the importance of using icons for small screens stating that they, “allow fast non-verbal communication between the system and user.” To maintain a consistent design across all devices I incorporated the same icon and textual links across all screen resolutions, creating familiarity no matter what device user’s were on.

Furthermore I applied Gestalt Law of figure (Zwick at al, 2005) to distinguish between elements that were more and less prevalent to the user’s needs. This was achieved by changing contrast and brightness levels. For example I made the title of the films, the sharing and trailer icons a bold black to catch the user’s eye immediately. Additionally it was important to ensure the mobile navigation was in the foreground to avoid merging with the rest of the design, this was achieved by styling it, in such a way that all content below was pushed down.

Exposition

A number of factors have shaped and influenced the choices made during production. I believe one of the most relevant was initial market analysis and research into similar artefacts. Research demonstrated that an older target audience was more relevant to my project and enabled me to understand that aiming it at a younger age range of 17-25 would have been a fatal error. This led me to change initial design ideas to suit a more mature target audience. Additionally results pointed out users preferences in relation to the content they most valued on films, what filters they used most commonly to search for films and the way users navigated the website. Secondly I believe that adopting an iterative deign process has enabled me to create a clearer interface that meets the needs of its users, specifically for, interaction, engagement with content and clear design. Through consistently analysing and critiquing my work at different stages I was able to recognise initial flaws that otherwise might have gone unnoticed, for example, comments appearing on more than one film on the main page. I consider an agile approach to be more effective than that of the waterfall as I was able to adapt and change designs to suite functionality that I failed to design with the rest of the website. I consider that designing iteratively has allowed for more flexibility during design and building phases.

Lastly a factor I had not previously thought of as influencing my project was the technical side. PHP proved extremely useful in time management as it limited the amount of HTML code I had to enter, significantly decreasing my work load. Adding in each film and storing it into the database meant that one style could be added to all elements, removing the need to add in each individually. This therefore allowed me to focus on designing the interface, rather than entering in data.

Planning

David Bushell (2012) stresses the importance of communication with collaborators stating, “It’s important that communication is continuous so that both sides accommodate each other.” I found collaborating on my project an extremely useful learning process which has enabled me to understand my strengths and weaknesses as a production manager. During pre production phases Harriet, Emily and I met regularly to discuss our ideas and give feedback on one another’s project. However later in production work, I feel we met less. This perhaps reflects my weaknesses as a production manager, and demonstrates lack of organisation in which I was unable to balance time as well as I should have between different parts of work. In an attempt to resolve this I created a Gantt chart to help  divide my time between projects and more problematic tasks. gantchart3

This enabled me to address the projects goals, aims and their feasibility against time constraints.Furthermore it underlined that some tasks needed more attention than others, for example i found it incredibly difficult getting the users comments to appear when user’s hovered over a film image. I had to therefore devote more time to this, as it was an essential aspect of the site. I had to therefore sacrifice refining smaller tasks, resulting in a slightly less polished product than I would have liked.

Technical

In order to comprehensively understand how to design for the web it is imperative to acknowledge that the technologies used shape the outcome of a project. Jeremy Snell (2013) highlights the need to consider technology during the design process and defines responsive web design as, “the need to provide a positive, intuitive user experience,” for each device. With regards to a responsive layout, I was essentially creating three different designs that needed to engage users across all devices. This was more complicated than expected with different devices being used in different contexts and environments.

Secondly after receiving the PHP and functionality I found it difficult to integrate the code with the CSS styling I had created. I found this extremely challenging at first and in hindsight should have worked alongside Leeroy to determine the class and id’s of each element. This perhaps reflects my weaknesses as a production manager, as we didn’t meet weekly to discuss the progress we had both made. Reflecting upon this experience has enabled me to understand the importance of working as one unit, rather than separately. By creating two separate pieces of code, in essence we were working on two different projects rather than one, which ultimately made my side of production a much slower and more difficult process.

However I now feel more confident with PHP through styling and adapting the code initially created. Overall I found collaborating an extremely useful learning process which has not only enabled me to build on my skills as a designer but also as a coder.

Short Falls and Failures

An initial short fall of mine, was the inability to create a responsive design that worked consistently across each device. Designs that looked good on desktop and tablet devices appeared cramped and overloaded when transferred on to the mobile screen. If I were to approach this again I would design for the mobile first, as it is easier designing for larger screen resolutions, with more space to play around with. Ben Frain (2012, p.11) supports this notion stating,“A truly responsive methodology is actually more than merely altering the layout of a site based upon view port sizes. Instead, it is to invert our entire current approach to web design. (…) we should design for the smallest view port first and then progressively enhance the design and content for larger view ports.” The biggest design difficulty I had to overcome was deciding the best way to represent user’s opinions. When displayed below the films, this forced the layout to alter as not all comments were the same size and also took away from the clean minimalistic design I had created. The most appropriate alternative involved replacing the description with user’s comments when hovering over a film.

Another downfall of mine involved time keeping, as i failed to acknowledge the amount of time it would take to enter all the film content into the database. With a hundred or more films viewed at the festival and each needing a synopsis, several photos added to the image gallery, a trailer and list of actors, this proved a more arduous task than expected. With imminent deadlines, I needed to focus on designing the interface, so collaborated with Harriet to avoid wasting further time.

Despite all setbacks each short fall entailed, I believe they helped develop my design, coding and production management ability.

Conclusion

As mentioned earlier, Catmoji, Pinterest and Food Spotting have all been categorised as interest based networks because they centre around one common topic. I strongly believe that I managed to produce an interest based network around the BFI’s contemporary film festival through visual representations of individual’s opinions. Thus creating a database of film reviews in which users engage by reposting or adding to previous comments. Support for this is further provided by user feedback which suggests the website creates a strong community feel.

” I am quite into films and so look forward to continuing to use it in future as I think it is a great way of finding other people with similar interests to me.”

“The fact that people can comment on films and each user can see all the comments creates a fun network for people to discuss their views.”

However feedback also implied that further interaction and engagement could be integrated:

” I think the website could be improved if it allowed me to click on other user’s profiles. In this way I would be able to connect on a closer level to other users and this would make the website a lot more engaging. Otherwise I really liked it.”

” It would perhaps be better if the users could interact with each other more, like people can on social networks. Maybe the site could suggest people to follow or connect with based on similar film interests.”

If I were to continue the project or if time permit, I would have integrated functions like those suggested above. I feel that the ability to view users profiles and their favourite films would have created a stronger interest based network, with a greater community feel. However, overall  this project has been an extremely useful learning experience that has enabled me to better understand the concepts and processes designers must go through to create a strong user centred design. It has not only enabled me to build on my skills as a designer and coder but also as a manager and has enabled me to recognise the importance of user testing and initial market research in the success of a product. Overall I feel that I have successfully met my aims and objectives for this project, which were to enhance user’s experience and knowledge of the upcoming with a visually aesthetic cross platform website.