fish4 CV database

Challenge

fish4-cv-database

Unknown to me, lurking inside the fish4′s admin site was a page called “Search CVs”. This page allowed recruiters to search through hundreds of thousands of candidates CVs. Our challenge was to integrate FAST search technology with fish4′s huge collection of CVs. The new CV database would sold as an annual license to recruiters.

A challenging project a foot. Two months into the job and I was put into a meeting with the Product Manager, CTO, Technical Architect and Lead Java Developer…

Recruiters loved the new website and deals were secured just based on viewing the site.

Design

After seeing some drawings on a whitebroad. I came out of the meeting knowing that there will be three pages (login, search and candidate) with the potential of more to come. No info about what kind of data would be inside the pages but I was told it’s “agile development” but not from a designer’s point of view!

Sketches

My mind started getting into gear and thinking about the possible information or data that could benefit the user. I drew some quick sketches, highlighting the main features each page should contain. The sketches allowed me to see the whole picture and helped me start the design process.

I created some concepts, as they would get everyone involved and allow them to visual the website. In our meetings they were able to determine what functionality was needed. It was nice to see everyone write suggestions down on print outs.

Designing with unpredictable areas

Sometimes for a project that has no predictability its important to create areas where functionality could be easily added without breaking the design. This was my methodology for this project – agile equals unknown… Hence when I added new functionality I always thought “What if?”

Thats why I thought it was good idea to design certain areas with the minimum and maximum potential. To get a good idea of how it would look.

Design documentation

I decided to wrote documentation about my implementation. One day, if another designer had to add to the site it would important for that person to fully understand how it worked. I thought it would vital to explain my reasons for implementing the XHTML and CSS the way I did. I also explained how to integrate XHTML code into grails framework. That way code would remain consistent across the site.

HTML modulation (templates)
One should also consider making HTML modular by placing any HTML content that is reused inside a template file. A template file is simply another view file but with an underscore (_file-name.gsp) before it. Template files can also be used to loop through a collection.”

For clients

I wrote documentation for clients (recruiters). So they would be able to customise the look and feel of the site.

Development

CSS modulation

I was making the CSS modular and importing styles per section rather than including the CSS inside one large file. Thus making it easy for us to optimise the CSS and allowing the client to download smaller files instead of one large file. i.e.

The CV Database has a search section, which has some CSS for the index page as well as styles for the filters, selected filters, sort by bar and candidate information. These styles have nothing to do with the login page.

no tab

Each section (each controller) should/might have a CSS file. This helps us specify styles we’d like to import or implement for that section of the site.

no tab

So we can see that separate files should be created for:

  • Filters
  • Selected filters
  • Sort by (renamed to actionbar, as this is where actions dealing with data occurs)
  • Candidate information

Autocomplete

The best way to describe, is that a recruiter might not know the name of a job title – so while they were typing it would come with suggestions.

The biggest challenge was changing this plugin around to make it work properly in all major browsers (Safari, Firefox, IE and Opera). Luckily with the help of our technical architect (who is a genius at everything!) lend me in the right direction of how the autocomplete functionality should work.

Four days me, 30 days them

Our CTO was so happy with the work I was doing. He asked me to put it onto our main site, as I managed to implement this bit of code and getting working in four days. While our offshore developers working for fish4 couldn’t get it working near enough six weeks! I was stunted and had a big grin on my face – but of course.

no tab

  • Conceptual design of the login page.

    Conceptual design of the login page
  • Concept of dashbaord page (home page)

    Concept of dashbaord page (home page)
  • Conceptual design of the search results page

    Conceptual design of the search results page
  • Concept of autocomplete functionality

    Concept of autocomplete functionality
  • Concept of those candidates the user has viewed, downloaded, or emailed

    Concept of those candidates the user has viewed, downloaded, or emailed
  • Concept of other CVs that a person may have and Application History (Note: names in the screen shot are purely fictional)

    Concept of other CVs and Application History
  • Concept of making a comment against an employee for other recruiters in your company to see

    Concept of making a comment
  • Creating a cushion for areas of unpredictability

Further information

Industry
New Media
Date
October 2007
Time spent
2 months
Tags
, , , , ,
Categories
Design work, Development work, UX work