{"id":619,"date":"2023-05-01T09:11:57","date_gmt":"2023-05-01T09:11:57","guid":{"rendered":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/?p=619"},"modified":"2023-05-16T11:05:15","modified_gmt":"2023-05-16T11:05:15","slug":"post-17","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/post-17\/","title":{"rendered":"Post 17"},"content":{"rendered":"\n<h2 class=\"has-text-align-center\">Mid\/High-fidelity Designs<\/h2>\n\n\n\n<p>As described in the last post, we decided to create the flow so we could critically analyse each other&#8217;s designs and create the ultimate Virgin Wines flow &#8211; by merging them all together.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53-599x1024.png\" alt=\"\" class=\"wp-image-620\" width=\"302\" height=\"516\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53-599x1024.png 599w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53-176x300.png 176w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53-768x1312.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53-899x1536.png 899w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53-600x1025.png 600w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.00.53.png 1098w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><figcaption>Landing Page<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46-629x1024.png\" alt=\"\" class=\"wp-image-621\" width=\"299\" height=\"487\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46-629x1024.png 629w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46-184x300.png 184w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46-768x1251.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46-943x1536.png 943w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46-600x977.png 600w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.01.46.png 976w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><figcaption>Product Page<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"865\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01-1024x865.png\" alt=\"\" class=\"wp-image-629\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01-1024x865.png 1024w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01-300x254.png 300w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01-768x649.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01-1536x1298.png 1536w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01-600x507.png 600w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.01.png 1626w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Basket Page<\/figcaption><\/figure>\n\n\n\n<p>When creating the landing page, I created a checklist to make sure I incorporated all of the &#8216;important&#8217; parts of my research.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><a href=\"https:\/\/miro.com\/app\/board\/uXjVMebEv7o=\/?moveToWidget=3458764552500354104&amp;cot=14\"><img loading=\"lazy\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.05.02-332x1024.png\" alt=\"\" class=\"wp-image-623\" width=\"235\" height=\"724\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.05.02-332x1024.png 332w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.05.02-97x300.png 97w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.05.02-498x1536.png 498w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.05.02.png 510w\" sizes=\"(max-width: 235px) 100vw, 235px\" \/><\/a><figcaption>Ticklist for Landing Page (click to view Miro Board)<\/figcaption><\/figure>\n\n\n\n<p>When designing the landing page, it was important to hit all of these points as the user&#8217;s first experience of the site either makes or breaks their experience. And the points that I noted down are all backed with research (which can be found on my Miro Boards). <\/p>\n\n\n\n<div class=\"wp-container-4 wp-block-columns\">\n<div class=\"wp-container-3 wp-block-column\">\n<div class=\"wp-container-2 wp-block-columns\">\n<div class=\"wp-container-1 wp-block-column\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"814\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.10.13-1024x814.png\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.10.13-1024x814.png 1024w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.10.13-300x239.png 300w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.10.13-768x611.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.10.13-600x477.png 600w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.10.13.png 1388w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>At the bottom of the homepage, I got a little experimental and made a wine glass animation for the carousel (which works in the Figma board).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"476\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-1024x476.png\" alt=\"\" class=\"wp-image-626\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-1024x476.png 1024w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-300x139.png 300w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-768x357.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-1536x714.png 1536w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-2048x952.png 2048w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.13-600x279.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Product Page Animation<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"465\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42-1024x465.png\" alt=\"\" class=\"wp-image-627\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42-1024x465.png 1024w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42-300x136.png 300w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42-768x348.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42-1536x697.png 1536w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42-600x272.png 600w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.12.42.png 1900w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Product Page Animation &#8211; Hover state 1 <\/figcaption><\/figure>\n\n\n\n<p>The prototype above (which once again, works in the Figma file) was an idea that I initially explored in my first low fidelity design. However, after further research I came up with this design for the hover state &#8211; my hopes with this was to reduce the length of the page by making the information a hover-state and to make the website more interactive!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"346\" src=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-1024x346.png\" alt=\"\" class=\"wp-image-630\" srcset=\"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-1024x346.png 1024w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-300x101.png 300w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-768x259.png 768w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-1536x518.png 1536w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-2048x691.png 2048w, https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-content\/uploads\/2023\/05\/Screenshot-2023-05-16-at-11.17.26-600x203.png 600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Basket Page Ideas<\/figcaption><\/figure>\n\n\n\n<p>Although I am not the most proud of my actual design for the basket page, I do like the ideas I had for it. After studying other basket pages, I found that the voucher redeem section was often placed above the checkout, along with add-ons being placed in the basket page also &#8211; which I also explored.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mid\/High-fidelity Designs As described in the last post, we decided to create the flow so we could critically analyse each other&#8217;s designs and create the ultimate Virgin Wines flow &#8211; by merging them all together. When creating the landing page, I created a checklist to make sure I incorporated all of the &#8216;important&#8217; parts of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,21,20],"tags":[],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/posts\/619"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":1,"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/posts\/619\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/posts\/619\/revisions\/631"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/media?parent=619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/categories?post=619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/olivia-johnson\/blog\/wp-json\/wp\/v2\/tags?post=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}