⭐ Achievements

Built the front-end of the production application from the ground-up.
Designed and developed a number of features.
Communicated with clients to ascertain requirements and needs.
Implemented automated testing suite to ensure reliability.
Spearheaded the need for accessibility and frequently audited all features. I have helped the company achieve a WCAG 2.1 AA standard (while also passing numerous AAA checkpoints) and 100/100 Google Lighthouse scores on every page.
Created the first external API endpoint allowing external clients to automate their workflow with our system.
Created our first Zapier integration for issuing credentials.

Detailed work description

The design of a learner's profile

At VerifyEd, my role has mainly been to shape the overall user experience and usability while building a completely new platform for an innovative technology.

While I am technically a front-end developer for the company, I frequently also delve into design and research tasks too - ensuring that we are solving the right problem in the most suitable way.

In my front-end role, I:

Estimate the work involved for a feature to be developed.
Plan the underlying architecture of the application to support new and current features.
Develop new functionality on the front-end and integrate APIs which my colleague on the backend produces.
Ensure the look and feel matches designs, create animations to direct a person’s attention appropriately and make sure the app is pleasurable to use.
Write automated test scripts (using TypeScript, Jasmine and Karma) to ensure the app is working as expected, and no previous functionality has regressed when writing new code or adapting something.
Evaluate the accessibility of our product and marketing sites with both manual walkthroughs and automated tools to ensure we are not discriminating against people with different abilities.
Submit and review pull requests to ensure the code being added to application is of a high quality.

How we incorporate trust into our designs

My design and research responsibilities include:

Finding out the correct problem to solve through root-cause analysis and communicating with those who would use the app.
Creating quick, low-fidelity mockups to convey ideas.
Testing those ideas with potential users in-person, and using tools like UsabilityHub and Maze.
Documenting outcomes of research and testing to ensure transparency throughout the company when making decisions.
Creating high-fidelity prototypes using Figma.
Providing design critique and feedback to others working on design.

Code Snippets

I have worked on code for the entire front-end of the application, while also helping contribute to our marketing site. There is lots of code that could be shared, however here are some small snippets to get an idea of my coding style:

Module information helper (HTML)

<div @fadeIn>
    <p>To help you fill in the CSV, here’s some module information you gave us...</p>
    <div class="helper-container">
        <table>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Code</th>
                <th scope="col">Credits</th>
            </tr>
            <tr *ngFor="let module of modules">
                <td>{{ module.title }}</td>
                <td>{{ module.code }}</td>
                <td>{{ module.credit }}</td>
            </tr>
        </table>
    </div>
</div>

This element fades into the screen as the user completes a form, indicated by the animation attribute @fadeIn. A table is used to show the helpful information as it was the most semantic and logical way to display it. scope is used to help users who rely on screen readers understand what column the data contained by the table belongs to.

Creating and using a Snackbar component (TypeScript)

openSnackbar(message: string) {
    this.snackBar.openFromComponent(SnackbarComponent, {
      duration: 5000,
      data: message
    });
  }

While this code snippet may appear basic, it is the perfect example to show as it indicates the type of code I wish to create.

This function is used when we want to show the user a Snackbar to alert them to something. We could import the Snackbar from Material to every different component we need to use, however, I found that it would be more effective to create a dedicated Snackbar component which we could then open with a few lines of code from any component. I also added the ability to input how long we want to keep the Snackbar open for and the message we would like to show a user.

Displaying achievements in a smooth Grid structure (Scss)

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    grid-gap: 24px;
}

Again, this simple snippet of Scss code allows the application to do something pretty great. Rather than create thumbnails of achievements which have margin on the sides - and therefore have a fairly empty column on the side of the screen - I used CSS Grid to display these elements. This meant that the elements smoothly changed size as the screen resizes (without the need for any media queries), without any large gaps on either side.

The use of minmax() in this snippet allows us to avoid the media queries, by saying the minimum width of the element can be 256px, and the maximum can be 1fr. Therefore if there is plenty of room, multiple elements can be displayed next to each other in an equally shared space. If there is less than 256px in width, the elements will snap to the screen's width, only showing one per row.