Case study for customer selection and adding shipping address in one card

Creating a smart solution in only one card for searching customer and adding shipping and billing addresses without using many popups.

The problem

Nowadays, editing or selecting something from a list in popups are very annoying for users and it’s not a good solution while using complex web apps. Sure, it’s needed and it’s very important when something needs to have more focus and when you need to have a decision from users e.g. warning but it’s called dialog.

The challenge

The goal is to have a seamless and very comfortable solution for particular cases which would be used on desktop and handheld devices as well.

1. Make it fast and easy to use
2. Give focus on only one section
3. Give a generic solution for particular cases

Kickoff

I knew the main problem that needs to be solved so I started to collect solutions while using enterprise apps like Salesforce or Eventbrite on desktop and mobile as well.
It was getting clear in the early stages of researching and based on my experiences that there are huge forms and very complex cases to create a generic solution for all of these. But in some cases, the theory and the solution which came to my mind during I was using those softwares would be fine.

Train of thought

I felt to get a clear insight into the problem I have to use these apps on mobile. Why? Because I think it’s a challenge creating a contact, an event, or just filling huge forms on mobile. I think everyone is getting uncertain when start filling a form on handheld devices. Yes, I feel the pain… But in some cases it’s inevitable.

Particular cases

focused on finding a solution in only one card. So I imagined my mobile is a card because it has a fixed width and I tried to avoid popups because of the pain point. I thought a card has an app in itself and started to find cases based on research.

– Select and purchase a ticket for an event
– Checkout process
– Select customer and add shipping and billing addresses

Pick a case and prove the theory

I picked a customer selection and add shipping address case and started to create. It shows clearly it’s a very simple case to be proven so I start creating wireframes. I inspired by the swipe gesture on mobile so I wanted to guide the user and through the whole process based on this.

The wireframing process already shows my theory could be a valid and seamless solution.

I was excited to have a UI design for this stuff and instead of testing. It’s not a huge product so I started creating user interface design.

The prototype

Get the Figma file here