{"id":392,"date":"2024-05-13T20:33:24","date_gmt":"2024-05-13T20:33:24","guid":{"rendered":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/?p=392"},"modified":"2024-05-13T21:01:46","modified_gmt":"2024-05-13T21:01:46","slug":"virgin-wines-final-designs","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/workshops\/virgin-wines-final-designs\/","title":{"rendered":"Virgin Wines &#8211; final designs"},"content":{"rendered":"\n<p>The idea for this project was to bring more joy to the existing website and include more images for a more immersive experience for the users.<\/p>\n\n\n\n<p>My part in this project was to focus on the events side of the designs and make sure the design coincides with their brand guidelines. I made sure all of the pages followed a consistent font size, colour palette and immersive elements. I made sure the design was accessible and could be used by everyone no matter their age or needs.<\/p>\n\n\n\n<p>Making a design that followed the brand guidelines was really important for this project. Given that we were not redesigning the whole website it made sure that our redesigns followed the ideas of all the other website pages without looking like a completely different website.<\/p>\n\n\n\n<p>I used the Virgin Wines colours all over the pages to really push the idea of joy and show that the company is fun and looking to reach a younger target audience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Checkout<\/h3>\n\n\n\n<p>Overall the checkout process was simplified and made to look more joyful without having distractions on the page.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"570\" data-id=\"401\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c1-1024x570.jpg\" alt=\"\" class=\"wp-image-401\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c1-1024x570.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c1-300x167.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c1-768x427.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c1-1536x855.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c1.jpg 1790w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>We also simplified the step process because on the original site it had 4 steps which made it feel longer than it needed to be. We made this process down to two steps so that users feel like there is less work to do.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"637\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c4-1024x637.jpg\" alt=\"\" class=\"wp-image-403\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c4-1024x637.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c4-300x187.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c4-768x478.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c4-1536x956.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c4.jpg 1944w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We also moved where users put in their Virgin Atlantic numbers (because this is where they use quite a lot of customers) to the end of the process so that users are too far into the flow to pull out.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"878\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c8-1024x878.jpg\" alt=\"\" class=\"wp-image-404\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c8-1024x878.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c8-300x257.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c8-768x659.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/c8.jpg 1392w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Events<\/h3>\n\n\n\n<p>The wine tasting events pages were simple and not very exciting when we first looked at them. So our first point was to add more colour, images and playful text to portray the excitement of the events to the users.<\/p>\n\n\n\n<p>We also made the design have a more simple navigation. On the original site their was a filtering system to look at events in different locations. We decided to get rid of this because each filter only had one option. If Virgin Wines were to add more events we still believed that scrolling through 10 other events isn\u2019t much to do. We separated the information they had all on one main page into three different ones.<\/p>\n\n\n\n<p>This includes the main home page for all the events, the page with information on what to expect at each event and a page with frequently asked questions on it.<\/p>\n\n\n\n<p>We did this so that the main page was less populated and also gave the users more of a choice on what information they want to see.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"871\" data-id=\"405\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E2-1024x871.jpg\" alt=\"\" class=\"wp-image-405\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E2-1024x871.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E2-300x255.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E2-768x653.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E2-1536x1307.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E2.jpg 1916w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>With them as separate pages it gave us more freedom to play with images and text designs so that the page was more joyful.<\/p>\n\n\n\n<p>This is the design for each event with their details on them. We played around with placement of text so the important information was obvious as well as adding a lot more images so users had more knowledge on what the events will look like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"892\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E1-1024x892.jpg\" alt=\"\" class=\"wp-image-406\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E1-1024x892.jpg 1024w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E1-300x261.jpg 300w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E1-768x669.jpg 768w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E1-1536x1337.jpg 1536w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/E1.jpg 1948w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">About us<\/h3>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 30%\"><div class=\"wp-block-media-text__content\">\n<p>For the about us page we played around with all of the text and ideas on how to visually represent it so that the page was more joyful.<\/p>\n\n\n\n<p>For the main part of the about us page we visually represented their idea of grape to glass to give more of an illustration with their story.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"422\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A1-422x1024.jpg\" alt=\"\" class=\"wp-image-407 size-full\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A1-422x1024.jpg 422w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A1-124x300.jpg 124w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A1-633x1536.jpg 633w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A1.jpg 682w\" sizes=\"(max-width: 422px) 100vw, 422px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:16% auto\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"269\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A2-1-269x1024.jpg\" alt=\"\" class=\"wp-image-409 size-full\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A2-1-269x1024.jpg 269w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A2-1-79x300.jpg 79w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A2-1-403x1536.jpg 403w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A2-1.jpg 436w\" sizes=\"(max-width: 269px) 100vw, 269px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>We also include an illustration that flowed down the page as you scroll with all of their goals on it. This was to give an immersive element on the page that was visually interesting for the users.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 28%\"><div class=\"wp-block-media-text__content\">\n<p>We then separated their sustainability goals onto a different page so that the main page did not look overwhelmed. We again tried to use as many visually interesting colours and text to attract users.<\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"388\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A4-388x1024.jpg\" alt=\"\" class=\"wp-image-410 size-full\" srcset=\"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A4-388x1024.jpg 388w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A4-114x300.jpg 114w, https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-content\/uploads\/2024\/05\/A4.jpg 632w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The idea for this project was to bring more joy to the existing website and include more images for a more immersive experience for the users. My part in this project was to focus on the events side of the designs and make sure the design coincides with their brand guidelines. I made sure all [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/392"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":3,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":411,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions\/411"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/emily-pryor\/blog\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}