Applying gamification elements to Ecolab existing app design to better incentivize high quality cleaning results.
This UX gamification design includes research, real life data analysis, gamified UI/UX design demo and points gamification system.
Conducted competitive analysis and heuristic evaluation on current market to look for site potentials.
Prototyped low fidelity and high fidelity web pages in Figma, including log-in process, media, and blog.
Abilect SA
Swiss platform for facilitating the management of property- related service requests
Thumbtack is a home services website, which allows users to search for, rate, and hire local service providers. The target user group is exactly same with Abilect's, but their services function similarly, including home services seeking, booking and reviewing. Thus, I went through Thumbtack home page, professionals searching page and Q&As to get a grasp.
The main takeaways from SWOT are:
Strengths:
Very clear hirer and hiree mode switching in homepage. The search prompt on home page is helpful. Cost estimates are handy. Recent questions from Thumbtack customers automatically scroll.
Detailed customers’ review in Q&As.
Weaknesses:
Scrolling texts are dynamic in homepage. However, what if people spotted something they wanna catch, there’s no hotlink embedded and it’d disappear shortly.
Down arrow on the first screen doesn’t do much.
NO SEARCH BAR IN Q&As, which doesn't seem friendly to unexperienced users who might not know the search shortcut (Ctrl+F5 in PC). In that case, they will have to scroll through to find what they need.
Opportunities:
Try making the scrolling texts clickable? Or do like a pause when the cursor hovers over in homepage.
Adding a search bar would give a boost to the usability of this page. Additionally, under customers' review, there’s a possibility to have something interactive, such as a comment section.
Threats:
I genuinely dislike the messy categories they have under the explore tab in homepage.
When clicking on “Explore”, the drop down has three parts. Are they equally weighed? Is there one part which is more important than the others?
Location
Problem Description
Evidence
Severity
Suggested Solution
The two faded image panels in the middle give out only budget calculation info. It'd be fine if that's something we want the users to take away at the first glance. However, I thought we could've highlighted the house repair, maintenance so and so.
If user came in blank, they wouldn't know instinctly know what Aiblect does, and if they're not looking for budget calculation and they also didn't have the patience to scroll down, they might've just left.
Serious
Would be great if we had two or three house services up there.
Potential Client
Based on previous market research and the audit of current Abilect website, one of the biggest client group would be a household who needs responsive professional handymen, and has a desire for the guide to trendy house decoration, wall painting, pool renovation ideas, and so on.
Potential AbiPro
The professionals Abilect wants to target are those who are self-employed, full-time contractor, or a small comany in related industries. Abilect doesn't do freelancers, which means those who use this platform will have to be legally employed.
In this case, I picked a self-employed artisan, Angela, who is seeking more legal work opportunities with stable income.
The other is a contractor in a construction company, Kevin, who wants to learn more about the locals and better communicate their needs with his company.
Due to the target user groups, Abilect allows users to choose either "login as client" or "login as a AbiPro". For example, if the user is a first time client login, they will need to register. A good registration page should be straightforward, intuitive and welcoming.
The idea behind dividing the screen vertically is to move information entry to one half and keep user focus on the registration form. Also, the other half can be used to display other eye-catching info, such as quotes from previous customers, before they get to register. In that case, it will be likely to engage audiences.
On the current blog page, there seems to be a lot going on. The screen has been taken by one article, so that the other has to get minimized on the side. I'd like to make sure that after we prioritize the trending ones, we still have space for other articles in other categories / labels.
.png)
In order to look more professional, I added media contact information on the to, and reorganized the press content by the time when the articles got published. Also, the listing allows users to get a grasp on when and where the articles were published without clicking into the actual.
.png)
.png)