New Careers Service (Student Development) Homepage

After the recent decision to re-brand the Student Development Service to the Careers Service, as explained in Stu Johnson’s Blog, we decided to improve our website homepage. This post will look at some of the design considerations for the page, the technical achievements and the future developments.

After Stuart Johnson (Acting head of Careers Service) and I had a discussion we came up with this rough design of how we thought the page should appear.

This is a move away from our original homepage which was primarily targeted at the students that use our services, to encompassing all those who will benefit from engaging with a university careers service beyond the student body, namely:

  • Employers wanting to work with us, for example advertise job vacancies, recruit volunteer, present themselves at careers fairs and events and get involved in our programmes.
  • University staff who can use the services to enhance their teaching and many other reasons that I’ll go into later.

To achieve this we plan to sub divided the site into three section accordingly for the target groups. The student area already exist in the form of our current Student Development site, although will require some tweaks. The employer area will be a redevelopment and extension of our current Employer Liaison Team website. However, the Staff site is new development and will be discussed later in future developments.

In the schematic design above, we intend the navigation into user group areas of the website to be the first thing that is seen on the page and to be eye-catching. This will be achieved by the use of imagery.  I experimented with different styles of image, to consider the most effective, here are some mock-ups.

Standard square picture with hyperlink text Square picture with faded title on the image A white cut out image that bland into the background of the page
Picture with rounded corners Picture with rounded corners and a drop shadow

The other areas of the homepage represented on the schematic are:

Follow us
As a service we have embraced and engage with our users on range of social media over the last two years with presences on Facebook, Twitter, YouTube, Flickr, FriendFeed, Netvibes, delicious, not forgetting the use of RSS feeds across our site for news and events. Once again in the past the primary target audience for these presences has been students, especially in the cases of the Facebook and Twitter presences, but of course there is a lot of benefit for Staff and Employers to engage with us via this media, therefore there is huge value in promoting these on the front page.

Another challenge we face with these presences is the re-branding of these accounts from Student development to Careers Service. This is something Stuart has also discussed on his blog. On twitter the change an account name is not complicated, however can be confusing to followers that have engaged over longer periods of time. Renaming a Facebook Page is a bit more complicated, the page title can be renamed easily in the settings, however the URL of this page is personalised and took some effort to get and I’m not sure if it is changeable? As for the other social media services we use, they all use a combination of Student Development and/or SSDS, further investigation in to the renaming of these needs to be assessed.

This area of the front page will be designated to promoting our most important up and coming event or campaign. We run several campaigns ever year, whether they are promotional events, Careers Fairs or large events. Examples of campaigns we have run so far this academic year include:

  • Student Development Roadshow
  • Stand Out Week
  • Graduate Success Week
  • Volunteering and Working Abroad Fair
  • Leicestershire Student Graduate Fair (now Autumn Fair)
  • Essay Writing Week
  • Postgraduate Festival of Research
  • Enterprise Week

I’m sure there are more. Nevertheless they all provide an opportunity for students to engage with our service and find out more about the schemes, programmes and opportunities we have on offer to them. However many of these events wouldn’t be a success without the Employers and Companies that come along to support them, therefore it is highly important these have a presence on the homepage so that employers can find what is going on and how they can get involved in them. From a university staff perspective, if they are made more aware of the events going on it will enable them to promote them more within their departments.

About us
These are typical links to information that is important to everyone e.g.  What the service is and what it offers, Contact Details, Staff list and contact and map and directions. This content more or less exists but may need developing in places.

News and Events
On the Plone CMS we use at the University of Leicester we can add areas to the right and left of  the main body of content of the webpage in areas we call Portlets. In this case we are using two dynamic portlets that are automatically updated with News and up-coming Events that are posted onto the website.

First Draft

Here is the first draft of the page:

Hopefully it fulfills the design brief described above, some adjustments have been made like the repositioning of the About Us section, to accommodate the larger Follow Us section. Furthermore The Subtitles;

Succeed in your studies | Gain experience | Develop your career

of the service have been included at the top of the page.

For the Follow Us section I designed a series of icons:

These use recognisable icons to help identify the service on offer with a quick phrase to prompt an action. I designed these on Photoshop, using an open source icon and sampling the colours to make the banners.

Here comes the technical bit

Feel free to skip on if it’s not your thing…

On the University of Leicester Plone CMS, we have two editors Kupu and TinyMCE. CMS editors are often criticised in that the construction of attractive content is often dependent on tables, this is because  ‘advanced’ coding is often striped out during saving, this is the case in our Kupu editor, however the TinyMCE editor does not.

The TinyMCE editor enables ‘traditional’ web design using Divisions <div>, which can include ‘float’ alignment, boarders, margins, padding and even colouring.

