Using primarily Adobe XD, with some icon and image making through Adobe Illustrator and Photoshop, I created a website and a corresponding app for a fake furniture store, Maynooth Furniture. With consideration for a target user persona, I created rough wireframes to get the general layout of the website, then cleaned the wireframes by adjusting the positionings, adding stock images, and font styles. Afterwards, I condensed the high fidelity mockup into a mobile version, where I then added micro interactions through Adobe XD's prototyping stage.
Through this case study, I greatly learned how to use Adobe XD more in depth. I also learned more about designing for stores, in this case, furniture.
To have a sort of direction for designing the website, I used Katherine as the target user persona. In brief summary, she is a middle aged, well-off executive, who uses like using Pinterest and style guides looking to remodel her house, newly vacant of her university-bound children. With this information in mind, I believe themeing the website as sophisticated and modern would cater to her socio-economic status. In addition, as a Pinterest user and an inspiration seeker, I believe the layout should be densely populated with furniture items to make the website more familiar, productive, and marketable for Katherine.
I created rough wireframes for the home page, category page, and product page. For the homepage, it shows different sections, such as, promotions, new arrivals, themes, and clearance deals. Theoretically, each section (i.e. New Arrivals Style, and Clearance Deals) is able to slide from left to right to show even more furniture options, hence the last items being visually cut off. The category page has a pretty standard format where the products are show in a grid list with a way to sort them based on themeing, pricing, and etc. For tehe product page, it is also shown in a pretty standard format where the item is shown in a gallery, and the details listed. Although the layouts are not necessarily unique, I believe for the purpose of the website, its does the job perfectly. Some inspiration comes from www.habitat.co.uk and www.made.com.
After creating the rough draft of the website, I cleaned the positioning, spacing, added proper images, and stylized the site. I chose a white background and fonts that looked clean and sophisticated to match the website theme. It would present the website and its product to be more on the higher quality side of the market.
