These sketches help me to lay out the basic information architecture and developed several potential ideas to incorporate into its UIs, which mainly focused on how to keenly search for plumbers and plumbers recommended.
Digital wireframes
Once the architecture was finalized, and basic components agreed upon, I set about implementing the designs into Figma. Below are some of the early iterations of the proposed user flow.
Lo-Fi prototype in Figma
Iterations
“ If to enter the navigation bar and then enter the service I want, I wish it should guide me to those plumber nearby me. ” (P5)
According to the pain point, we know most people get panic when lack information or are read through heavy text about tech. Hence I emphasize the Plumber Service Summary for better engagement. Also, relevant plumbers in the community follow up so that users can keenly reach the right expert they want.
“It depends on what plumber specialists are. I prefer to read their profile. I don’t care if they’re near me because they will come to my home.” (P6)
Supporting evidence from the usability study, the keywords on the search bar, or below on filters were some of the solutions I used to ease the process. It helps users have a clear idea of home tasks when they are blank for urgent cases.
Based on the Gestalt principle of Proximity, grouping objects into a single area can also have a strong relationship effect in between. Consequently, I decided to move the button overlapping the segment below.
“It depends on what plumber specialists are. I prefer to read their profile. I don’t care if they’re near me because they will come to my home.” (P6)“The date/time is a bit not completed and wishes to be more clear how to select and schedule.” (P1)“If it can show the dates that plumbers are available and can avoid back-and-forth communication.”(P2)
2/3 participants mention that they want to know the plumbers’ available time. This means that improves the calendar or signifier of the plumber’s available dates. The lighter gray indicates the date which is not available, so users can only book the dates on darker ones intuitively.
Critical Usability…
1. How might we separate users from the navigation bar to the search bar was considered a challenging part before reaching the plumber profile.
2. It’s necessary to offer a plumber service summary, whether for those who never had experience or not.
3. Plumber’s location might not be a determining factor in the decision-making process.
4. Consider tracking appointments, it helps to track and engages with their reservations for better organization.
5. Keep the interface and elements intuitive and simple for better engagement.
6. Insufficient payment methods could hurt the user experience. As a result, the burden will fall on other teams such as sales and customer service.
• • •
Refine
Naming & Logotype
Propipe is the combination of two words ¨Pro and ¨Pipe¨, which represent plumber in the profession. Besides, for better pronunciation and impression, I took the image and homophonic from ¨Popeye the Sailor¨. In logotype, I want it to be simple and focus on our professional services while using the app. Eventually, I settled on a logo that was just the name.
Color Palette
The color blue symbolizes trust, safety, tech, and professionalism. The orange color palette is a complementary color that lights up the app with energy, honor, and convinced power. Additionally, a great deal of grey and white to give a calm, neat, and balanced appearance.
Design System
.jpg)
.png)
