{"id":223,"date":"2024-05-11T22:41:35","date_gmt":"2024-05-11T22:41:35","guid":{"rendered":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/?p=223"},"modified":"2024-05-16T23:56:44","modified_gmt":"2024-05-16T23:56:44","slug":"events-final-outcomes","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/unit-2b\/events-final-outcomes\/","title":{"rendered":"Events: Developing Designs & Final Outcomes"},"content":{"rendered":"\n

Initial experimentation and development of Ideas<\/h3>\n\n\n\n

and Designs:<\/h3>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Originally I wasn’t meant to play a massive part in the influence and design work for the Events pages, however due to the lack of work being produced I was told to develop my original ideas and sketches. Therefore to start the design journey for the events pages, I created initial designs that continued a theme from designs I created for the about us page, this way when a user goes through their journey on the Virgin Wines website, the pages won’t look separate. This is because when evaluated the current site through our heuristic markups, we discovered how page designs made user appear like they were on another site or looking at a partners page due to such divide in designs across different pages.<\/p>\n\n\n\n

From this I then experimented with colours, content and composition before adding shapes and flows to introduce movement and depth to the page. I personally liked the use of boxes at the top of the page, too add this design is also seen within the website which I thought was a nice touch of mirroring other pages so it brought it all together. I also liked the use of curves as it divided a boxy structure and made the design seem more relaxed. However the first few designs including flows looked overdone and so this is something I wanted to develop designing when moving on to other pages.<\/p>\n\n\n\n

Critical Analysis & Developing Designs & Final Outcomes:<\/h3>\n\n\n\n

Wine Events:<\/h5>\n\n\n\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Here I started forming final design layouts and ideas, forming an overall rule of design patterns on the page. I continued the previous design ideas of how to layout the top section with the use of boxes diagonally from one another as this separated information content with designs. I also developed my flow designs and decided to strip it back to the original idea of mimicking the logos curve. This would also be seen a couple of times in order to break up topics or sections within the page.<\/p>\n\n\n\n

Firstly I created a navigation for the top of the wine events- this clearly identifies the different sections and information that can be found and users can also skip scrolling by using this navigation and go straight to specific pages. I then reused our design, incorporating the curve from the logo, so our pages following a theme in order for pages to not to look random against other designs we produced.<\/p>\n\n\n\n

Me and Rish then decided to add a drop-like illustration into the curve to symbolise the wines. This added further character as we also used a rose bottle from their own wine listing products. This highlighted our want to reimburse Virgin Wine products through our design, ensuring we follow the brands identity of being all about the wine.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Additionally, here I wanted to capture the wine events in a couple words by using our idea of enlarging the text as we found that by doing this users are more likely to remember that information, leaving the website with particular words in mind. Therefore I demonstrated the fun at events through typography, this is what I believed lacked from the current designs. I chose to again incorporate the \u2018Joy\u2019- exaggerating the motto of their wines being a \u2018joy in a bottle\u2019. I also wanted the users to grab a sense of the experience they are purchasing, and so I decided to use Graham\u2019s own description of events having a \u2018Buzz atmosphere\u2019. This also helps tackle any stereotypes of the events being boring and just sophisticated. However this is not what we have heard from the Virgin Wines team and certainly does not align with the positive reviews from customers.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Next I including a couple images marketing the wine and as well as the events as this is important for the user to understand what they are purchasing a ticket for. <\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Moving on, as the user scrolls down the page they are opposed with a section dedicated to upcoming events- this is to show 3 previews with a link to the listing page of all wine events coming up. Here I wanted to design a clean simple layout as we needed to display important information so the user gets a clear understanding about the key details of each events. This is opposed to the detailed description on the current website which we think is too cluttered and too much information for an initial glance. Our solution was to include only necessary info such as:<\/p>\n\n\n\n

    \n
  • city location above the image<\/li>\n\n\n\n
  • date<\/li>\n\n\n\n
  • time<\/li>\n\n\n\n
  • detailed Location<\/li>\n\n\n\n
  • price<\/li>\n\n\n\n
  • action to read more\/book<\/li>\n<\/ul>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    Next we continued our curve design, adding customer reviews, reusing the current review and an action to read more. Finally I included the faqs, wanting to keep the current layout do to its clear visibility and user interaction. I then decided to change the colours to highlight icons as this is something that grabs the attention of the user.<\/p>\n\n\n\n

    All Events\/ Upcoming Events:<\/h5>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    This here is the design for upcoming events which is a listing page for events- here I just wanted to display the events so the users attention is solely on which events they can purchase tickets for.<\/p>\n\n\n\n

    I realise there is some negative space here- however we have future proofed the designs as I are aware the client are looking to start increases the amount of events they undertake and hopefully over time this page will get bigger and spaces will be filled with more event locations.<\/p>\n\n\n\n

    The only other aspect included on this page are the terms and conditions so information is clear to the user with also contact information about Virgin Wines helplines and opening hours.<\/p>\n\n\n\n

    Individual Event Pages:<\/h5>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    Next is an example page of product page when clicking on a specific event. Firstly I identified individual events by the year and the city at the top of the page. Here our design structure follows layouts from the wine events page and about us page to create consistent rules within our designs.<\/p>\n\n\n\n

    Using the rules of hierarchy I established the most important information first, being the event details for that specific event. This page has included large images taken from the wine events in that same location to display to the user what they are purchasing – basically getting a visual overview of what the events look like. To add to this I decided to include ticket information so the user is clear on terms and conditions as well as displaying the amazing offer where \u00a330 is deducted from an order made on the day- making the ticket free.<\/p>\n\n\n\n

    Furthermore here I had the idea to replicate Rish’s design of the buttons where they share a less stereotypical design as we have included the curve seen in the ‘Joy’ typography. By using this design across all pages adds further detail and meaning throughout each of our design choices- this is something we believe will set the client apart from its competitors.<\/p>\n\n\n\n

    Moving further down users get a quick summary of what to expect where we re-used the current layout and design structure of the FAQs, this shows info clearly with icons to add a visual factor. I also suggested we include a map where users can also interact on the website without leading users to a separate page to google maps. As I came up with the design, Hashry made it so this interaction allows users to see what the venues looks like when tapping to see the building. We also created a button linking to google maps, so users can decide if they want to leave the page to view the location in further detail, this is because we believe this could negatively impact user flows due to dragging them away from the website through forced actions.

    Scrolling down users can again see other upcoming events when looking at individual events, incase they dont want to purchase a ticket for this one- this allows users to see other options and not completely reject the idea of purchasing an event ticket. Finally for this page I re-using the curve illustration at the end of the page and demonstrating terms and conditions due to bound information companies have to share.<\/p>\n\n\n\n

    Reviews:<\/h5>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    Our third navigation is to Reviews- this is so users can see the geniality of what they are purchasing and get honest reactions to other customers who have previously been and brought events tickets. Again I wanted to include larger text with the \u2018joy\u2019 font to establish positive reviews from customers, also emphasising a theme of design across the pages which I have designed. This includes \u2018sheer excellence\u2019 and \u2018quality wines, right price, whats not to like\u2019. These also contain the names of the customers who wrote the reviews and shares a link to that particular review on the trustpilot page.

    Lastly on this page I have outlined some trustpilot reviews as this creates social proof for the user due to the brand name of trust pilot. I would’ve liked this to be an interactive carousel if I had more time on the project, so users can flick few reviews quickly.<\/p>\n\n\n\n

    FAQs:<\/h5>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    Finally, the last navigation option is FAQs- this is for users to quickly get answers to questions they may have. I reused the layout from the current website, but changed the colours in order to fit the designs, again with icons being different colours as most users identity information through images quicker then they do reading or scanning through text. I also tested enforcing the yellow brand colours as from previous critical analysis it was argued the red and pink were over dominating.<\/p>\n\n\n\n

    Mobile Designs:<\/h3>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    Unfortunately mobile designs weren’t our priority when designing and so because of a lack of time left, me and Rush collaborated ideas and designs in order to come up with fast solutions to areas which didn’t work or apply when the desktop designs were resized for mobile. <\/p>\n\n\n\n

    Due to the layout for mobile UX designs we explored various alignments but felt left aligned text only appeared right, from this I created a grid so our designs can follow a structure or rules.<\/p>\n\n\n\n

    I also decided to edit the way FAQs were presented as through critiquing other members work on how they displayed the current design, it was too much scrolling for the user and made the designs look too compact. My solution to this was introducing buttons where further information was displayed with a drop down. I also changed the stand boxes and buttons to our design to further add character and a UX element of design.<\/p>\n\n\n\n

    Final Outcomes:<\/h3>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    Here are some mockups of our events work to show to our client in a professional manner. Below are also my final designs across the different event pages I created.<\/p>\n\n\n\n

    \n
    \"\"<\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"

    Initial experimentation and development of Ideas and Designs: Originally I wasn’t meant to play a massive part in the influence and design work for the Events pages, however due to the lack of work being produced I was told to develop my original ideas and sketches. Therefore to start the design journey for the events pages, I created initial designs that continued a theme from designs I created for the about us page, this way when a user goes through their journey on the Virgin Wines website, the pages won’t look separate. This is because when evaluated the current site through our heuristic markups, we discovered how page designs made user appear like they were on another site or looking at a partners page due to such divide in designs across different pages. From this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/posts\/223"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":6,"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/posts\/223\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/maisy-trow\/blog\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}