UX/UI Designer
2 Week
Wireframes • High Fidelity Prototype • Landing Page
Solve Employment is an initiative to help young adults in non-first-world countries get jobs. The jobs are in different fields, such as customer service, translation, web design, etc. Solve Employment is the continuation of the work started with Solve Education, which teaches English to the same demographic. The idea is — they learn English on one platform and then use it on the other platform to get jobs, creating a pipeline of educated workers.
Their users range from 15 to 30 years old and are in Southeast Asia. They are both male and female and mostly low income. The platform is also for people looking to employ these users — employers are older and professional. Their age range is in the late-twenties to early-fifties.
The team had seven designers, and we split up into two teams at first. A research team and “interface” team — if you will. Once those on the research team finished the initial research, they joined the interface team. We split into three teams, with each team handling a different section of the platform.
One of the first things we did as a team was to navigate through the site, from the landing page through the platform, looking for usability issues. One glaring thing we noticed was that Solve Employment required the users to sign up for a game, and its login credentials were used to sign in to Solve Employment. There were several problems with how they implemented it because when the user clicks on the signup button, it took into the game’s landing page — Dawn of Civilization. This site had its visual language — very different from the Solve Employment site — and the explanation was buried in the text. When clicking a signup button, the user’s expectation is for a form — not a video game. We wondered what happened — did we click on the wrong place, was this a pop-up ad, malware, were they running a scam? (a team-member actually thought this 😂). We contacted the stakeholder who clarified it for us.
The purpose of the game is for users to practice and grow their English language skills and vocabulary. Through the game, they can also test the student’s proficiency and judge their skill levels based on what level they’ve reached in the game.
Lucky for us, this was one item we didn’t have to worry about since they had a well-developed-not-yet-implemented style guide.
As for the platform, we found a couple of things that could be improved aside from updating the site with their newly created style guide. One that I noticed was that messages could only be sent or viewed on the messages page. This means that if either the job-seeker or employer worked on other tasks, they wouldn’t know they got a new message unless they were on the messages page.
Another confusing thing (kinda’) was that when you first land on the landing page — it’s on the job seeker side. From there, you have the option to switch to the employer side. This also applies if either user gets signed out for whatever reason. It makes sense to land on the job seeker side since there’re more seekers than employers, but it adds an extra step for employers. While the button to switch to employer login wasn’t invisible, it wasn’t super obvious either.
The platform provides a way for users to keep their employers up-to-date with the work. By using milestones defined by the employer, these include start and end date and any other point the employer deemed necessary to mark. Here they can also see if the hiree has been paid once the job has been completed. This view is accessible to both the employer and the hired.
This wasn’t the project’s particular order, but it’s an easier way to walk through the project. As mentioned before, when a user comes to the site, they land on the landing page on the candidate side. We created this *soft* landing page where the user can decide which way they want to go.
This wasn’t the project’s particular order, but it’s an easier way to walk through the project. As mentioned before, when a user comes to the site, they land on the landing page on the candidate side. We created this soft landing page where the user can decide which way they want to go.
For the landing page, I didn’t put any of the text from the original in the wireframing stage because one of the teammates would go over all the text and make improvements where they were needed.
Obviously, a lot changed from the wireframe to the final design. Going back to Dawn of Civilization and the signup process, I decided to remove the signup at the top and replace it with a how-to sign uplink. When the user clicks it, they’re taken to the page’s section that explains the DoC game, why they need it, and even included the game’s video preview.
More importantly, I took a hi-res screenshot of a section of the game’s landing page and made it the game section’s background. That way, when users are taken to the game’s page, they would be familiar with the looks of the page and not be confused (like we were). Other than that, most of my effort went into remaking the icons so the colors matched, especially the gradient, dead on and not close-but-not-quite.
This is the page where users choose the job category they would like to explore. It’s pretty simple — just an image-card representing the job category.
This is the page where users choose the job category they would like to explore. It’s pretty simple — just an image-card representing the job category.
This was one of my favorite changes — in the original, the chat is fixed to the chat page. This means users can only check the chat while on the chat page or by keeping an open tab. Additionally, users don’t get notifications on new messages unless they’re on the chat page. What I proposed is to have the chat available always via the button on the lower right corner. The next two screens below are the individual hired/employer chats.
The image above and below is what it looks when you go to the chat page. Here you can click on a card and open a chat with a particular hired-user. Down on the bottom right corner is the chat button to open a modal chat window. This button is always available so users can chat no matter where they are. I got the idea for this (I don’t know why) from the Google Docs document outline button.
This work pretty much as expected — clicks that button, and modal pane slides in and displays the list of chats, and when a user clicks on the conversation, it’s opened.
This was another of my favorite things to work on in this project. Milestones are important accomplishments and updates of a project a hired user is working on. Milestones are set by the employer, but they’re not required and, in some cases, even necessary.
Which is why there are two forms of milestones: the milestones status and the progress status. Milestones status is just that, as you can see in the image below.
Progress statuses are less structured, and hired users can check-in and upload their work for the employer to check out. Additionally, they can leave a message or note with the status update.
Milestones only apply to jobs with a milestones type of flow to them like design or code, a job like customer service wouldn’t have milestones.
Because of my previous UI design experience, I had way-to-high expectations for the rest of the team, considering where we were on the program. My desire to do my best conflicted with everyone’s else ability to match it, and it tore me up inside a bit. But how do you choose? We had an actual client who’s counting on our work. It would’ve been different if it was just speck work — then I could’ve chilled, and after the team’s project was turned in, I could’ve redone it for my portfolio.
In the end, I ended working way overtime since I had to work on the other team’s screens to make sure the design language was consistent. My fear of taking over the project (I don’t like that type of person or being them) led me to take a step back from working on the stakeholder presentation and presenting. I regret the day since the presentation ended up being unfocused, and the presenter didn’t prepare or rehearse it. While it wasn’t catastrophic, it could’ve gone much better.