Hey designer, keep yourself in a good shape 🏋️‍

Personal UX Challenge. Case #1 Delivery Company Mobile Experience

Challenge motto ‘Let’s make the local web a better place’

This story has begun with an unexpected combo — black&white 7-day photography challenge, I took part in, and frequent interaction with delivery company because of online purchases recently.

​​At first sight, nothing in common between both of these things, right? However, my brain managed to push me out of the comfort zone. The voice inside of my head asked why not to try to work out your design muscle and fix things that ruin your life. Not literally that, just things that make some routine less enjoyable. And here’s me saying ‘Seriously, why not? Hold a sec, I’ll get myself out from my comfy box 😸’.

I’m ready! Where is your UX problem? 💪

I decided it’d be cool to solve one particular UX problem and challenge someone else on social media to follow the same routine for the next seven days. What I can say, it was too optimistic. What I’ve been thinking of — 1 day ≠ 1 UX solution. Because, it took me a day just to think through the issue properly considering this initiative is a side project.

So the next thought was to make a challenge a weekly thing, having more time at weekends in particular. Each case is going to be based on my own experience with a product or service and observation skillset 🕵🏻‍♀️ Promise to convey the problem as descriptive as possible so you could really feel all the struggles 😬.

Problem

Now let’s start a serious design talk.

My first target was pretty obvious — to improve one particular pattern a user (in this case me) follows to complete a certain task. As it was mentioned above, recently I’ve had regular experience with the delivery company — Nova Poshta (translated as ‘New Post’), a leader on Ukrainian market of delivery services (unfortunately, they don’t have a proper English version of the website 🤷🏻‍)️. Since a tracking number is sent to my phone primary via text messages or within messenger app (in Ukraine, Viber is super popular thing for businesses to communicate with customers about online purchases), a starting point of the user journey is a smartphone.

Company has two ways to interact with customers here — web and app solutions. The app is focused on those who send and receive parcels on a daily basis hence asks to create an account in their system. I’d call them business customers like small businesses, retailers, shop owners etc. On the other hand, the website is focused on everyone and no one at the same time since there has not been defined clear purpose as it is hard to grasp from the first site what its main goal is whether promotion of the brand, whether getting users to sign up, whether download app or to track a parcel. Anyway this is another problem for another UX training because there can be a whole huge-in-scale discussion on whether or not to use native app or think about another progressive solution. For now, this is environment we are going to deal with and work in.

Desktop version of Nova Poshta website. It’d be good enough if it was early 2000s 🤷🏻‍♀️

iOS version of Nova Poshta app. Unfortunately, I didn’t find how to track a parcel. Apparently it requires to sign up to do that (one more thing that could be done differently, for example ask about authorization after user checked delivery detail as a reminder to save information. This is less intrusive approach to handle sign up for a product)

Next thing, I’ll ask you to ​​imagine the situation I usually face when dealing with delivery of my purchases. After getting details of the parcel, there is pretty enough information for planning pick up from Nova Poshta delivery office. There is always a text message to notify ​​that the parcel has arrived. But it comes in with a bit of delay. So I find it handy to check the tracking number during the day if I can pick it up earlier and avoid any queue on busy hours. One thing to consider, sometimes I turn off notifications to reduce messaging overload and ​​to be focused during a day. There is another insight — when you’re waiting for something you have just bought you can’t wait to have it and hold in your hands. This behavior is dictated by expectations of the reward (hello psychology 👋). Eventually, you may check that delivery status for several times per day like a kid on Christmas morning.

Where is mahhh box??? 🤗

Mostly, I do check a tracking number with my iPhone whether I’m at home, at office or on the go. It’s already an established behavioral pattern to take smartphone with you almost all the time 🤳 No judgement, please! We are all phone addicted these days 🙃.

Everything is fine. Nothing to be worried about. No addction at all 😜

Actual User Journey

Earlier it was said that the journey will take place on mobile. So let’s have a closer look.

Step 1 — Place an order in one of online shops

Step 2 — Get a call from a manager

