Published on | Prototyping: From UX to Front End — Medium Mj

How I made that process easy.

Make sure poor design choices aren’t causing engaged users to drop off at the last second.

Image Credit: ezbuy

Objective:

To improve the current experience of choosing a collection point by reducing the amount of friction and steps while keeping the user experience simple, intuitive and engaging, so the customer can find the one best for them easier.

About EZbuy

EZbuy (owned by EZbuy Holdings Limited) is a dedicated provider of professional online shopping services.
Founded in 2010 by a group of aspiring entrepreneurs, ezbuy quickly rose to become Singapore’s first and largest overseas shopping platform.
As of today, EZbuy provides shopping service from China, Taiwan, the USA for more than 500,000 Singaporeans, 50,000 Malaysians, Australians and Thai people. EZbuy strives towards service excellence while keeping their focus more on local demands so as to develop new services that better suit their customers.

Current delivery process

EZbuy has two options currently in their app for delivery, one is Home Delivery and another is Self-collection. Let me explain the both options to you so that you can understand it better.

Home Delivery: This is very simple as in other shopping apps, you just need to add your address where you want your product to be delivered & it’s done. The important thing you should know about home delivery is, that EZbuy charges for it, it’s not free.

Self-collection: This option is pretty cool & absolutely free, I really liked it as it gives me the freedom to collect my product at my desired time and location. some of the big e-commerce brands doing it already like Amazon. But EZbuy has different options for self-collections as well. The user can collect their items or products from MRT stations, Neighbourhood Stations & Warehouse, whatever suits them the best. And I am going to improve this option for the user so that they can proceed to the self-collection option without any mistake or confusion.

Current flow for choosing collection point.

Problems

You can see in the above image clearly that I have to go back every time whenever I select any category. Eg. If I am on MRT stations screen and want to change it to Neighbourhood then I will have to go back and choose that. Really a big pain to the user. The weight is also making confusion under collection stations.

Detailed information about the composition and care is crucial for positive checkout experience. One of the most important thing while checkout process is the type of delivery, like is it home delivery or self-collection? is there any charge for any of them? these are the main questions there to consider. Customers need to know what they going to do on that specific screen.

Now the problem in the current app of EZbuy is the Self-collection flow. It is very confusing as there are so many steps to choose them, the logic of product weight and timing for collections are also the major issues for confusing users to choose the right option for collection point in the current app.

Let’s break the problem into smaller part and analyze each one of them.

Problem analysis

Let’s have a quick look at each of the stages.

Stage 1: Order summary, the user is excited to go further and choose a delivery option. At this stage, we should be as informative as we can so he quickly proceeds to the collection point stage.

Stage 2: User chose to pick up the product by himself. He is excited but is also cautious at the same time because he has different options to choose. He is very careful which option he selects and where he will get it delivered. As a designer, it’s our responsibility to be as informative and useful as possible at this stage.

Stage 3: The user might be a bit anxious, cautious and might make some mistake at times. It’s our responsibility to build a strong trust and guide the user if he makes any mistakes.

Stage 4: Post-checkout, the user will be very excited and might want to pay for the items. It’s our job to manage everything for him properly.

Note: Stage 2 & 3 are what we will be primarily focussing upon in this article.

Research

Next, I carried out a basic user research. As I always like to discuss things with others so for the research purpose, I had a couple of Skype calls with my colleagues in Malaysia & Singapore and I asked about their experiences about online shopping and delivery options. In addition, I also consulted my colleagues here in India. I installed the app on their phones and observed them using it.

Discussion highlights

And while this was a very short exercise, it gave me a lot of good insights and nuances about how people across the globe thinks and behaves about delivery option from an online store. It also helped me figure out the rest of the roadmap.

User journey map

Using the feedbacks and insight from the user research, I mapped out the customer journey to dig down deep into every single stage and figure out all the emotional states in the user’s mind. It helped me to look at the complete EZbuy app user experience from the users’ perspective, from understanding their situation, actions, thoughts, feelings, emotional experience to touch points that allow your users to reach their goals.

Customer journey — inspired by Zhang Han

The Solution

I had everything now, the problems, research and a user journey map. I decided to list the pain points and then the solutions so that I can explain it better to the user about my thinking behind this solution.

Pain points:

Collection points
Deciding locations
Weight factor
Time factor
Long process to change the collection point
Schedule of collecting

Features & solutions:

No confusion about pickup stations
Merged all the pickup points without mess
User can decide the location easily
No worries about weights of item
Choose your preferred time to pickup
Freedom to choose the pickup locations

Let me describe the solutions in detail

1. Order summary

I started the process from the checkout page where it asks for the delivery address first. I made changes to the top where it was showing the products which I decided to buy, It was just an item image before without details.

But I added details of item users are going to buy, like price & description. so the user doesn’t have to go back to see the product details. You can swipe left or right to see next item or just tap on view all to see the list of products you are going to buy. The details of products make it easy to proceed for a user.

New order summary screen

2. Self-collection or Home delivery?

Now the users have to choose whether they want to it to pickup by themselves or just want it to deliver to their place. So I decided to make it simple and easy to understand for users with the two option on this screen so the user can choose wisely which options suits them best and the charges for that option accordingly.

Delivery options

The above screen will come up if a user has not chosen any address before. In another case there will be auto defined address which user had used last time, He can select the last address used by tapping on that address, you can see the image below for a better idea.

Delivery options with last used address

3. Choosing a collection point

This point is very important in this whole article as the challenge was to make easy to choose the collection points. For this, I researched a lot and had a great discussion with people around me.

