04 design
mid-fidelity designs
sunday 6th, 11pm-1am + monday 7th, 9am-12pm (5 hours)
I started to design mid-fidelity screens using a mixture of basic shapes, placeholder text, Koala fonts and colours. I quickly transitioned from low to mid-fidelity designs focusing on the layout, order and hierarchy of all the content and features in the hero area.
It was challenging to understand what order the product name, product images, AR/360 degree buttons, product selection and descriptions should follow in the hero area. It was evident that I needed to test my designs and get feedback before continuing with my hi-fidelity designs.
findings and observations
Some of the observations and feedback points I noted when testing the mid-fidelity designs included:
• users immediately went to scroll the image carousel
• the hero product image is 'too cramped'
• users weren't sure what the product name was
• AR mode & 360 button need to be close to the product image
• users skipped over the product description
• users missed the 'product dimensions' tab as it gets lost with the delivery, trial and warranty info
hi-fidelity designs
monday 7th, 2pm-12:30am (approx. 7 hours)
After conducting the mid-fidelity tests, I took on the feedback and made design iterations incorporating Koala brand font styles, colours, images and even designed custom icons for the AR/360 degree buttons based off the 'chat button icon' in the website navbar.
Hero area specifications
navigating through the image carousel
Users can swipe through the hero image, tap the arrows or on an image in the thumbnails to view images.
AR mode and 360 degree view
Users can use the AR mode to visualise how the sofa will look in their living space. They can use the 360 degree view to look at the smaller details such as the fabric and sofa colour.
Viewing product dimensions
One of the insights was for users to quickly access product dimensions especially if space was an issue. Placing 'Dimensions' earlier in the hero area would please users during their research stage.
Configuring sofa 3 step process
By adding numbers to the selection process indicates to the user that they are required to choose an option to proceed. Instead of a drop down menu, I have laid out all style options and complexities for the user to make a choice visually. This will avoid them going back and forth between options especially if they are deciding between multiple sofas.
prototype
tuesday 8th, 12:30-1:30am (1 hour)
design system
tuesday 8th, 5:30-6:30pm (1 hour)
I created a design system using the Koala brand colour palette and fonts to maintain consistency throughout the design of the hero area.