There is not one ideal design process. It changes according to your goal. Are you designing a new product? Are you planning to redesign something? Are you going to add a new feature or change the whole design?
In our case, I am going to tell you our design process about adding a new page/new feature which is called My Old Jobs to our existing product. It allows you to see your old requests whether it is done, cancelled, no quotes recieved or you gave up from doing that job.
A short summary about how our platform works: Let’s say you want a new bath cabinet. You go to Armut, answer some questions, give some details and request a Bath cabinet quote. This is called a ‘job’. And the answers you gave about the job is your ‘job details’. You then wait for professionals to send you their quotes. You recieve up to 4 quotes from four different professionals for your request in every job. The jobs can be in different states (e.g. “job is done”, “none of the quotes was selected”, “no quotes received”, etc.), which we call ‘job statuses’. Once you get the job done, you can rate and leave a review to the professional.
How and why did we decide to make this new page?
We believed it was going to increase engagement. That was our insight from user interviews.
We created a fake door test for the first time and asked why do they want to see their old jobs.
What was the result? 15% percent of the users who come to My Jobs page clicked on it.
What did the users say? The list is too long but they gather around this three reasons:
“I want to see the old quotes I recieved for my request and the professionals’ contact numbers.” “I want to see the details of my old requests.” “I want to share it with my friends.”
How did we start the designing process? One of our missions is to make users live a good and memorable experience. We already had a My Jobs page. So we needed to make a consistent design within it but under a new section called My Old Jobs. Before starting the design process we came to the table with the Product Manager to set the different job statuses. We then organized a meeting with the developers to talk about how we are going to deploy this, what our boundaries are, what we can do and what we can’t. There were some concerns about the design decisions. In each job status, there are different things you can. For example, you can:
See the quote details
See your review if the job is done
See the old messages with the pros who quoted you on your request
Get a new quote from different pros
Should we put the different choices in a 3-dot menu like we do in existing My Jobs page or should we make the whole card tappable?
Putting links to the existing pages in a 3-dot menu was going to be easy as winking for the Front-end team. So, we agreed on moving on with the 3-dot menu and prepared the designs and a prototype. Thanks to Figma, making prototypes is easier than ever. If you have a good structured design system, designing is much easier and faster than you think.
Test phase
We needed to test our designs to see if they actually work, so we decided to make a usability test. At first round, we made a usability test with 10 participants. Two of them had never used Armut before and 8 of them were already users. The underlying strategy of choosing these participants was to see how already-users and non-users interact with the product and what are the differences between their capabilities.
At the beginning of each test, after having a chat with the participants there was one thing I was always telling before starting the test:
“The reason we are making this session is to test ourselves, our designs to see if we provide you a good experience and what we can improve.”
We gave them different tasks and wanted them to think-a-loud by expressing their thoughts and feelings while using the prototype. We wrote down their actions and thoughts. One task example: You created a Home Cleaning job in January but cancelled it. Could you please go to your messages with Professional X?
Only 1 participant, who was a already-user, clicked on the 3-dot menu on the first try. The rest tried to click on the card directly.
We asked what would you expect to see after clicking on the card. All of them told that they would expect to see a page which includes job details, old messages, their reviews and a CTA-button.
This was something we have never thought about.
It was so understandable. They want it to be simple, everything in one page. And with a CTA-button. That’s it. The simpler, the merrier.
So we started discussions with the Product Manager and the Frontend developers. How much time this was going to take? What was going to be the ROI? Eventually, the users could find their way after one or two click. Do we really need to deploy a new page which includes everything just like the users wanted or should we avoid their needs and let them learn while they were using? So that, Front-end team could spend their time on other projects?
The answer was a big NO.
Just like I said before, user experience comes first for us. So we did it, we gave the users what they wanted. And made a usability test again, with different participants but with the same profiles, 2 non-users, 8 already-users. In this second round, none of them lost their ways. But again, we learned a lot of things from the tests.
Takeaways:
You need to know your audience.
Listening to the users doesn’t always lead you to the right path, observing their actions does.
Taking good and detailed notes during the tests can save your life. Because you are going to iterate the process according to these findings.
Not every user use your product in the same way, but you need to design for the majority.
You need to have a recruitment strategy for your participants.
Try not to use the word ‘test’ while you are talking with the participants.
You need to test your product until you are convinced that your users could find their ways easily and with the least errors.
Bonus takeaway: Users expect to go to someone’s profile page by clicking on the profile photo because this has become a common approach thanks to social media platforms.
Thank you for reading.
Comments