For choosing the collections points the current flow of app is not straight forward, it makes user confuse and irritate to go back again & again to choose the new location.

I would like to remind you again that the EZbuy has three options for choosing the self-collection point for getting their item.

MRT stations(for less than 8 kg)
Neighbourhood station(for less than 25 kg)
Warehouse which is currently written as ‘Self-collection’(for less than 50 kg)

First of all the 3rd category of collection station above is pretty hard to understand, because all of the three categories itself are under self-collection, so it should be warehouse as I changed it.

Now the weight factor, I asked few user about the weight importance of product which they are buying online. The 85% majority of people said it doesn’t matter to them as they can see the weight details of a product on the product detail page and can choose the right option for delivery.

Eg. A ‘single seater Sofa(furniture)’ is hard to carry with them in metro trains, it would be good to collect it from my nearest place whether it is warehouse or neighbourhood station. I mean they are expecting the App to user adaptive so that it can show the collection stations intelligently by assuming the weight of a product.

For the self-collection option timing is very important it should match with our time to collect it. I decided to keep it in the current flow with more freedom, the user can choose their own time slot to collect it, they just need to fill the time details and get the collection points result as per their desired time.

Once a user taps on ‘‘Pickup Yourself’’ option for delivery, it will take them to the below screen, where they can see the places near to them first. After that they can personalize it according to them, I am going to explain it in detail below.

Pickup locations in a single screen

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. –Antoine de Saint-Exupery-

I followed the thought of ‘Antoine de Saint-Exupery’ and tried to remove the extra steps and screens from the current app for choosing the self-collection points, According to some smart people ‘The more cruft you can cut, the more efficient you can be in conveying your message.’

I merged all the option and make it workable on a single screen (please see the above image).

Let me explain my thoughts for this single screen’s elements:

The Search in top

You can search a place or station by its name. Sometimes it is very inconvenient to see every single address in the whole list of data, By tapping on this search field user can directly type the location for which they are looking to get collect their item and it would be very easy & useful to find the pickup points for them.

One more thing which I think would be helpful is the ‘auto complete’ feature while searching a place. Auto-complete transforms a recall problem into one of recognition. As you type into the search box, it tries to predict your query based on the characters you have entered. see the example below for better understanding.

Auto complete search option

2. Scrolling navigations

In the current app, for choosing the stations I have different pages for all the three categories, like if I am looking at MRT stations and decided to see the neighbourhood station then I’ll have to go one screen back and choose the next option to see the list of neighbourhood stations.

I just removed this friction of steps and make it all on a single screen and more clear to see for all users. Now they can choose pickup stations accordingly. In few cases, there will be the items more than 25kg, in that case, we can deactivate the other options like EZbuy doing currently.

2. Choosing preferred time for collection

For this I kept a card fixed at 3rd positions, so the user can easily see this and tap this for selecting their desired time for collecting item.

Filter by time

When a user taps on this card the app will take the user to a screen where they can fill the timings accordingly. Eg below:

choosing time slot for pickup

Interactive Prototype

Please find below the embedded prototype for the visuals. For a better experience, you can open the prototype in another tab. Feel free to play around with it to experience the entire flow.

<a href="https://medium.com/media/597de2262b420f0ebbdf327002a867e7/href">https://medium.com/media/597de2262b420f0ebbdf327002a867e7/href</a>

My work process

I work with User-centered design process, my designs are based on user research, analysis, insight, concept and iteration.

image credit: Daniel I Kim

User Research

People have different ways to research about their target users but the aim is same. User research is the comprehensive and multilayered activity whose aim is to collect information about the potential target audience of the product. Via a number of techniques, user researchers collect and then analyze the information obtained from real users, and this outcome usually allows the designers to work on the optimal solutions which will make the product user-friendly and attractive.

To validate my assumptions, I started the process of user interview, for that, I interviewed few online shopping lovers.

Interview Questions

Do you prefer shopping online or offline?
How often you buy things online?
Which app do you use for shopping?
What encourages you to use that app?
What are your hesitations and influences?
What do you care about?
Do you like to self collect your item or home delivery
How do you feel when you get your item delivered?
Any other shopping apps you like the most and why?
Problems you faced in those shopping apps?

I then kept mapping their responses and started comparing all the answers.

Created user journey map

you can see it above.

Wireframes

Wireframes gave me an idea that how things would look like and made my work easy for visual design. I mostly use sketching or low-fi wireframes for my projects. Low-fidelity prototypes, in particular, are rough representations of concepts that help us to validate those concepts early on in the design process. I use low-fi because Low-fidelity prototyping helps me to find the middle ground between overspending and overthinking, between too little investment and too much user validation. By building a practical, preliminary version of product.

Low-fi Wireframes

Visual Designs

For the UI design, I kept the current EZbuy’s brand colors in my design as it gives us the both professional and rich feel. I challenged myself to create something very cool and clean. I went ahead with a light UI keeping usability and easy navigation as the main focus.

Visual Designs

All Done!

I hope it gave you a little insight into the decisions I made. This solution helped in to make the self collection process easy for EzBuy and I am proud of this. It was a great challenge to work on, and I hope you enjoy using it. This is no where perfect but I feel with its unique approach of choosing self-collection points , this idea can help users to buy more products and let them choose the pickup points easily to self collect.

Let me know what you think! Bye!

For more works, check me on Dribbble & connect with me on LinkedIn.

Cheers!!

EZbuy’s Self-Collection Process was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

EZbuy’s Self-Collection Process

Cool stuff, every week

More Articles