Ex5: Design prototyping, testing and evaluation 

UI and UX

In order to create a successful user interface for your website the brand identity needs to consistent in order to tell a story through the pages and engage the user throughout. In order to land on a design that I believe will achieve this I’ve created multiple multiple prototypes and wireframes until I’ve found one I believe is suitable. I want the interface of the website to be fun and energetic but also try and elevate it from the current branding in order to target a wider audience and tell a story

First homepage mock-up

To begin with, when I was ideating what the overall concept of what the re-brand should be I decided on a much darker approach in order to try and convey a more mature theme as a lot of the content I had found and researched from the freedom festival had taken place in the evening when it was darker. However this completely alienated the performances that took place in the daytime and made it seem like it was night-time only festival which was not the message I wanted to put across for the brand.

As well as there being a lot more dull colours and darkness in this concept I also wanted to give it a grungier and more rustic aesthetic to the and appeal to the locals in Hull to try and hark back to Hull’s history where it was one represented as a less appealing place to live. This idea however was not clear through the design alone so I ended up moving away from this approach. I also wanted a lot of the elements in the concept to be related to neon signage to give it a more festival-esque feel as well as make for interesting visuals for the viewer.

I was not happy with the overall look and feel to my first concept I had created for the website so I tried to improve the elements I thought were not working. I did not like the heavy use of black that I used within the background, logos and typography in the designs as I believe it dulled down the appearance and made it look quite life-less – something I did not want to be associated with the freedom festival. I also think it almost made the contrast too high between the elements and the background as a study has shown that although contrast between text and its background is appropriate in order to help accessibility concerns, if it is too high than it can cause eye strain in adults and therefore make it harder to read. The dark colours paired with the background on the design also may connote the wrong idea for the festival and that it is a place to party rather than celebrate freedom and diversity.

Final Design

For my second and final concept of the website I completely changed the colour palate to that of much softer and brighter colours in hopes of eliciting a more positive and uplifting user experience. I have attempted to keep my neon sign iconography prevalent throughout, however this is still lacking and I need to create more consistency within this area of the components in order to really solidify the visual identity.

I tried to stick as closely as I could to my initial wireframe so that the layout can remain as consistent as possible, however I did add more elements to the homepage than I was initially considering as I felt it needed a different set of call to action buttons and I wouldn’t be able to use the previous one. My first call to action button was to be a section at the top of the page where the user can click a link which would take them to an events quiz where after filling out a series of questions an automated response could tell them what performances in the festival would be suitable to them as it can be confusing to navigate everything the festival has to offer. Although I liked this concept I thought it would be hard to execute and might just be easier to allow the user to dictate exactly what they want without limiting them based on a couple answers they provide.

I tired to include varying sizes of images and graphics in order to keep the visual hierarchy intact as well as using the fonts I had laid out for myself in the typographical standards. However the fonts could look more cohesive if the font used for the sliding banner remained the same as the logo font. I had made the typeface different for this as I thought it would add some difference to the page but I think this detracts from the overall brand identity.

About us pages

I continued the house style here in the sub pages I’ve created for the freedom festival, except from slightly changing some of the background elements so that they look more simple compared to the homepage. I have also tried to link back to the visual identity by including a neon drop shadow to the images on the “Our Team” page.

Accessibility

As opposed to my first designs I’ve tried to make the website more accessible by maintaining a healthy level of contrast between the text and the background. Before the contrast was too high due to the use of black on the screen so I instead opted for a dark shade of purple that would link to the colour scheme but also allow for easy readability. This could still be improved upon however as a lot of the body text that I currently have on the sub-pages are in square boxes with no borders separating them. This could be an issue to some as it makes it more confusing where the line starts and where it ends. I also want to include alt text on the images to further help people who cannot see them and wish to have a device be able to read it out to them.

I’ve tried to include plenty of images and photography on my website design as to help with people who many suffer form dyslexia and can learn about an event quicker and easier by looking at static images.

Responsive Design

When designing a prototype for a website it is extremely important that responsive design are given as much thought as the desktop counter parts. I believe I did this successfully with the main text on the page increasing in size to hep with readability as well as images now taking up he full screen due to the lack of space. I had not altered the moving image slider as I thought it wold translate well to the mobile design however i think it appears too small and a slider which has more height might prove more visually appealing.

Recorded Interactions

I tried to include many interactions and animations in the prototyping in order to keep the website feeling dynamic and engaging. My first one being the main video that plays automatically as soon as the page is loaded which has an animation above it that includes techniques I have learnt in previous tutorials. I tried to keep this animation as consistent as possible with the branding by using the arrow iconography as well as the fonts I had used.

Further down the page I designed a banner that would move across the page as the user scrolls down which I believe adds interest to the design as something is always going on as the viewer is reading. I also tried to make multiple image slide shows that the user can click through at their own rate. I wanted to give the navigation bar a more dynamic fee so I also added a drop down bar that appears after hovering over the “About Us” button.

Referances:

• Anthony (2018) Why You Should Never Use Pure Black for Text or Backgrounds. Available Online: https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ [Accessed 15/12/24]