Zap package delivery app: case study

Once upon a fortnight, I decided to take on the challenge of designing from a brief. A ready made brief forces you out of your comfort zone and you get to explore avenues you otherwise might have never thought of exploring. Plus it gives you a chance to work on interesting projects and explore how you’d go about solving for a paying client should they come your way. Off to the races I went and landed on UI Coach.

UI Coach is my new found design briefs platform. It auto generates UI briefs and is also a resource of design inspiration. The brief I got was to design a cheap package delivery mobile app that shows users the best delivery options based on the location, type and weight of their package. Furthermore, the brief was to be delivered in Space Grotesk (bold and regular) typeface and a set of given brand colors

Zap delivery app brief

The outcome

Here’s the final output of the process. Feedback from users I tested with was positive: it’s clean it’s simple and clear.

zap delivery final screens

zap package delivery

My approach

I started with asking the question “who would be the users of Zap and what could be their pain points?” A few thoughts on the users…possibly:

• The real housewives of the community
• Small businesses within the community like fast food joints, shops and stores.

And their possible pain points could be…

• Finding a reliable delivery service that’s affordable
• Finding a delivery service immediately they need it

I then moved on to the next step: how can we (me, myself and I) solve those pain points in line with the brief?

• A simple linear experience with a chat bot?
• Conversational linear experience?
• A form with a set of fields and drop downs?

I settled on designing a conversational linear experience. Human beings are conversational so this will feel natural. The execution of this idea begins with the user selecting the category which their product fits in. From there, choose an approximate size and weight of their package. They then add the package destination. Now based on the size and distance, we can then find all the possible options. Because we want the best option for the user, we make sure we recommend that to them but give them the freedom to choose an alternate option. They finally add the recipient details and make the order.

The project scope

I limited the project scope to focus on the order flow. I further made the assumption that the on-boarding process was already done and now the user was ready to use the service.

The user flow

With scope in mind, I designed a user flow for the process.

zap delivery app user flow

The style guide

From the design brief, I created the brand’s style guide consisting of colors, typography and icon assets. Brief descriptions were given to each element (colors and typography) so anyone from marketing to developers to fellow designers can easily understand and apply the style guide.

zap delivery app style guide — typography

zap delivery app style guide - colors

The wireframe

With brief sketches on paper, I transitioned those ideas to wireframes showcasing the layout of how the user flow will turn out on the mobile app.

zap delivery app wireframe

The spruced layout

Finally came the polished screens. There were 2 iterations in some cases such as the Home and map screens.

zap delivery app home screen v1 v2

zap delivery app map screen v1 v2

After making the adjustments, I had it tested on an actual phone via Figma Mirror so the experience could feel more real and natural than testing it out on a laptop. The user appreciated the practical feel and commented that the overall experience was smooth in terms of clarity of the steps and simplicity of the layout.

The takeaways

1. Conversational design is the way to go as it feels natural to us as human beings. We are starting to see more of it everyday with the emergence and prevalence of A.I. platforms like ChatGPT and its friends.
2. Conversational design requires simplicity and specificity. You have to be clear and specific on what you’re asking the user to act on otherwise they can get lost and give up on the task.
3. Being confined to somewhat sober/dull-ish color set allowed me to find creative ways of bringing out vibrance and life to the app. I accomplished this using a colorful icon set without deviating from the brand’s colors.
4. Lastly, I have just learned my use of the word “the” in this piece is almost to infinity and beyond. I promise to keep it minimal next time. Nonetheless, thank you for getting to the end of this case study, the time you’ve put here and in all my writing is much appreciated all the time. Have the most awesome day.