{"id":449,"date":"2024-05-06T20:25:14","date_gmt":"2024-05-06T20:25:14","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=449"},"modified":"2024-05-06T20:26:40","modified_gmt":"2024-05-06T20:26:40","slug":"developing-our-designs","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2b\/developing-our-designs\/","title":{"rendered":"Developing our Designs"},"content":{"rendered":"\n

I continued developing my high-fidelity work for the desktop and mobile Wine Tastings pages. As well as this, I worked on animated illustrations to transition between sections in the ‘About Us’ page.<\/p>\n\n\n\n

Wine tasting Homepage<\/h2>\n\n\n\n

Working to a Grid<\/strong><\/p>\n\n\n\n

Throughout my designs, I have worked consistently with a grid.<\/p>\n\n\n\n

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

This is useful, as it allows me to ensure my designs are consistent with the content designed by my co-designer.<\/p>\n\n\n\n

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

By ensuring we designed within multiples of 4 and agreeing on design decisions together, we kept our designs in the same digital design language.<\/p>\n\n\n\n

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

I followed a 6 column grid on mobile with a margin of 28, best fitting this smaller screen size. Note in this image the icons are not yet complete, which is why they are not pixel perfect as of yet.<\/p>\n\n\n\n

Experimenting with Auto-Layout<\/strong><\/p>\n\n\n\n

As part of the FAQ section, my original plan was to have cards that expand to fit the copy of each question and answer.<\/p>\n\n\n\n

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

While I liked this approach, I struggled to create a natural and organised look to the FAQ section. I ultimately scrapped this in favour of a rigid approach to each card.<\/p>\n\n\n\n

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

Writing Natural Copy<\/strong><\/p>\n\n\n\n

When writing the copy for the FAQ section, I considered how tone of voice can balance effective communication to best answer the question and advised tone of voice from the Virgin Wines brand guidelines. I also kept answers short and punchy, getting to the point quickly. I also considered how I keep replies professional, as I feel the FAQ is more functional than a selling tool.<\/p>\n\n\n\n

Using Colour Appropriately<\/strong><\/p>\n\n\n\n

I kept in line with the Virgin Wines Brand Guidelines. I was considerate about how I can best use colour to create sections and variety within the design as the user scrolls down.<\/p>\n\n\n\n

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

Using inverted gradients helped me to create a natural and well-sectioned flow down the page.<\/p>\n\n\n\n

Organisation<\/strong><\/p>\n\n\n\n

Throughout my designing, I maintained a hierarchal mindset to elements on the page, helping me to easily identify and keep track of what I’m working on. I considered how I name elements of the design to keep organised, and allow them to be easily accessed when applying things like overlays.<\/p>\n\n\n\n

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

Wine Tasting Event Page<\/h2>\n\n\n\n

Add to Basket Card <\/strong><\/p>\n\n\n\n

As part of the Wine Tasting Event Page, I created a payment card that significantly improves on the old design.<\/p>\n\n\n\n

\"\"
Old, existing card design<\/em><\/figcaption><\/figure>\n\n\n\n
\"\"
Redesigned card<\/em><\/figcaption><\/figure>\n\n\n\n

In my improved card design, I considered how information can be best shown and interacted with so the user can perform the task they need to task, booking tickets, as quickly and efficiently as possible.<\/p>\n\n\n\n

I focused on bringing out key information in an organised way. I also added the feature of showing the order price before the user places it into the basket, which is a problem we first picked up in our analysis of the existing site.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Shows the correct order total for the amount of tickets the user has entered<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

I also created this dropdown with organisation in mind, allowing me to easily change colours and elements of the dropdown using components and styles.<\/p>\n\n\n\n

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

Mobile Add to Basket Card<\/strong><\/p>\n\n\n\n

I considered how people interact with their devices and determined using a tappable counter is the best way to create an alternative Add to Basket card for mobile devices.<\/p>\n\n\n\n

\n
\n
\"\"
Desktop Add to Basket card<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Mobile Add to Basket card with a tappable counter<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Confirmation Overlay<\/strong><\/p>\n\n\n\n

I designed an improved overlay informing users of their tickets being added to their baskets. I found the overlay was awkwardly placed in the corner and did not at all stand out. In many times I didn’t even realise it was there.<\/p>\n\n\n\n

\n
\n
\"\"
Existing overlay (top right corner)<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Redesigned overlay<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

I created an overlay that not only aesthetically utilises the Brand Guidelines but also functions to inform the user of what exactly they have just added to their basket. They are shown event details and number of tickets so they know exactly what they’ve added.<\/p>\n\n\n\n

I also removed the ‘Continue Shopping’ button due to it being redundant and to reduce unnecessary complexity. If the user wants to continue shopping they can hit the ‘X’ or click off the overlay. This is an intuitive action.<\/p>\n\n\n\n

About Us Animations<\/strong><\/p>\n\n\n\n

I worked on creating illustrations and animating them for the ‘About us’ page. I created three animations:<\/p>\n\n\n\n

    \n
  • Wine bottle falling<\/li>\n\n\n\n
  • Wine glass filling<\/li>\n\n\n\n
  • Hot air balloon flying<\/li>\n<\/ul>\n\n\n\n

    These serve as transition assisters between the established sections of the about us page. They create enjoyment as they are triggered by scrolling across the page (mouse enter for prototyping purposes due to Figma limitation).<\/p>\n\n\n\n

    Wine Falling<\/strong><\/p>\n\n\n\n

    As the user scrolls across into the next section, the wine falls bridging the sections.<\/p>\n\n\n\n