Discovery and UX Stage
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.
- It will be a single page app (SPA).
- A freelancer will have to be VAT registered in the UK to be able join.
- A business must have a budget over £2000 and be UK VAT registered to add a project.
- 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.
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.
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.
- A user is logged out
- A freelancer logged in
- A business logged in
- A business is adding a job
- A freelancer is applying for a job
- A job has been posted or applied for and the user has been redirected to the Thank You page
- A business viewing their account
- A freelancer viewing their account
- A business editing their account
- A freelancer editing their account
- User is logging in
- User has forgotten their password
- User is registering for an account
- A freelancer is browsing jobs
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:
- Add and edit job forms
- Apply for a job form
- User login form
- Forgotten account details form
- Add and edit freelance account forms
- Add and edit business account forms
- Jobs listing
- Job details
- Job filters
- Call to actions
- Breadcrumb nav
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.
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.
Once I'm happy with the wireframes and the prototype it's time to move on to the visual treatment stage.