Tech Start-up Website Design and Build
Overview
Business - Gradprentice
Role - Lead UX Designer (freelance)
Problem
Gradprentice needed a major website redesign with the aim to increase their exposure. The website needed to reflect what Gradprentice offers for all of its stakeholders.
Gradprentice was formerly a UX agency in London that worked on projects with small businesses and start-ups. Gradprentice focussed on hiring graduates and letting them gain commercial experience in the UX industry by working for smaller businesses and startups.
Team
CEO of Gradprentice and 5 UX Designers.
Result
The site got a 12 NPS score from UXers in the UK showing the website makes the company looks trustworthy.
The website allowed Gradprentice to connect with all its major stakeholders in an effective and efficient style.
Gradprentice former logo and office space.
Design process for this project
Screenshots from the old website for reference.
The people problems we were trying to solve...
We wanted to encourage recent graduates with interest in UX to come and start a career at Gradprentice.
Graprentice also had other stakeholders but were not priority for our website.
How do we know this is a real problem?
It is common knowledge in the UX field that Junior UXers have problems getting into their first role. This is because of many reasons such as:
- Companies fearing training.
- Companies just prefer people with real commercial experience.
How will we know if we've solved this problem?
When visitors come to the website and become motivated to learn more about the organisation. They see the website was as trustworthy and a place for Juniors to come and learn.
The Junior UXer problem
Gradprentice was a tech agency/start-up in London. They hired recent graduates to work with their partners (other businesses) to complete UX projects. This helped clients (businesses) get a product or design artefacts up to standards and budding UXers get experience. They gave recruiters/hiring managers a hub to find experienced graduates and network with them. They were also aspiring to work with universities in London by running workshops with students.
Gradprentice's office on Goldhawk Road, London.
People Problem statement
"I want to see an organisation that take on junior UXers and complete projects with good outcomes"
User Need
As a graduate, I need to see an organisation that is willing to hire me and give me experience to work on commercial projects. So I can kick start my career.
Business Need
We need to show we offer work for Junior UXers and show off their fantastic work to our stakeholders.
Screenshot from a Gradprentice workshop promo.
Discover and Define phase
To facilitate a deep understanding of Gradprentice's core concepts, I proposed the creation of a domain model diagram. My experience suggested that this tool effectively uncovers the foundational elements of a domain, in this case, Gradprentice.
To guide the domain model's creation, I conducted a semi-structured interview with Gradprentice's founder. The interview questions were collaboratively refined in a Google Doc, incorporating both open-ended and closed-ended questions. My focus was on identifying the primary entities involved in Gradprentice.
The interview analysis revealed that graduates were the central stakeholders, but they were part of a broader ecosystem involving mentors, universities, and others. To strengthen our research, we interviewed graduates seeking UX graduate roles. These interviews enriched our domain model and led to the creation of a graduate persona and an empathy map. Incorporating these tools allowed us to develop a deeper understanding of graduates' needs and aspirations, ensuring that their perspectives remained central throughout the design process.
The domain model, persona and empathy map as a result of the research phase of this project
Define phase - Sitemap
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 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.
The initial Sitemap and a post-it session focused on creating a sitemap
Develop - Conceptual Design
In the conceptual design phase, my colleagues and I 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 that 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.
Develop - Detailed Design
Using Invision Studio, I mocked up a high fidelity wireframe for the mentor's page and helped out on other pages and that naturally kept designs changing after reflecting with my colleague.
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 put 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.