Digital Media – Grant Rebecca

The final website can be viewed here; http://planplay.businesscatalyst.com/index.html

The website outlines how the finished release of Plan/Play would look; using my own personal examples. It outlines the structure and content that each individual user will experience and interactive with when using the website. Although user submissions cannot be accepted onto the website, the content shown gives users a clear guide as to how the website will look and work if it were to feature its own content. With the website active online, potential users can view and experience it; allowing them to decide if it would be a platform they would use if I were to pursue the project to a full working release. If this route is taken, feedback from a wide range of users can be generated over time, allowing for changes to be implemented and tested further quickly and simply. This would enhance the overall project as a whole before a full release.

This image shows the sitemap for the final build of the website. At the top, is the Landing/Promotional page. This is the first page all users are linked to when accessing Plan/Play. It explains the website and its key features. The row down contains the four main parts of Plan, the Play homepage, and Upcoming Events page. The Play homepage and the Upcoming Events page are where the user is taken to when accessing each of these sections. They are the main part of there section, and the subsequent screens follow on from them. When accessing Plan, users are taken to the In Production screen; as this is most likely the main page that will be used in Plan. However, as there is no overlapping Plan page, the other menu options for Plan are all linked on the same level as In Production; and each of the subsequent menu screens fall underneath. The 3rd row contains, as stated, the individual menu screens for each of the different sections. Although one is linked to from the button on the page above, they all have the same weight on the sitemap, and thus fall into the same level. The main menu buttons on these screens link together, allowing the user to easily jump between the different parts of this area. The final row contains the information about the separate cosplay element. This would expand in the finished product with the user submissions, however, only one is shown in the prototype, hence why it is on a row of its own,

Although the website layouts were built upon the wireframes, putting them into actual use resulted in some design changes to take place, in order to make the website more appealing and accessible to outside users. Using the website in real-time for its intended purpose showed where the original designs had to be changed, to improve the users experience as a whole.

The background colour of the website was changed from white, to off white, to make the website less bright, and easy to look at for long periods of time. The corner buttons were added more closely to the corners, making them act as a frame to the webpage, as opposed to hovering near the corner. The logo was changed from white to black, to make it stand out more against the background. Instead of using words in the buttons on the header, icons were used that represent each of the different sections. This tidied up the header, and made it less cluttered, whilst still keeping ints clarity.

On the left is the original Plan design, and on the right is the one from the final build. A menu of options was added over the previously planned slide-bar; as this gave the users more choice in their navigation of the website. y showing all of the possible options, it made it clearer to users where they could go from this page, and better outlines there options. On the main body of the page, the options were contain into a clear grid, instead of the list idea originally planned. This makes the page come across as less cluttered, and makes it more adaptable when the page changes size. It will also be beneficial with a large amount of content, as it will be more contained a d more uniform. The grid system puts the main focus on the pictures, instead of the text boxes, showing the more visual medium of cosplay. The pictures are the same size in the final version, whereas they are different in the planned mock-up. This keeps the grid in a clear alignment, and does not weigh one option over the other. In the previous design plan, it may be unclear to the user where they would need to click to advance, the text or the image; containing both pieces of information together removes this ambiguity.

 

There are also clear differences in the planned and actual designs for the Play homepage. Firstly, a chat bar has been added to the Play page, which follows the user as they scroll, much like the header and buttons in the corner. This feature was added into the design after the mock-up was created. The information on the left hand side is better explained and smaller in the final design. In the mock-up, the size of these pieces of information drew the attention away from the main body of the page; and the lack of explanation to what they were left their meaning ambiguous. These issues have been fixed for the final design. The elements in the header have been more colour-coded, to make them fit in with the design better, and have also become more streamlined, as to not make the webpage look cluttered. In terms of the main content displayed on the page, the space between elements has been reduced, allowing for the user to see more content at a time. The boxes containing the content have also been expanded in size, but have head their borders shrunk. By expanding the boxes to encompass all of the content, it is clearer to the user which content belongs to which post; and where one post ends and another begins. The shrunk borders show that all the content is contained to each specific post, but are less harsh and garish for the user.

In order to outline all the features of my project, a promotional advertising page was created. This is the first page accessed when logging on to the website, and links to both sides of the website. Starting with this page outlines the purpose of the website to new users, and gives them the necessary information needed to understand the prototype and it’s contents. The landing page is at the top of the tree of the sitemap, and the rest of the website connects off of it. This page explains what the website is, and outlines some of the key features that may not be as clear in the prototype build. As a promotional page, it also explains some of the features that could not be implemented at this stage of the build. The app, Plan/Play Platinum, and the in-website shop are elements that research showed would be good to have in the product; and the promotional page acts a tool to explain these to users.

The original plan for Plan/Play was for its output to be both an app and a website. However, due to the time constraints of the project, I have decided to focus only on the website. This will allow the website to be presented at its full potential, instead of both outputs being weaker and not showing their full capacity.

In order to show that an app was considered however, I created some screen mock-ups, in order to show how the design works on a smaller scale. These will feature on an advertising place, informing visitors to the site that an app is coming soon. This allows me to talk about features that users wanted in an app that cannot be feature on a browser version, and show users that these elements have still be considered. Although an output for the app is not shown, advertising it shows that it is still a consideration and a part o the project. It also shows users that, even after its initial release, the project will continue to be worked on, and enhancements will be made post-release.

 

These screen mock-ups were created in Muse. Although a full app could have been created in Muse, this path was not pursued. This is because it would have been a mobile website, and not a full app. Features that were outlined especially for the app would not be able to feature in a mobile website. I aim to make the browser version of the website accessible on all platforms; however, the desktop version is the main priority at this stage.