Tech Start-up Website Design and Implementation​

Techniques

Domain models

Interviews

Personas 

Empathy map 

Sitemap

Sketching 

Wireframes 

Voting

Prototyping 

Design critique

Testing

Client

Gradprentice

Roles

UX/UI Designer, Web Developer

Task

Gradprentice needed a major website redesign and appointed my colleagues and I at Gradprentice to do it.

 

The website needed to reflect on what Gradprentice offers for all of its major stakeholders. 

Gradprentice was 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 commercial experience in the UX industry.

Tools

A whiteboard

InVision Studio

InVision Freehand

HTML 

CSS
JavaScript 

Bootstrap

UsabilityHub

Result

The website allowed Gradprentice to connect with all its major stakeholders in an effective and efficient style. 

The site got a 12 NPS score from junior UXers in the UK showing the website makes the company looks trustworthy. 

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 fear 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 which focussed on helping university graduates gain experience in the UX industry. They were unique in the sense that very few companies had juniors at the forefront of projects. 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 place to find experienced graduates and network with them. They were also aspiring to work with many universities in London by running workshops. 

Gradprentice's office on Goldhawk Road, London.

People Problem statement

"I want to see an organisation that take on junior UXers and complete projects"

User Need

As a graduate, I need to see an organisation who 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 assist in understanding and exploring what Gradprentice is, I suggested to my colleagues to create a domain model diagram. The rationale behind this decision was that from my experience 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. 

My colleagues and I strengthend our research 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 an 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 in the design stage. 

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 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. 

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 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. A lot different to the implementation (read below). 

Delivery and outcome

The website was then implemented using HTML, CSS and JavaScript with Bootstrap.  A colleague and I took the responsibility to code the site. The website was also responsive focusing on mobile phone users. 

 

Changes from the wireframes included getting rid of elements that seemed to repeat too much, would be excise for users and inconsistent. For example, having a contact form on every page seemed to much to do for users so we placed a button for them to click instead.

The website allowed Gradprentice to do the following: 

- Lets Graduates, Mentors, Client, Recruiters and Universities know how Gradprentice can benefit them. 

- Let visitors know a little bit more about them. 

- Showcase their work. 

- The ability to start communication with the CEO using Mail Chimp. 

Down the line, we implemented changes informed by in-house evaluation and remote tests that used 5-second tests and click tests. We looked at perfecting design principles, whether people understood the message of the site and if navigation worked. We had little negative feedback and had small changes such as adding images and new bits of content.

The website was well perceived by Junior UXers in the UK as they gave the site a positive NPS score of 12. This showed the website allowed Gradprentice to be seen as a trustworthy company people have an interest in.

The website was also presented at a competition to show what Gradprentice can do and helped them gain £2,500 in funding.

This website is no longer online for reasons I'm not sure about as I left the company in March 2020. From my understanding the company now run more services for graduates and not just offering UX/UI experience with mentoring but development plans etc. 

 

Homepage implementation of the Gradprentice website (last checked July 2020 before their new site was published).

                                                                                         Mobile 07947090631                                                                                                 LinkedIn /in/amiuxuics/

                                                                            Email amiuxuics@gmail.com

                                                                                                         Aminul I. ©