I’m sorry that the mobile version
of the case study is not available.
Please visit the page
by using a desktop or laptop.
Thank you for your understanding.
Have a good day.
After all these analysis and work of four weeks, now it was time for in design phase. The insights that I created and the design objectives that I determined guided me through my work, even though the lack of user behaviour data and tests strongly made itself evident. Thus I drew the wireframe of the welcome section of the home page by using Balsamiq. That helped me collect the ideas in pieces in my mind.
I needed to make a few decisions on design technique
after drawing the wireframe of the welcome section.
After deciding the operation method, I wanted to clarify some issues that were the base of the design, such as the colour palette and typography.* Therefore I designed a pixel-perfect home page of the garden machinery by using Adobe XD.
I try to make designs for a target audience or user while making a design. However, in many projects that I’ve been involved to this day, I’ve witnessed many times that project owners or project shareholders have the visual ideas and expectations in amateur or professional sense. I try to include these
in the design process by making workshop and exchanging opinions. Applying and testing their suggestion and ideas help to increase the satisfaction
of the project and to strengthen the business relations.
for Garden Machinery
A home page is a shop window and I wanted all users to be curious, to explore and to find what they looked for easily while visiting the page. Therefore I preferred to use ‘more details, view all’ instead of ‘add to basket’ or ‘buy now’ in the call-to-action buttons.
I strived to use the visual elements that include straight lines, a few colours in the design by assuming that overwhelming part of its customers were male – according to real-life data 80% of the customers were male.
Key Website Research Highlights Gender Bias – http://bit.ly/2yHwoiK
I wanted to increase the user’s curiosity and to encourage them to explore more. Therefore I avoided density and using horizontal full-width elements above the fold. In order to encourage scrolling, I tried to make a small amount of content visible.
The myth of the page fold: evidence from user testing – http://bit.ly/2mSAxOm
Unfolding the Fold (Insights into Webpage Scroll) – http://bit.ly/2yEisWR
The homepage, even though it was made to clarify the design standards like colour, typography, was also created as a prototype that had the particular actions, like quick look, add to basket, detailed searching, login, rather than a static page, in order to make it clearly understandable by the company how we tend to communicate and relate with a user.
What just surprised me at this point was that the content of the homepage was commented as dense because of the sections and functions in it. This was an understandable situation, considering that the point of reference of the company was competitors’ websites. After exchanging views, we determined the standards by making some changes upon the project director’s requests.
for Gas Products
I designed another home page, determining a different colour code for gas products according to my hypotheses based on the differences of the product groups. I redesigned the content and hierarchy by the product group, keeping the essential e-commerce functions on the home page unchanged.
I listed the gas bottles, which were suitable for regular and re-order products, in a slider on the welcome section of the page. I assumed that ‘add to basket’ would be more accurate as a call-to-action for the product group than ‘more details’ or ‘‘quick look’.*
* When I examined the past orders, I noticed that more than 50% of gas bottle orders were re-ordered by the same customers.
Product Detail Page
I made the function and design of ‘Basket’ on the product detail page different. While listing the products desired to be purchased as a drop-down list throughout the website, the function on the product detail page was showed similarities with ‘My Basket’ page.
My purpose was to have the user who was in the decision stage take one more step toward the checkout.
ORDER & CHECKOUT STEPS
The checkout steps of the order completion process at an e-commerce web site would be expected and wanted to be as short, impeccable, smooth, simple and understandable for users from all levels as possible. For UI/UX designers, that could turn into a new challenge in every project.
I used again the competitor analysis when designing the checkout and order confirmation steps for APS. At this point, I thought that comparing it with some examples that had been most commonly used would be helpful to determine the needs, despite disadvantages caused by the lack of user test and data.
Comparisons, in-store observations that I made and experiences I had from the projects that I designed before for various sectors in London showed me what users wanted ‘To Have Control’ and ‘To Feel Safe’ themselves at the checkout process.
Thus users would be able to review all the flow and the choices they had made by scrolling the page, and return.
A new user who is to place their first order faces 17 to 27 fields in a form, while a registered user faces 8 to27 fields.
According to a research conducted on the world’s 60 largest e-commerce sites, an e-commerce site in 2019 has 12.8
form fields in their checkout flow and also on average 26% of users have abandoned purchases during the checkout flow solely because the checkout flow was too long or too complex.
Checkout Optimization: From 16 Form Fields to 8 Fields – Baymard Institute – http://bit.ly/2Ny9anH
I monitored real-time user behaviours by using some analytic tools after launching the website.
As a result of my observations,
I determined the most frequent issues users encountered and I made some changes on the form fields in the checkout flow to decrease the friction, like removing the ‘Re-type password’ field, adding ‘Sign in’ button.