Designing a Utility application named Mistri — UX case study
Credits
- Anna Gurung : www.instagram.com/gra.cestudio/
- Melina Bhattachan : www.behance.net/melinabhattachan
- Prelisa Dahal
- Swornim Bajracharya : www.instagram.com/sworbuzz/
- Tanisi Chand : dribbble.com/skywalqin
Timeline: 1 Week
Materials: Sticky Notes, Pen, Paper, Figma
UX Techniques Used: Competitive/Comparative Analysis, User Personas, Systems Map, Site Map, Detailed Site Map, User Flows, Sketch, Usability Testing, Wireframing, Prototyping.
Brief: Mistri is an app that solves the problem of the company that is trying to give reliable and fast service to its customers. Handyman service that allows you to request/ book the service and get whenever you want. The focus services are electrical, plumbing, cleaning, and other services with affordable and fair price rates
Nepal in general is facing a surge in labor export which has left a huge void in the country on the skilled labor side. Common households and small businesses are facing problems in maintenance and also a lot of times during the construction phase. Even with the manpower available, there is always an issue of punctuality, quality, reliability, and fair pricing which leaves patrons frustrated.
Mistri application is designed to help Nepali’s solve their maintenance issues at a reasonable price with quality, efficiency, and reliability. The idea developed out of a problem that the common Nepali household faces. We consider reachability, quality, and commitment as our core values.
Design Process
Interview and Key Takeaway
Competitive/Comparative Research Analysis:
To gain inspiration for the application, we started by analyzing four major utility applications. Our main motive in comparing these applications was to identify the similar features between them. In doing so, we could design an application for Mistri application that would incorporate suitable features from these websites and would be able to separate itself.
Here are the 4 Handyman Utility websites used for competitive research analysis:
Sriyog — sriyog.com
Handy Nepal (HN) — handynepal.com
Herchar — herchar.com.np
Sajio Marmat Sewa (SMS) — sajilosewa.com
User Persona
we made a user persona of the potential customer. Stepping in their shoes helped us identify the expectations, concerns, and motivations of a user while using the Mistri app.
From the user persona, we were able to identify the user’s needs and how they can cooperate into The Mistri app:
- Cost of handyman services.
- Make it easy for the users to navigate their required services.
- Recommend services to the user by taking into consideration their last service requests.
- Allow users to view and give reviews to the handymen.
- Complete the users’ requests smoothly without their interference.
- Gain the users’ trust and loyalty.
Site Map
From understanding the problem statement better with the analysis we were now starting to do the site mapping as we had clear objectives on what is to be included and where.
The site mapping was a process where we filtered and iterated the features that we previously listed again.
System Map
Site mapping enabled us to understand what goes where but we were not sure about what does the user see when s/he first use our application. So we created a system map that could exactly make us understand the flow of the system better.
Detailed Site Map
The system mapping gave us an idea of what the flow will be like but understanding the details on what goes where what is clickable and what is not took us time. So to minimize that time and think through the main screens we started with putting the details from the site and system mapping were discussing the components and detail plan.
User Flow
We created a user flow for each of the personas to showcase the steps that the user might take to reach their goal. This allows us to focus on what steps each user might take and also helps us understand how to provide that experience in an effective way when designing the app.
Development Phase
Sketching
To develop the design for the website, we started to sketch the website pages using the user flows diagram as a reference. We used A4 size paper and pencil to draw the wireframe designs for the website. We drew all the main pages. Designing the website in paper sketch allowed us to analyze design concepts for the website layout and wireframe.
Usability Testing
After completing the wireframes, we began the usability testing with the three participants from the previous interview. Usability testing was necessary for us to determine if the primary need of the user had been addressed.
Key findings from the usability testing:
- Participants were able to navigate the app properly.
- Some participants found it difficult to understand the packages.
- Some participants were given the goal to book for the cleaning service and they could easily complete the process.
Low Fidelity Wireframe
To develop the design for the website, we started to sketch the website pages using the user flows diagram as a reference. We used A4 size paper and pencil to draw the wireframe designs for the website. We drew the home page and the service page. Designing the website in paper sketch allowed us to analyze design concepts for the website layout and wireframe.
High Fidelity Wireframe
Thank you for reading!