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.

Korkmaz V.

Back to Home Page

DESIGN

Wireframe

Visual Design

Wireframe

wireframe of APS

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.

Should I start working with the mobile-first design approach/strategy?

The website was supposed to be compatible with mobile devices. I decided to give priority to making a responsive design for desktop devices, because of the lack of analytic data and the demographic features of the customer that the company shared covered a wide audience. Then I was going to design the critical screens for mobile devices, considering the usage habits that mobile devices provided.

Should I first draw the wireframe of the specific page or whole pages?

I wasn’t going to do a user test. I thought making the pixel-perfect designs would help me create high-fidelity prototypes that I needed and so establish more open communication with the company.

Visual Design

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.

Home Page

for Garden Machinery

Above the fold of the website
Best selling Products and Special Category Section of APS website
All Categories and Top Deals Section of APS website
Hiring, Recommendation and Gas Product Section of APS website
Garden Accessories and Equipment, and Support Service Sections of APS website
Blog Section of APS website
Company History Section of APS website
Newsletter Subscribe and footer sections of APS website

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 Biashttp://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 testinghttp://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.

Detailed Search Features
Quick Look Features
Product Cards

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.

Home Page

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

Product Detail Page of APS Website

BASKET

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

MY BASKET

CHECKOUT

FLOW

CONFIRMATION

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.

To Have Control

To allow users to be able to easily return and
edit the choices that they made
while making a purchase.

To Feel Safe

To allow users to proceed properly in the process
with a human-readable and meaningful message or
notification for each action.

“Shneiderman’s Eight Golden Rules“ guided me most while working on the checkout steps.
Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaceshttp://bit.ly/30KLIHy

My Basket

I simplified the header and footer fields for users to focus on the purchase and to complete the process successfully.
Under the ‘Order Summary’ field I liked to influence positively the purchase decision by showing users the positive aspects of the shopping experience the website offered in short titles, like security, refund, company history and free delivery offer.
I tried to encourage users o purchase more than one product by the ‘Recommendation’ field under the product list.

Checkout Flow

I decided to show the checkout flow in a vertical alignment on a single page.
Thus users would be able to review all the flow and the choices they had made by scrolling the page, and return.
I strived to keep the form fields of the checkout flow at minimum, to the extent permitted by Ecwid.
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

01. CUSTOMER

INFORMATION

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.

02. – 03.

BILLING AND

DELIVERY

ADDRESSES

04. PAYMENT

METHODS

05. ORDER

REVIEW AND

BUY NOW

ORDER

CONFIRMATION

RESEARCH & ANALYSIS

What were the company’s needs?
What research methods did I use?
What were user needs and my insights?

CONTENT DEVELOPMENT

How did I build the information architecture?
How did I build the website navigation?
How did I develop the content?