Building a job board app. Part 1: Planning and user experience UX.

Discovery and UX Stage

Introduction

I had an idea for a little jobs board app aimed at freelance designers and developers, there are already a few about but I wanted to add a couple of small differences to mine.

  1. It will be a single page app (SPA).
  2. A freelancer will have to be VAT registered in the UK to be able join.
  3. A business must have a budget over £2000 and be UK VAT registered to add a project.
  4. It will be for UK based freelancers and businesses only.

I want to ensure a high quality for both the jobs and the candidates that are applying for them. In the UK being VAT registered is a good sign that an individual is a professional and having a minimum budget for a project will maintain the benchmark to keep the quality of the projects high.

Initially keeping the scope of the project to UK businesses and freelancers helps keep the project small. Trying to work out the equivalent of VAT registration for other countries could prove to be complex but expanding globally is something I may look into at a later date.

Planning

Planning the app
Planning the app.

I started out, as always, with pencil and paper. I needed to figure out how the app would look, what states would the app have, what forms and fields would be needed? etc. As a starting point I listed the types of users of the app and thought about how they would interact with it.

  1. Freelancers
  2. Businesses

User Stories

Once I'd established who would use the app, I started to write down some user stories to help to think through the functionility; What does the site look like once they have logged in, what happens when an application has been submitted etc.

Below are some user stories about how freelance and business users would use the app.

  1. A user is logged out
  2. A freelancer logged in
  3. A business logged in
  4. A business is adding a job
  5. A freelancer is applying for a job
  6. A job has been posted or applied for and the user has been redirected to the Thank You page
  7. A business viewing their account
  8. A freelancer viewing their account
  9. A business editing their account
  10. A freelancer editing their account
  11. User is logging in
  12. User has forgotten their password
  13. User is registering for an account
  14. A freelancer is browsing jobs

Components

To be able to start sketching out ideas for the apps layout and structure, I needed to think about the components that would be required. Referring to the user stories as a guide it is straight forward to start listing out the components that will make up our app.

Below are some of the components that will make up my app:

  1. Add and edit job forms
  2. Apply for a job form
  3. User login form
  4. Forgotten account details form
  5. Add and edit freelance account forms
  6. Add and edit business account forms
  7. Jobs listing
  8. Job details
  9. Menus
  10. Footer
  11. Header
  12. Logo
  13. Job filters
  14. Call to actions
  15. Title
  16. Breadcrumb nav

Wireframe Sketches

Sketching out wireframes ideas
Sketching out wireframes ideas.

I now have user stories and a list of components, it is now time to pick up the sketch pad and pencil and start to draw out some ideas for the app layout. Personally I keep my sketches rough so I can get my ideas down quickly, then I move to the computer so I can draw the ideas up. You could keep with the sketch pad to draw up every wireframe but I find I'm quicker with something like Illustrator, especially when you are duplicating things like menus and footers over and over again.

Below are some of the drawn up wireframes for the freelancers stories.

A freelance had submitted an application and has been redirected to the thanks you page
A freelancer had submitted an application and has been redirected to the Thank You page.
A freelancer is applying for a job
A freelancer is applying for a job.
A freelancer is browsing jobs
A freelancer is browsing jobs.
A freelancer is filtering jobs
A freelancer is filtering jobs.

Prototyping & Testing

It is important to keep in mind your objectives, creating a clickable prototype of the app using the wireframes and testing it should be a continual process while you are in the planning phase of any project.

Next Steps

Once I'm happy with the wireframes and the prototype it's time to move on to the visual treatment stage.

Listening To

The Dominion79 Studio Playlist
The Dominion79 Studio Playlist

Working to the latest Dominion79 studio playlist, you can too

Reading

Rotherweird - Book by Andrew Caldecott
Rotherweird - Book by Andrew Caldecott

Currently reading Rotherweird by Andrew Caldecott.

Instagram

The boys playing pinball
The boys playing pinball

A quick shot of the boys playing pinball on a night out in Sheffield.

Sketchbook

Skething out Website UI ideas
Sketching out Website UI ideas.

Sketching out ideas for a website UI.