This page is constructed of three division:

  1. A full width division that includes the user group links  (Students, Employers and Staff). This division only includes a table be with three images. This possible doesn’t need to be in a division, however what this division does that the standard Plone editor can’t is add the top and bottom boarders.
  2. <div id="section1" style="border-top: solid 3px black; border-bottom: solid 2px black;margin-right:0px; margin-bottom: 5px">
  3. A “float: left” division that contains Follow Us icons
  4. <div id="section2" style="float: left; width: 100%;">
  5. A “float: right” division that contains What’s hot and About us information. The About us links (About Us, Contact us, Staff and Where to find us) are contained within and table.
  6. <div id="section3" style="float:right">

Also using the TinyMCE HTML editor enables styles to be assign to fonts, for example when I originally I created the page I made the subtitles as an image, however on the realisation of the ability to style fonts meant the colour could be changed.

<h1 style="color: #9e9c9c; ">Succeed in your studies | Gain experience | Develop you career</h1>

The only disadvantage of the heavily stylised page is that if any Kupu users attempted to edit this page and saved it all the styles and division would be lost. Therefore editing privilages to this page are going to be limited.

Future Developments

Page resigns

Stuart has already posted this first draft on his blog and has received some interesting comments from colleagues. The major concerns seem to be that the Follow us graphics tend to draw the eye, and detract from the main function of the page which is to get the specific user groups to enter their section of the site. This could be overcome by enlarging of the user group graphics and/or the decreasing the size of the Social Media (Follow Us) graphics. The latter is a feasible as the text of the graphic is almost equal in size to the heading styles, so probably needs to be decreased anyway.

One user group that has been neglected from the current design is Postgraduate Researcher, who don’t always consider themselves as students, but may also find the information found in the Staff section (see below) to support their teaching.

As the homepage is for a careers service, I feel we also need to include a predominant link to our Jobs/Vacancy systems, as this is important to two of the user groups; Students searching for jobs and Employers wanting to advertise jobs.

Another consideration is whether the page is ‘dynamic’ enough, with this current design to only section that will change regularly is the What’s hot section. Therefore maybe more RSS feeds or dynamic updates need to be included on the page. However the information in the portlets (news and events) will update automatically.

Staff Area

Currently the links for Students and Employers have content they can be directed to, however the Staff area is a new development for our site. This Mindmeister mind-map shows my initial thoughts for the what could be included in this area.

More information will appear on the map as ideas develop.

From these initial thoughts I think the sites could include these areas:

  • An area for Careers Tutors, this would be similarly to the area we have for AccessAbility Tutors on the AccessAbility site. It could include a list of current tutors in departments and guidance on the role of a Careers Tutor. Furthermore it could even include a secure area that requires a login for private discussions (boards) for the tutors.
  • How to use our resources, as our services provision becomes more integrated into the curriculum, guidance on how to use our resources could be useful. This could be even taken as far to provide a learning design of order of delivery of selected resources and associated possible activities and assessment. An ordering process like this has already been created for Students as an Essay Writing Tour, but would possible need to be more detailed for staff.
  • How to use our videos, we now have approximately 90 videos on our You Tube channel, we embed these into our website in appropriate places. Staff are also free to use these in their teaching, therefore instruction how to embed in teaching materials or PowerPoints may be useful.
  • A full list of resources. In the student area of the website (especially the Develop your career area) resources are structured around processes and stages of study. However for staff it may be more appropriate to structure the resources around theme or purpose, e.g. CV writing or Referencing. Furthermore a lot of our resource are now Open Educational Resources and available on our institutional OER repository, therefore download links may also be useful.
  • Departmental resources, we have a number of tailored resources for specific departments, including Plagiarism Tutorials and Dissertation Planners. Having resources organised by department would be useful for staff.
  • PDP advice and guidance can deliver PDP in their departments.
  • Requests, our service already deliver teaching in departments, this are could be used to make official requests for our services and also request tailored resources.
  • Marketing and Campaigns. Linked to the Campaigns area of the homepage, this could include links to promotional materials that departments could use to promote our events within their departments.

I’m sure there will be more further developments to the Staff area and the homepage, but if you have any further suggestions please comment.


  1. Hi Matt. You’ve clearly put loads of thought into this – thanks v much! I really like what you’ve come up with and based on some of the comments I’ve had to my post I think we could improve it still further. The staff sections ideas are great too. I hope to make a start on some of those later today. Thanks again for all your work on it – much appreciated.


    1. Cheers Stu, as I said on your blog post I’ll follow the comments and we can look at necessary improvements.

      We can discuss the development of staff area and any changes we want to make to the student and employer areas longer term when we next meet 🙂


  2. Looks great! Just thought – we should put the Matrix logo on the new website, don’t think it’s on the existing one is it?


Leave a Reply