Skip to content

EnglishEspañol

Microjob

Small paid jobs, close to home

Microjob connects unemployed people with jobs in their own municipality. The council verifies, trains and pays them from a dashboard.

Two iPhones floating on petrol blue with the Microjob app: the home screen and the map of nearby jobs
Role
UX and interface design
Service
Mobile app and web dashboard
Team
Samuel Urbina
Platform
Mobile and web
Microjob app on an iPhone held in a sunny town square

The problem

There is work in every neighbourhood. The hard part is finding it.

Assembling a piece of furniture, a small move, cleaning a park: small jobs nobody knows who to ask about.

A man assembling a shelf at home, checking the Microjob app on his phone

Process

How it was made, step by step.

Five phases and two validations before the final design.

  1. Research

    The rules of the programme and who is going to use it.

  2. Architecture

    A map with every section of both apps. ${T.validado}

  3. Wireframes

    Every screen in grey, before any colour. ${T.validado}

  4. Visual design

    Brand, colour and final screens.

  5. Handoff

    Screens and components ready to build.

Architecture

Two products, one map.

Microjob is two products that share the same map of jobs. The worker app shows each person what is near and what it pays; the municipal dashboard shows the council the whole town: open jobs, activity by area and incidents. Before drawing anything, every section of both was written down.

The map in the Microjob worker app: nearby jobs with their pay and urgency
The same map in the Microjob municipal dashboard: activity by area, job totals and active users

Who sees it

The person looking for work

What they see

  • Jobs near them, with the pay on the pin
  • Urgency and distance at a glance
  • Apply from the map or the list

Sections

  • Sign-up and login
  • Home
  • Explore jobs
  • My jobs
  • Chat
  • Training
  • Profile

Who sees it

The council

What they see

  • Activity grouped by area of the town
  • Total jobs, in progress, looking for workers
  • Open incidents and active users

Sections

  • Overview
  • Users
  • Job offers
  • Training
  • Payments
  • Reports
  • Settings and incidents

Wireframes

First, in grey.

Wireframes of the app and the dashboard. They were reviewed and approved before any colour was added.

Wireframe of the home screen
Home
Wireframe of the explore screen
Explore
Wireframe of the job detail
Job detail
Wireframe of my jobs
My jobs
Wireframe of the dashboard overview
Dashboard · overview
Wireframe of the dashboard users table
Dashboard · users

From grey to colour: the same structure, now with the brand, the map and the status of each job.

Home screen, wireframeHome screen, final design
HomeWireframe → Final design
Job detail, wireframeJob detail, final design
Job detailWireframe → Final design
My jobs, wireframeMy jobs, final design
My jobsWireframe → Final design

The app

Everything a job seeker needs.

Microjob map on an iPhone resting on a wooden table next to keys and a coffee
The map shows what is nearby and how much it pays.
Microjob home screen
HomeYour progress this month and the training you still need, right at the top.
Explore screen with nearby jobs
ExploreJobs near you, with the pay and the distance in sight.
My jobs screen with job statuses
My jobsEvery job with its status: active, pending or finished.
Map of nearby jobs
Job detail with pay and description
Chat between worker and client
Worker profile with ratings and skills

The dashboard

Users, offers, training and money, in one place.

Microjob dashboard on a MacBook in a council office
The council sees everything from one dashboard.
Dashboard overview with KPIs, activity map and charts
Final dashboard
Training table with attendance
Mandatory training and attendance
Users table with ratings and status
Verified users
Sign-up, step 1 of 4: personal details
Sign-up in four steps: the council registers the person…
Sign-up, step 4 of 4: the activation code
…and the app is activated with a one-time code.

Brand

A logo you can read from afar.

A round isotype and lowercase letters: friendly, and easy to read even on a small screen.

  • Green#00B37CActions and states
  • Petrol#033744Brand
  • Mint#51EBC2Brand
  • Black#171717Text
  • Grey#5C5C5CSecondary text
  • Red#FB3748Urgent

Inter, green and plenty of air.

Headlines
Ayuda con mudanza pequeña
Text
Publicado hace 2 h, a 0,8 km de ti
Buttons and figures
Aplicar · 35 €

Components

The pieces that repeat.

The job card, the mandatory training notice and the bottom menu appear on almost every screen, so they were designed once as components.

Job card component: who posts it, category, urgency, pay and the apply button
Job card
Mandatory training notice component
Mandatory training notice
Bottom menu component
Bottom menu

Credits

Who did what

Product design UI/UX by Samuel Urbina. Figures on screen are sample data.

Any questions? Write to us at hey@hidra.zip.

The Microjob home screen on an iPhone standing on a sunny balcony ledge, over the rooftops of a small town