CASE STUDY
Drone Logistics Delivery-Website Responsiveness Design
Role:
UX/UI Designer / UX Researcher
Responsibilities:
Qualitative Research / UX Design / Visual Design / Prototyping and Testing / UI Design
Tools Used:
Project Brief
The project involved developing a scheduling flow for deliveries of a drone logistics service, It also required developing the website to be responsive on a number of screens sizes from desktop down to mobile.
The Problem
The problem was that users needed a way to schedule this drone service to deliver their orders in a way that helped them more than current delivery services, such as pick up and in person delivery. Throughout the initial research some insights were found from user personas to suggest how this problem could be managed.
The Goal
To develop a website for the company which has a great customer journey when using the service, providing a simple process to organise their delivery and have it sent when it suits the user best, they can also then have it tracked through their mobile or email if they choose to divulge that information. There is no need to create an account to make the process cleaner for first time users as well.
Research
Define the User
To begin the process, understanding the user base and finding users from different areas in the business was the first key step. Two key user groups were identified, professionals who live fast paced lifestyle in cities who aren’t at home much, and people who are unable to leave their home as easily.
Key findings
The findings were that people liked the idea of being able to choose when to have items delivered when it suited them, however they were slightly initmated by the use of drones as they felt they were not tech savvy enough to use them. This was a valauble insight into understanding that the service must be simple and friendly to users and explain it to them without jargon.
Ideation
Idea generation
Ideation was already taking place while research was happening, and the updated research informed the ideation stage back and forth, with ideas leading some of the research to understand users pain points. The process was cyclical until there was an understanding of what was needed from the product.
User journey
In order to understand the user further, a user journey was completed to see how they would interact with this service potentially. This included further testing by asking users from the research at the beginning how they would usually order things online and what happens when they need to change deliveries.
Sitemap layout
Once there was an understanding of the User journey for the product, it was possible to understand how the layout would function and by doing a quick value proposition, the key features of the website were understood. The layout had to be minimal to not confuse users coming from their shop website looking to organise delivery.
Design
With the site layout completed, initial low fidelity and mid fidelity wireframing / prototypes were implemented looking at different solutions on how a user would enter this website and what they would first look to. Getting feedback from potential users before a usability study was crucial as the time aspect was limited in this project.
Some of the screen below show the development of looking at the website layout for multiple screen sizes as the brief was to develop a responsive website for the service including phone through to desktop users.
Some of the screen below show the development of looking at the website layout for multiple screen sizes as the brief was to develop a responsive website for the service including phone through to desktop users.
Testing
Usability testing
For the usability testing, a research plan was developed to see how to measure success in the testing phase. The study consisted of an unmoderated study allowing the user group to have free reign over the desktop website to explore. It was clear that there was a misunderstanding of how many users look at website through different devices. Although users were told to use a desktop, some opted for tablet usage instead. This led to research seeing what the market share of website viewers was for each device size. This allowed for further development on what screen sizes would be most effective.
The other insights from the study included that the size of the proceed and back buttons were too small for certain users and also they were unsure how to go back in certain sections of the process which was to be refined for the high fidelity prototypes.
The other insights from the study included that the size of the proceed and back buttons were too small for certain users and also they were unsure how to go back in certain sections of the process which was to be refined for the high fidelity prototypes.
Usability report & Insights
Re-design and further testing
Before proceeding to final high fidelity, another round of quick testing was completed to see if the issues from the study were resolved which seemed to be a success. Further testing would need to be completed while building the high fidelity to make sure that the branding would be suitable to give a friendly aesthetic to entice users.
High Fidelity Prototyping
Design & Testing
Once the issues from the usability study were resolved, high fidelity prototyping could begin with the addition of branding and illustration. The High fidelity prototype below shows how the home page functions. The branding of the project was important as the research showed that users were slightly intimidated by the technology of drones and wanted a simplistic feel. To help with this, the branding was kept friendly by using illustrations and no unnecessary jargon.
Even the selection screens were kept fairly minimal but still held all the required information.
Even the selection screens were kept fairly minimal but still held all the required information.
High Fidelity Prototype link: https://xd.adobe.com/view/b40da1fe-c76f-4ec5-a668-90797260090f-e15e/
Branding / UI Kit
For the development of this project, a well developed brand identity was important to the sucess of the product as the brand had to give a friendly experience to prevent the users from being intimidated by the tech used for the service.
Within the document, a comprehensive UI kit was developed which could be carried over for devleopers to use and also other designers to implement for the brand guidelines of the project.
Brand colours examples below:
Within the document, a comprehensive UI kit was developed which could be carried over for devleopers to use and also other designers to implement for the brand guidelines of the project.
Brand colours examples below:
Responsiveness
Phone screen development
For development on the tablet and phones screen sizes, I looked at seeing how to have a similar amount information available to the user and still have the scrolling effect that the website home page uses. For the areas of website header, I used my research from the course to understand how users like to interact with mobile website when it comes to tabs, and the hamburger menu was the most suitable for the website.
Project Learnings
My project learnings were understanding that in user testing the emotions of a user are very important as they sometimes decide whether they will use certain products, even if it is subliminally. Also looking at research even trhough the design process was equally important to help this project, an insight would be understanding the market share of screen users to decide what devices to develop this design for based on it’s product use.
