Tech Start-up Website Design and Implementation​

Techniques

Domain models

Interviews

Personas 

Empathy map 

Sitemap

Sketching 

Wireframes 

Prototyping

Voting 

Design critique

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

Tools

A whiteboard

InVision Studio

InVision Freehand

HTML 

CSS
JavaScript 

Bootstrap

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. 

Screenshots from the old website for reference. 

Research 

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

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 on the right. 

The initial Sitemap and a post-it session focused on creating a sitemap

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.

Detailed Design

Using Invision Studio, I mocked up a high fidelity wireframe for the mentor's 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, testing and Result

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. 

 

Small changes from the wireframes included getting rid of elements that seemed to repeat too much and/or would be excise for users. 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 new website allows 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 stakeholders using Mail Chimp. 

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

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.

Homepage implementation of the Gradprentice website (last checked July 2020).

                                                                                         Mobile 07947090631                                                                                 LinkedIn /in/aminulhasnanislam/

                                                                            Email amiuxuics@gmail.com

                                                                                                   Aminul Islam ©