Step 3 — *Make a payment (optional step because payment can be made after delivery or before even manager has called you)

Step 4 — Receive a tracking number

Step 5 — Copy the number in messages (sometimes it may be a tough task because some messengers allow copying only a whole message not a piece of it 😔)

Step 6 — Open browser (by default, I use Safari on iOS but I know there is a certain number of people using Chrome on iOS)

Step 7 — Type in a search request in the address bar

Step 8 — Get Google results with several links (one of them leads to home page and among others there is one labeled as ‘Track’. This step may be skipped if full url is typed in, however, I’d like to pay attention to it since there are a couple of things to improve).

Notes. Labeling things is an integral part of great experience with a product and there are lots of materials to help designers and product owners improve that, for example, to use more descriptive and clear naming choosing precise words that explain what user may expect performing a certain task. In this case, one verb is a very obscure and unfriendly way to communicate with customers. Something like, ‘Track by Number’ or ‘Track a Parcel’ will add more clarity about what task can be accomplished following that link.

Step 9 — Click on ‘Track’ link.

Notes. Clicking on such label, expectations are to open up a page that allows you to track, presumably, a parcel. There is no certainty since it is not said initially in the Google search result link what to track. Perfect match is when verb goes along with a noun 👫

Step 10 — See a new website loaded with a first thing to look at — pop up module asking to download an app for Android or iOS.

Notes. I have doubts that this is something you can anticipate after clicking on a word ‘Track’, right? The most obvious thing to happen next should be a form to track by number not a pop up obstacle to overcome and only after that to do what you were initially intended to do on this website. The best way would be to get rid of this slamming-into-facing thing 🤦🏻‍♀️.

Step 11 — Click on the button ‘Go to website’ below brand logos when the pop up module is active.

Notes. This step is tricky because there is a close icon in the upper right corner of the pop up. This tiny icon raises more questions that it can answer. When we click on it, are we going to the ‘Track’ page, ‘Home’ page or wherever else since there has already been misleading behavior? Another question to ask — what is the difference between close icon and the button saying ‘Go to website’? Am I on the wrong website right now if they ask me to go to THE website? My suggestion is to rid of this pop up. If there was a goal to lead users to Android and iOS apps there are plenty of other solutions how to achieve that goal.

Step 12 — See webpage of Nova Poshta website.

Notes. What can be expected here? I still keep in mind ‘Track’ label. It was my starting point and my ultimate goal. If I wanted to go to another page I would click on their primary url, right? Don’t know how it works but sometimes link in the pop up led me to the homepage and sometimes to the page dedicated to tracking option. Chalk up one to frustration and disturbing feelings. And remember I may be in ahurry somewhere on the street with a busy traffic in the big city. Or I just don’t want to spend my time on pointless actions… At this moment, emotions get a bit exaggerated 😤

Step 13 — Okay. Type in a track number.

Notes. Simple, right? Nope. Website is not responsive and can’t adapt to your screen size, in other words it’s fixed width. Here’s css specifics width: 940px; ta-da. Consequently, to hit into the target of the input field webpage should be zoomed in. This can go nuts because zooming in can’t be always precisely done and there are several extra actions needed to get to the destination. Now imagine it’s a cold frosty winter day outside. Are you happy to do all that tackling with your freezing fingers? I bet not.

Here’s me on my way to pick up parcel at Nova Poshta office ☃️

Step 14 — Type in a phone number. In case extra detail is needed before picking up, for instance, how much to pay for the delivery etc.

Notes. The same issue here with input field.

Step 15 — See a new page with a result of tracking. This is the final destination.

Notes. Again zoom in is required if I want to see the most important information — status of my delivery. Is it still in the city of departure? Is it on its way to my city? Is it ready to pick up in the office? However, thanks to certain information and visual hierarchy it’s impossible to do right away once the page has been loaded.

It could take up to 15 steps sometimes more, sometime fewer. However, in the end you get yourself stuck with virtuous jumping from one screen to another for a long time when ideal case scenerio would be to reduce number of steps up to three after seeing Google search results.

