Step 9 - Re-evaluate
After some user testing it was evident the site was having some minor bugs that needed to be fixed. These bugs included the over and active states on certain buttons e.g. the jobs button was active on e contact page.
The user testing also showed that the homepage would benefit from some content to be added.
The user testing also showed that the homepage would benefit from some content to be added.
Step 8 - Development
User testing I asked a couple of people to attempt to use the site when I finally put it online.
I asked them a few questions so that they could give minimal answers.
Sammy –
What do you think the website is about?
Finding a job within creative type jobs e.g. graphic
designer.
What would you do first?
I would type in the search bar to see what jobs where
being advertised in the field that I wanted, in this case graphic design.
Did you find what you where looking for?
Several jobs came up for what I was looking for, with
all the information that I would need to know about the job.
Graham –
What do you think the website is about?
The look of the site looks good. And is in theme with
the creative nature of the website and what it is trying to portray. “Creative
Job listings.”
What would you do first?
The first thing I did was click the jobs links and had
a look at what was there. The second thing I tried to do was search for a
particular job in the search box.
Did you find what you where looking for?
I found the jobs available under the jobs section,
however when I tried to search for a job in the search box I didn’t find anything
as the search box doesn’t work.
The search box would work in a final product but for prototype purpose it will just be a text input field.
After looking at this I changed a couple of things including the active button state on the contact page.
The search box would work in a final product but for prototype purpose it will just be a text input field.
Step 6 - Design
Starting off the design process, I began to jot down a few logo design ideas that could be used on the website. A logo will give my website a sense of professionalism and brand identity, which can then replicated through the website.
This is an overview of the sketchbook page containing my logo designs. I experimented with different shapes and placements of the logo around text to try and help decide which logo would have the greatest impact, and show chance for logo evolution.
I then reversed the idea and came up with this ink splodge with a circular cut out. This also had the advantage of making the ink look a lot more like a "C" - this is good because the splodge can eventually be recognisable and would no longer need text with it (i.e. logo evolution). However, the placement of the text didn't look right and the uppercase letters made the logo seem slightly overly harsh and aggressive.
After some further tweaking I finally arrived at the final design of my logo. It features an ink splodge with lowercase text underneath - simulating a calm & freindly feel to the brand. I then took this design into Adobe Illustrator to develop further.
The first logo idea was simplely a circle with an 'ink splodge' cutout. From this I then added some text but I wasn't happy with 'CJL' (abbreviation of Creative Job Listings)
Step 7 - Construction
I began constructing my flash website by creating the layout in Adobe Illustrator. I then imported the Illustrator artwork into Flash as separate layers. I also created my own logo in illustrator to give the website an additional degree of professionalism. Having all of the page elements split into layers has the added advantage of being able to alter certain parts individually to create movie clips, allowing for increased flexibility with what could be animated (and how).
I first created the homepage, adding the buttons which I then coded to link to other pages of the site. Initially I encountered a problem with this when I tried to add an "active" state to the buttons; I solved this by repeating the code on other frames but had to specify different function names so that there were not any duplicate functions.
From this I then attempted to add pagination to the jobs result page - however I ran into further issues with the 'next' and 'previous' buttons skipping through the whole timeline. To resolve this I put all the pagination content into a seperate movie clip so that the buttons would only reference that movie clip and not the entire timeline.
The final step in construction was to add the news feed and the content.
Step 4 - Written Outline
The first page of this website will be the homepage. This should contain a welcome message, appear inviting and make the user want to venture further into the site. However, the page should not be cluttered with excess information at this stage as it could confuse the user and deter them from the website altogether.
From the home page there will be links to different job filters such as web design, games design and architecture. These will be displayed in the form of tabs, which display good information architecture principles - they help the user to know where they are at all times (breadcrumbs) and they are easily identifiable as links to other parts of the site.
In total this gives me five pages within the Flash site. Each page will follow a similar layout with persistant navigation so that the user will know that they are still on the same website. Even though the layout will be similar, some elements will change relevant to the job section the user is looking at.
From the home page there will be links to different job filters such as web design, games design and architecture. These will be displayed in the form of tabs, which display good information architecture principles - they help the user to know where they are at all times (breadcrumbs) and they are easily identifiable as links to other parts of the site.
In total this gives me five pages within the Flash site. Each page will follow a similar layout with persistant navigation so that the user will know that they are still on the same website. Even though the layout will be similar, some elements will change relevant to the job section the user is looking at.
Step 3 - Technical Requirements
When building a website there are many things to consider such as budget, timeframe, target audience and feel of the product. It is important to note that Flash websites generally require a greater investment of time and effort to produce - hence the budget for a Flash website is many times greater than that of a standard HTML/CSS site. CMS systems and mySQL databases can also substantially increase both time and cost. For the purposes of this prototype I will use a dummy search box to replicate how it would look on the finished site.
My given category is a website for creative job listings, which generally caters for post-graduates and older users. However, it will also feature a work experience section for under-graduates so the site's target audience will typically by 18-30 years of age. With this in mind, I would like the website to feel warm & inviting so it doesn't scare off users (who may already feel a little daunted if they are applying for their first, full-time job!).
My given category is a website for creative job listings, which generally caters for post-graduates and older users. However, it will also feature a work experience section for under-graduates so the site's target audience will typically by 18-30 years of age. With this in mind, I would like the website to feel warm & inviting so it doesn't scare off users (who may already feel a little daunted if they are applying for their first, full-time job!).
Step 2 - Brain Storming
I decided to begin brainstorming the needs of my client so that I can start to come up with some design solutions to the interface of the website.
This brainstorm shows the bare essentials I need to make the website suitable for the client. I need to make sure that the design allows for a consistent feel and simple clean layout. There will also be a need for a mySQL database & content management system (CMS) but at this stage the prototype will only bring up a 'dummy' result. Filter options would be helpful to narrow down the job listings for the user, coupled with a simple navigation will help stop the user from getting lost on the website.
Step 1 - Research
The websites that I will be researching all advertise job vacancies. My client, however, focuses on vacancies for 'creative' jobs - which narrows down the market and target audience.
Here are a selection of websites I have researched that advertise job vacancies:
http://www.totaljobs.com/
http://www.manpower.co.uk/
http://www.jobsite.co.uk/
http://jobseekers.direct.gov.uk/
One recurring theme within these websites is that they all have a search function - which is necessary to look through the vast list of vacancies. They also use simple, complimentary colour schemes - most of which involve orange (commonly regarded as a colour of trust). After looking through these websites I have identified the needs of my client, the primary need of course being a list of job vacancies that can be searched through to filter out jobs the users are not qualified for.
Other needs include:
TotalJobs.com
Looking at the 'Total Jobs' website I can see that the fonts used are crisp & clear as well as contrasting from the background. There are numerous categories set up for each different job sector, which will help the user to narrow down the list of jobs they will have to look through.
The website displays good information architecture principles; it uses geo-stational navigation in the header but also makes use of tabbed browsing with jobs by sector, location or popular searches. The colours used are bright, friendly and inviting.
In conclusion 'Total Jobs' does meet the needs of the user but at the same time it is not entirely specific to a 'creative' person.
Manpower.co.uk
The 'Man Power' website shows a different design style to the 'Total Jobs' website, both with it's use of contrasting pastel colours and how the user navigates to a particular job listing. Again, tabbed navigation is present but it utilizes a drop down when the user hovers over it. This helps make the site look less cluttered.
Jobsite.co.uk
The Jobsite's design is simple and appears easy to use. They also use a very similar colour scheme to the 'Man Power' website (blue and orange) - again these are commonly regarded as calm and trusting colours. However, I dislike the general organisation of content and the navigation system. It also doesn't look as inviting as the other two websites.
Here are a selection of websites I have researched that advertise job vacancies:
http://www.totaljobs.com/
http://www.manpower.co.uk/
http://www.jobsite.co.uk/
http://jobseekers.direct.gov.uk/
One recurring theme within these websites is that they all have a search function - which is necessary to look through the vast list of vacancies. They also use simple, complimentary colour schemes - most of which involve orange (commonly regarded as a colour of trust). After looking through these websites I have identified the needs of my client, the primary need of course being a list of job vacancies that can be searched through to filter out jobs the users are not qualified for.
Other needs include:
- Easy-to-use navigation (this must be coherent and obvious to the user).
- Simple design that does not distract from the main aim of the website.
- The fonts chosen need to be legible, clear and appropriate.
TotalJobs.com
Looking at the 'Total Jobs' website I can see that the fonts used are crisp & clear as well as contrasting from the background. There are numerous categories set up for each different job sector, which will help the user to narrow down the list of jobs they will have to look through.
The website displays good information architecture principles; it uses geo-stational navigation in the header but also makes use of tabbed browsing with jobs by sector, location or popular searches. The colours used are bright, friendly and inviting.
In conclusion 'Total Jobs' does meet the needs of the user but at the same time it is not entirely specific to a 'creative' person.
Manpower.co.uk
The 'Man Power' website shows a different design style to the 'Total Jobs' website, both with it's use of contrasting pastel colours and how the user navigates to a particular job listing. Again, tabbed navigation is present but it utilizes a drop down when the user hovers over it. This helps make the site look less cluttered.
Jobsite.co.uk
The Jobsite's design is simple and appears easy to use. They also use a very similar colour scheme to the 'Man Power' website (blue and orange) - again these are commonly regarded as calm and trusting colours. However, I dislike the general organisation of content and the navigation system. It also doesn't look as inviting as the other two websites.
Subscribe to:
Posts (Atom)