{"id":815,"date":"2024-05-05T11:28:58","date_gmt":"2024-05-05T11:28:58","guid":{"rendered":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/?p=815"},"modified":"2024-05-06T11:43:03","modified_gmt":"2024-05-06T11:43:03","slug":"prototyping-mobile-checkout-testing","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/2b-projects\/project-1\/prototyping-mobile-checkout-testing\/","title":{"rendered":"Prototyping, Mobile Checkout &amp; Testing"},"content":{"rendered":"\n<p>This week, my focus was on completing both desktop and mobile checkout flows to a fully prototyped level, and making as much progress as possible on the about page. I started with with completing the functionality of the desktop checkout, making it ready for user testing by Maggie &amp; Fergus. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"4336\" height=\"2368\" src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Payment-Card.png\" alt=\"\" class=\"wp-image-819\"\/><figcaption class=\"wp-element-caption\">Payment Cards<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"4288\" height=\"2976\" src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Delivery-Card.png\" alt=\"\" class=\"wp-image-818\" srcset=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Delivery-Card.png 4288w, https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Delivery-Card-300x208.png 300w\" sizes=\"(max-width: 4288px) 100vw, 4288px\" \/><figcaption class=\"wp-element-caption\">Delivery Cards<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>This involved designing variants of the main card on each screen to respond to the various options, such as editing saved payment methods and delivery addresses, adding new ones when one is already saved, and selecting named day delivery, for which a delivery date calendar displays below. <\/p>\n\n\n\n<p>Whilst I moved on to designing for mobile, Maggie &amp; Fergus began user testing desktop. As they found issues they fed them back to me, which I fixed before they did the next test. This way of working meant that our tests were improving each time, and avoided each new user encountering the same simple to fix issues. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"406\" src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-11.02.28-1024x406.jpg\" alt=\"\" class=\"wp-image-820\" srcset=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-11.02.28-1024x406.jpg 1024w, https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-11.02.28-300x119.jpg 300w, https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-11.02.28-768x305.jpg 768w, https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-11.02.28-1536x609.jpg 1536w, https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-11.02.28-2048x812.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">The Mobile Checkout User Flow<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:90%\">\n<p>The mobile checkout was a challenge to design, and I&#8217;m proud of the end result. Fitting so many fields and buttons into a small space whilst still looking visually cohesive with the desktop version was difficult &#8211; but through the use of Figma features I&#8217;ve previously explored less such as variables, maximum heights and some very organised auto layout, I found a way to overcome these challenges. <\/p>\n\n\n\n<p>I built a large set of components &amp; variables for the mobile checkout, which largely mirrors desktop &#8211; though I had to get creative for some elements such as the order summary, which required an expanding card. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"6282\" height=\"2864\" src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Mobile-Checkout-Components.png\" alt=\"\" class=\"wp-image-824\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/PaymentInfo.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/Screen-Recording-2024-05-06-at-12.24.28.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<p>Additionally, on mobile I experimented with adding a loading\/waiting indicator while payment is being processed, to help the prototype feel more dynamic and real. For this, I used a LottieFile which resembles grapes falling into a bunch shape &#8211; tying in with Virgin Wines&#8217; brand guidelines. I customised the colour animation too, to be Malbec from the primary colour palette. <\/p>\n\n\n\n<p>The original LottieFile was created by Alexis Dames and can be viewed <a href=\"https:\/\/lottiefiles.com\/animations\/aqua-grapes-falling-wine-f9SCGo5wuO\">here<\/a>.<\/p>\n\n\n\n<p>Maggie &amp; Fergus have begun testing this flow, and I will update it with any necessary tweaks next week. Whilst I&#8217;ve been working on this, Kai has focused on the desktop &amp; mobile Wine Tastings page, and has also created some animated illustrations to use on the about page. <\/p>\n<\/div>\n<\/div>\n\n\n\n<p>At the end of the week, I finished creating the structure and layout of the desktop about page. I&#8217;m pleased with how this turned out &#8211; I experimented with creating a new Light Body style for larger paragraphs of text, which looks more refined than Regular Roboto and improves readability and elegance. It helps the page to feel more spacious and less crowded, which is what I was hoping to achieve. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-content\/uploads\/2024\/05\/About-Us-Edit-This-One-min.jpg\" alt=\"\" class=\"wp-image-829\"\/><\/figure>\n\n\n\n<p>Combining ideas from Kai &amp; I&#8217;s low fidelity designs, we opted for a horizontal scrolling page, split into six sub-sections within three larger sections &#8211; each with a gradient background stretched across them. We&#8217;re intending to use the animated illustrations to visually connect the three sections, for example with the wine bottle on the first border tipping over slightly into a pouring position. <\/p>\n\n\n\n<p>Early next week, I am going to finish the mobile about us page and then work on our presentation with the rest of the group, in preparation for Thursday. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week, my focus was on completing both desktop and mobile checkout flows to a fully prototyped level, and making as much progress as possible on the about page. I started with with completing the functionality of the desktop checkout, making it ready for user testing by Maggie &#038; Fergus. <\/p>\n","protected":false},"author":1,"featured_media":820,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,51],"tags":[],"class_list":["post-815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-project-1","category-week-25"],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts\/815"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/comments?post=815"}],"version-history":[{"count":8,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts\/815\/revisions"}],"predecessor-version":[{"id":831,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/posts\/815\/revisions\/831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/media\/820"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/media?parent=815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/categories?post=815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/james-hopper\/blog\/wp-json\/wp\/v2\/tags?post=815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}