Here’s a screen recording of the routine I go through each time checking status of my parcel on mobile 👇

Painful experience in action 😭

Lots of issues to be fixed with setting right goals, designing a proper path to achieve those goals, delivering user-friendly mood along with proper tone and voice. Further, I’ll talk about solution — how it may work and look on my opinion.

Solution

On the stage when a user has typed in a brand search request (for me it’s ‘nova poshta’), brand can already interact and orchestrate next steps and behavior. So I started thinking about solution from this point.

Fix 1 — Replace label ‘Track’ with ‘Track by Number’ to approach in more friendly way to clients

Fix 2 — Get rid of the pop up promoting apps. It’s unlikely user is going to download the app being on the go and using mobile Internet connection.

Fix 3 — Make a webpage that is linked to ‘Track by Number’ responsive. For transition and testing purposes it’s good to apply responsive changes to this page at first. So the rest of the website won’t be affected if analytics show worse statistics.

Fix 4 — Remove all none-essential elements that don’t contribute to the main purpose. For example, right sidebar that duplicates the form from the left along the links on the right that just distract from the main goal of this screen. Remove, also, extra space in the middle of the screen with one line of text that is not properly translated and remains in Russian, but for Ukrainian version it changes correctly.

Key elements of ‘Track by Number’ page

Fix 5 — Improve form accessibility and consider various occasions how user can interact with it. First things that came to my mind were the size of input fields and clear labeling with explanation of each input. Having that, the way how tracking number has been received can provide a good piece of insight. Copying digits from different messengers it’s better to have some room to delete odd stuff inside the input (see screenshot sample with the shortest option of copied track number I could achieve after copying from iMessages).

Tiny input fields and poorly executed clues for information format inside

Fix 6 — Make a clear call-to-action (CTA) as a sum-up of the form. From the samples above, it’s clear that visually there is a lack of focus for the button to submit the form to the server. First of all, because of the red background under button itself. This background can be taken as a clickable element due to the bold color choice. Btw, this a sample how improperly implemented visuals can affect the whole experience in a wrong way. Secondly, aesthetics and microcopy of the button ‘Find’ don’t speak for itself. Grayish tones doesn’t say it’s the most important button of this screen. As well as ‘Find’ doesn’t resonate with the rest of the chosen communication style. If we are referring to the certain functionality as ‘Track’ it’s better to stick to the chosen vocabulary and be consistent how we call elements through the whole user journey. These recommendations are valid if button is going to contain one word of action. However, I prefer explicitly written copy for buttons. This will help set manageable expectations. So for this case I choose microcopy that follows ‘Show Shipping Details’. This is exactly what is going to be presented on the next screen after pressing the button.

Fix 7 — Set proper clues to help user fill in the form less stressful as possible, ideally without errors ✅ Clarity is a main criteria to follow to succeed for such good cause. Firstly, replacing question mark icon with something more descriptive will solve the case. My suggestion for the first input — ‘Where to find tracking number?’ This label will show up a few lines of microcopy to say explicitly where a tracking number is located in the invoice issued by the delivery company. A good practice is to add visual enhancement of the explanation.

Omit ubiquitous icons that don’t add clarity to the interface 🚫

For the second input, it’s good to add its own explanation copy. For example, ‘Why phone number is needed?’ This label is going to work the same way as the previous one revealing a few lines of copy below.

Fix 8 — Reorganize information of the page after the form has been submitted. Hierarchy of content defines a lot when it comes to perception of the interface. The main thing we are eager to see about delivery is its status. Unfortunately, in the current version it’s somewhere in the bunch of lines of text when it requires a prominent place to highlight what user came here for. In my design version of this page, I pull out this particular piece from the rest and put first right after the page title. Having status info on top satisfies user’s need and only after that we can offer any other information whether it’s a payment, or sender credentials, or extra detail.

Consistency in function and form should be followed despite anything 🙌

