ConceptMarket

Design Process & UX Framework

The Full Story

This projects was how I was able to create a retail fashion website using the UX framework.

The Aesthetic-Usability Effect states that users have a more positive emotional response to good visual design. Hence the Emotional Design framework was used extensively throughout in order to trigger a positive emotional response from the users so that they can shop easily. The emotions that the newly created website can have a great impact on the users’ perception of our products.

The three aspects of emotional design are important; namely function, aesthetics and fun. Therefore, as designers of the website, it also important that we constantly try to balance out these three aspects. To do this, our job was to consider the connections that can form between our users and our products that they see, and the emotions that can arise from them. The Multiple Faces of Emotion and Design were used; namely, visceral design, behavioural design and reflective design.

The goal, is to design an e-commerce website selling fashion products that feel as attractive, real, and authentic as they do organize and efficient. We pledge to aim for our users to have a shopping experience filled with pleasure, joy, excitement, humour, anticipation, surprise, or any number of points on a spectrum of positive emotions. In addition, it was important that there is a balance of all the three aspects of the emotional design framework in order to make the website delightful for the users of the ConceptMarket website.

Visceral Design

According to a study done by Blue Corona, 38% of people will stop engaging with a website if the content/layout is unattractive. In creating the prototype of the website, much focus was done on creating an interface that looks pleasant and attractive, while also striving for simplicity and engaging enough for the user.

To keep the website simple, and as minimalistic as possible, we used monochromatic colours as the main colours for the website. The header and footer are in black and the words are black if it is against and white background and white if it is against a black background. The reason for this choice of colour scheme is inspired by tech conglomerate, Apple. The Apple website features a monochromatic colour system as it wants users to focus more on their products instead. Likewise, in ConceptMarket, we would prefer that to be the case as well and have our products to be the centre of attention, alongside a minimalistic layout.

In placing the Promotion banner as the first thing that users see on the website, we try to achieve a positive visceral reaction by the user as it sets a positive context for every subsequent interaction and additionally, the “Love at first sight” will encourage positive socialization of our products.

In our pursuit of making the website to look simple and minimalistic for our users, the font Montserrat was used in our wordings and button UI. The Montserrat font is great for creating a simple and clean-looking web design. As a san’s serif typeface, Montserrat has high readability and makes a great main copy of the website hierarchy.

Behavioural Design

A good behavioural design begins with understanding the users’ needs. Our priority at ConceptMarket is for the users to be able to purchase their items without any problems and to reduce confusion when selecting their items. In order to do that, we enabled users to preview pictures of our clothes on the homepage. If they are looking for a t-shirt, a picture of a t-shirt will be shown and if they are looking for a pair of jeans, a picture of a pair of jeans will be shown, so on and so forth. The User Interface (UI) at the homepage has only the essential information – Picture, name of product, and the price.

The titles of the products and their price also represents a clickable button which will direct the user to the product details page which will display everything that the user needs to know regarding the product they selected such as the material, colours available, sizes available, price and also the ability to add to cart. Upon hovering the mouse over the picture, the title or the price of a product, the title and the price of the product will be underlined. This is to indicate that a selection is being made by the user.

The promotional banner also functions as a carousel menu, in which users can click left or right to view our other promotions and information on new arrivals.

Reflective Design

Reflective design was often thought about in creating the website for the phone version. I thought of the user’s perspective to have the same experience buying items on their phone, as compared to on their desktop or PC. Having the same layout in the desktop and phone versions allows users to replay the same experience or to pick up where they left off purchasing items, regardless of which web version they are using.

By signing up for an account, the website stores the user’s address details and payment details, making it easy for users to use the website again and make recurring purchases without the need to add in those personal details again.

Users are also available to “favourite” a product when scrolling through the page and add it to their wish list, which allows users to be able to visit again at a later timing, making their browsing experience a smooth one.

The membership also allows users to feel at ease when shopping, by taking advantage of the membership benefits and encourage these users to become loyal to ConceptMarket. This helps to create memories for the user because as they shop, they remember of the benefits they can get while shopping as a member.

We added our social media links to the footer of the page in order for our customers to not only come comment and like our social media posts, but to also share their experiences with others in the community and to create a sense of pride and identity when wearing our products.

Summary & Feedback

Summary

In summary, all the three components of emotional design have to work together to ensure that the user finds the experience of navigating the website to be pleasant and easy by making their shopping experience more delightful. By balancing out Visceral, Behavioural and Reflective design, we ensure that the ConceptMarket website is delightful for our users.

Coursework Feedback

Upon creating the prototype of the ConceptMarket website, the prototype was shown to our company’s supervisor, Mr Nizam Shamsuddin, and he gave his feedback on the user experience of the mobile app. The feedback given is stated as followed:

“Dear Design Team,

The website looks very appealing and due to this, it was very easy navigating through the website and I am able to find the things that I wanted to as the menu icon had all the clothing types available when pressed on. The addition of the sales section was good and necessary as most of the sales made at the ConceptMarket outlet were items that were on “SALE”. Everything was clearly visible and presented in a way that is not confusing.”

Analysis of the feedback given

Mr Nizam mentioned that the website was easy to navigate as it was simple and kept minimalist. The menu icon featured all the clothing types available. The addition of the sales section was good and necessary as most of the sales made at the ConceptMarket outlet were items that were on “SALE”.

Lastly, it was good to feature the benefits of the ConceptMarket membership so that users can become regular customers and to continue shopping with us.

Changes made to the website after feedback

Changing the colour of the sales section to red, so that users can easily identify as the colour red signifies “alert” and stands out amongst the other sections.
Greater emphasis on easing the user through the buying experience with a search button at the top of the page so that users can easily find the item they want.