Startup Website Redesign and Implementation
UX Researcher, UI Designer, Web Developer
Gradprentice needed a major website redesign and appointed me and my fellow colleagues at Gradprentice to do it.
The website needed to reflect what Gradprentice offers for all of its major stakeholders.
Gradprentice is a UX agency in London who work on projects with small businesses and start-ups. More importantly, Gradprentice focuses on hiring graduates and letting them gain experience in the UX industry.
The new website allows Gradprentice to connect with all its major stakeholders in an effective and efficient style.
Awaiting analytics and usability results.
Screenshots from the old website for reference.
To assist in understanding and exploring what Gradprentice is, I suggested to my colleagues to create a domain model diagram. The reason I did this is because I knew the tool is great at uncovering the foundations of an area, in this case, Gradprentice.
To facilitate the creation of the model I lead an informal (semi-structured) interview with the founder of Gradprentice. The questions I asked were created on a Google Doc and my colleagues collaborated with me to refine the questions. The questions asked were both open and close-ended. I focused mainly on asking what the main entities of Gradprentice were. After the analysis of transcripts, it was clear Graduates were the main stakeholder but part of a wider program involving mentors and universities etc.
Me and my colleagues informed our research further by interviewing graduates who were seeking a UX graduate role. The results of the interviews added more depth to our domain model, the creation of a graduate persona and empathy map for graduates. The inclusion of a persona and empathy map allowed us to understand graduates on a personal level and to stay true to them moving forward.
The domain model, persona and empathy map as a result of the research phase of this project
Before moving onto any form of design we needed some structure to our website so we created an initial Sitemap. The sitemap was created using the domain model and discussion amongst our team. It was clear Gradprentice offers great benefits to all its stakeholders and this led to an audience-based navigation for the site. This initial sitemap also let us think about the content of the website using the aforementioned research and can be seen in the images below.
The initial Sitemap and a post-it session focused on creating a sitemap
In the conceptual design phase, me and my colleagues individually sketched what we felt each page of the website should look like with its contents. The content generation was based on the aforementioned research. For example, students wanted some progression from graduation, I thought it would be good to showcase how a 'Gradprenticeship' can pan out on the graduates page. We also did a quick competitor review of companies who offer services similar to Gradprentice to aid our sketches as inspiration. Then we amalgamated the best bits of the designs and drew final versions of the pages on a whiteboard in our Gradprentice office space and remotely with InVision Freehand.
This stage involved a lot of pencil, paper and presentations for our individual sketches. For the converging process we did voting and design critique before moving on to the whiteboard sketches.
My individual sketches followed by the unified sketches created in the conceptual design phase.
Using Invision Studio, I mocked up a high fidelity wireframe for the mentors page and a few smaller pages.
One of the biggest changes we did in the detailed design phase is getting rid of many navigation elements and condensing them. What we specifically did is placing all audiences except graduates and mentors under 'Our Partners'. We did this because it was clear graduates are the main target audience and needed to be given importance.
A wireframe I created using InVision Studio.
Implementation and Result
Small changes from the wireframes included getting rid of elements that seemed to repeat too much and/or would be annoying for users. For example having a contact form on every page seemed annoying so we placed a button instead. The mentors page used typical icons instead because its conventional etc.
The new website allows Gradprentice to do the following:
- Lets Graduates, Mentors, Client, Recruiters and Universities know how Gradprentice can benefit them.
- Let stakeholders know a little bit more about them.
- Showcase their work.
- The ability to start communication with stakeholders using Mail Chimp.
The website is awaiting analytics and usability results.
You can view the whole website on www.gradprentice.co.uk.
Implementation of the Gradprentice website as of 13/01/2020. Note the 'our work' section is not shown as the company is still completing their first projects.