Fix 9 — Distill essentials and separate equally meaningful functionality into its own screen. Shipping details is a place where interface should tell user as much as possible about user’s parcel and in the most convenient way. And full-stack survey is not a part of that information. Surveys are something you need to conduct to validate some ideas, to check performance and to get new information on how customers perceive your product or service. To have valid and statistically correct results, questionary should be relevant to the situation. There is no need to ask how users are satisfied with a service even if they haven’t interacted with you somehow as the shipping detail says their parcel has only been proceeded in the place of departure.

To get feedback from the client is a hard but achievable task. Treat them well and they will be eager to share their opinions. It’ll be great to offer a survey as a complimentary service not as a competitor of the main one. In my solution, I’ve removed survey at all from this page and replaced it with a copy saying that users may take a survey if they want. However, there are other ways to accomplish gathering feedback from users from integrated functionality of the website to third party solutions. And, this is something that needs another research 🧐

Alternative Design

Fun part 🥂 Implementation 🎊

All the problem-solving thinking and figuring out how to deal with all the variables of the equation are the most consuming part of the design process. Only jotting everything down can beat it 😆 Now you know how hard it was for me to write down all the thoughts and I still think I missed something ahhh

Anyway let’s have a look at the key points of the alternative design:

1. Navigation has been shrunk into two options — logo to navigate to the homepage and ‘hamburger’ menu. At this point, I haven’t thought through the navigation since it is a completely different pattern to work on. For the test (which I’d love to run after all, here should be a dreamy gif 😌), such solution is quite enough.
2. Form got clear labels above input fields, sample hints inside and extra details for new users under helper links below the input.
3. CTA now is the most prominent element in one session.
4. Validation of the input filled data got subtler look and feel.
5. Overall aesthetics has been changed to less aggressive and less stressful communicating in calm and reliable way.
6. Information architecture got a total revamp putting only important things first and secondary afterwards.

Visuals it’s like a dessert after main course 🍫

Based on thoughts from paragraphs above, shipping details screen got status information standing out as a focal point. Moreover, a bit of life has been added to previously serious and corporate information style with the help of icons. I’ve made a quick exploration on how they might look like for different status of the parcel delivery. However, I’m not 100% sure about ideas behind it. I bet there can be even better solution how to represent Processing, Shipping, Delivered, and Returned if to spend extra hours on that. This was said by my inner perfectionist 🧐 Sometimes we don’t get along with each other 😁

In result, alternative design came up friendly, approachable and goal-oriented. Certainly, there is a room for improvements and further experiments here. But for now, that’s it. The only regret is that’s a concept that may not find its way to being implemented into real website.

Having all this done and presented to you, dear reader, I’d like to summarize everything into a few sentences of lessons I’ve learnt.

1. Side none-commissioned projects broaden your way of thinking.
2. Challenges ignite your inner enthusiasm and empower you up with self-confidence.
3. Self-initiated projects teach how to set deadlines and keep you in line training your will power. It’s especially important if there is a problem of getting sh*t done.
4. Own initiatives are super fun 😜 Really. You’re the one who is in charge of all the decisions and ideas. A bit of freedom won’t harm especially when there is so many liabilities in the life of today’s digital creatives.

Special kudos for everyone who helped me along the way of writing this post.

👏 Marina Yalanska for challenging me in the black&white photography challenge in the end of November. Thanks for the burst of creative energy!

👏 Dasha Dzhyhun for proof-reading and making this text more enjoyable to read.

👏 Roman Kozak for encouragement, love and such helpful constructive critique sessions. Thanks for always believing in me!

👏 Everyone who read this till the end! Thanks for the patience and stamina getting so far. You are awesome 🤟

We need to celebrate this almost 20 min read 🤩

If you have any questions, suggestions, things to discuss about this post, I’m eagerly looking forward to your feedback. Also, stay tuned as more cases are on their way 😉

You can also find me on

… Dribbble sharing tiny design pieces called ‘shots’

… Behance describing large ‘projects’ in detail

… Twitter sharing some design-related thoughts

… Facebook posting a combo stuff of persona and professional

… and Instagram sharing pics of how I see the world

See y’all!