UI/UX Design Case Study: WATCHIO App

Ronisha Lauchande
5 min readFeb 28, 2021

Summary

WATCHIO is a location-based mobile application, that I created for an imaginary Security Company to improve communication between the security and the resident and enhance customer service.

My Role

Planning the whole experience from user research and discovery all the way through visual design.

Tasks: Interviews, Defining Problem, Hypothesis, Personas, Sketches, Wireframes, Testing, Visual Designs.

Context

Security provides the service of securing the property and the residents. This service is performed by one security that starts the shift in the evening before all residents arrive home and it ends in the morning.
The role of security is to be present at the resident’s house when they arrive. However, when more than one resident arrives at the same time the security is not able to contact the other resident, due to the poor communication method, which also causes misunderstanding between them and leads to customer dissatisfaction.

Process

I used the Lean process to create my project, which allowed me to keep a user-centric mind, solve the problem and meet the user requirements.

Interviews

Intending to understand the problems that both security & resident are facing, I interviewed two securities and four residents.

Results:
1. There needs to be an effective communication method that the security and resident can use to contact each other.
2. Security is unable to manage when two residents reach at the same time and therefore becomes overwhelmed.
3. Resident feels a lack of service when security doesn’t reach or contact the resident.

Defining the problem

Security needs a better management system, which helps the security and the resident communicate with each other quickly and efficiently. Effective communication will eliminate frustrations and disappointments between the users and help the company deliver a better service.

Hypothesis

I made assumptions using the “How Might We” technique that helped me focus on the defined problem. Then formulated hypotheses with statements like “if [I create this experience] then [this will be the outcome]” — which helped me think of ideas to solve the defined problem.

How might I help the security know that which resident(s) are arriving at what time?

If I create a tracking system in the mobile app that shows and alerts the security about the arrival of each resident then the security will be able to plan ahead and contact the resident if he cannot make it up to them.

How might I help the resident & security communicate with each other in a quick and efficient way?

If I create a messaging and calling feature in the mobile app then the resident & security will be able to communicate with each other in a quick and efficient way.

Forming Assumptions
Forming Hypothesis

Personas

Since I was creating an application for both the security and resident I created two personas, which characterise these users. These personas have helped me maintain a user-centric focus and constant reminder of user needs and their frustrations while building the product.

Persona 1
Persona 2

Sketches

Aiming to create a simple and easy-to-use design; I started designing screens using a pen and paper. I designed different versions of the same screen until I was happy with the layout of the features and elements on the screen and thought would meet the user needs.

Key features

A tracking system that tracks and alerts the security when a resident(s) are about to reach home.
Messaging and calling features that will allow users to contact each other quickly and effectively.

Initial Sketches

Wireframes & Prototype

After drawing a bunch of sketches, getting user feedback and determining the features that I need in the app I created high-fidelity wireframes using Figma, which also allowed me to create interactive prototypes.

Wireframes

Testing

I used the interactive prototype in user testing to test the usability of the app. I monitored user behaviour during testing to see where they got confused, where they struggle and where they got stuck. This data was then used to make changes and improvements to the design.

Key Findings:

Positive

1. Users were able to complete tasks quickly.

2. Navigation was easy to use.

3. Users were happy with the effective communication method.

Negative

1. User profile page required a button to go to messages and calls.

2. “Add button” was hard to notice on the security profile page.

3. The home page did not have enough content.

Visual design

I wanted to make things easier and more manageable, which is why it took several tests and iterations to create the final product that met all user needs.

Click here to view the complete Prototype.

Visual Design

Challenges

  1. Making the design quick and easy for my users.
  2. Performing multiple tests and iterations to the design to improve features including - navigation and page layout.

What can be improved?

Although the usability of the app is good, its visual needs to be improved to make it more attractive and engaging. I need to spend more time researching the user interface and be aware of the latest trends when designing an application.

Thank you for reading till the end! Feedback is appreciated

Unlisted

--

--