Project Overview

Background

Based on the challenges gathered overtime regarding the existing site, such as cart abandonment, low conversion rate, difficulty in locating recently purchased items and the responsiveness of the whole platform. The management figured that the platform needed an elevated path to purchase experience from the bottom up. The challenge was to improve the experience, customer loyalty and ultimately improve conversion rates.The main objectives were to:● Improve the shopping experience of DealDey users.● Increase sales by optimising conversion rates.● Improve the site’s usability.● Give the site a look and feel more in line with its rich brand heritage.

Solution

We found a way to incorporate and support it existing brand/culture content which brought up a new strategy of thinking and we sought out to support its higher goals of making the site responsive, and also we leveraged analytic data and the result from a user test to develop a better interaction.

Rationale for design solution

Design critique done during idea presentation in the collaborative brainstorming session helped us to consider some criteria such as clarity and simplicity. Our decisions were also based on the result of the usability test carried out.

What I did

I came up with an easy to understand landing page, cart page, and checkout process for web and mobile site.Sketched, wireframes, prototypes, user testing, and communicating ideas to developers, quality assurance, designers and other key stakeholders.

Our approach

So we needed to find ways to incorporate and support its existing brand/culture content. This brought up a new strategy of thinking and we sought out to support its higher goals of making the site Responsive and also making it more transactional in a manner that leverages on its great discounted products and service deals, pairing it with beautiful interactive design and streamlining the userflow in a way that delights and promotes deals.

User Personal

After conducting user interviews for several of our users, so in order for us to constantly learn and remind ourself who our customers are, we created multiple key user personas as our potential customers.

Customer Journey Map & Empathy Map

When creating the Empathy Map, we discovered a lot of pain points and dissatisfaction in regards to our users. The main issues included difficulty understanding the interface. During the research we observed where users were having challenges, so we needed to design a more intuitive interface to improve the user experience. To improve this, we had to gain a better understanding of our customers, their expectations and needs.

Paper Sketches

With the help of this low fidelity paper sketches, the UI/UX design and development stage was smooth, it took two weeks, during which the mobile app design idea went through many transformations until it was finally brought to completion.

Site Map & Style Guide

There was a strong focus in developing the design direction, first. Setting a design language that adopted DealDeys’ timeless qualities but translated well on the web, through any interactive touch-point.

The Design

After planning and prioritizing based on important pages from the sitemap above, we moved on to the next stage of the design process.It was our custom in the design team to give each member freedom of expression. After a thorough competitive analysis, everyone was asked to come up with his or her own idea by sketching how they feel the site redesign should look like and what functionality should be featured, improved or removed.After some minute we gathered all sketched files, It’s now time for everyone to individually pitch his/her sketch in the presence of all Design and Development team for the winning idea to stay and others kept for future references.Next was to list out on a whiteboard all new and existing functionalities and features collected from sketches for everyone to vote which features and functionalities to retain and ones to let go.Now it’s time to re-sketch using the winning sketched idea along with the retained features and functionalities.

Landing Page User Interface

High Fidelity User Interface

Desktop Landing page showing some service and product deals

Product details page showing customer reviews and ratings, recommended deals.

Service details page showing deal descriptions and recommended deals.

High Fidelity User Interface

Mobile Landing page showing some ser-vice and product deals.

Responsive product details page showing shipping information, highlights, deal prices, discount, amount to be saved, number of already sold items and buy button.

Service details page showing deal prices, amount to be saved, percentage off, deal expiry period and buy button.

High Fidelity User Interface

Edit or add new shipping address popup

Select shipping address popup with option to edit or add new address

High Fidelity UI for Cart page and Checkout process

My shopping cart page showing both service and product deals

Checkout process and order review

Learnings and Results

Learning

I learned the value of working in a team, it was really great sharing ideas with peoplewith the aim of achieving a common goal.

The result

Landing page now simple and deals classified as top deals and best sellers now been exposed in maximum for buyers confidentiality.The new conversion rate increased by 15%.Because of this, I was nominated for Hero of the week award the following week after we launched the new landing page and mobile web redesign.