Style Guide

Use this style guide to access, edit or adjust styles that are used throughout the template.

Colors

Use this section to edit the colors for the entire template.
Primary
Secondary
Hover

Typography

Use this section to edit the typography for the entire site.

Heading

Heading

Heading

Heading

Heading
Heading

This is some body text. This is a body link.

This is some small text. This is a small link.

Big Text

Rich Text

Rich text sections are styled to be used throughout the template.

H2 headings will look like this.

Illo eos tempore magnam qui dolorum tenetur. Sed architecto inventore. Qui voluptatem aut in neque magni non aut provident molestiae. Numquam maiores rem accusantium nobis non sit laboriosam sed molestiae.

Example of an H3 in use.

This is what quotes look like. Deleniti voluptas neque iure voluptatum tempore quasi repellendus. Aut dolorem sint veritatis vel autem quia sit reiciendis. Non hic cum enim adipisci quas corporis. Atque qui itaque tenetur aut occaecati quaerat.

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

This is an example of a figure caption.
  • Bulleted lists are formatted like this
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit

Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.

  1. Numbered lists will look like this
  2. Eveniet harum et perspiciatis est
  3. Autem aut cum placeat veritatis

‍

Team organisation

I was one of five UX designers assigned to this urgent project. The most senior (in age) I took on the role of project manager and utilised Trello and daily stand-ups to ensure optimal progress from day one.

Web traffic analysis

From analysis of web traffic we generated two primary persona:

  1. “Frank Client” seeking information about Flywire for evaluating its suitability as an international payments provider.
  2. “Sally Payer” aiming to make a payment to a client.
  3. The legacy website catered to both persona equally.

After discussions, it was decided to re-factor the design, prioritising clients while providing clear navigation to the payment platform to service payers.

Division of effort

To meet the deadline, we swiftly allocated responsibilities in a series of intense meetings. The effort was divided into four key areas:

  1. Defining information architecture and page design
  2. Defining, sourcing and translating copy
  3. Defining and sourcing imagery
  4. Developing presentation logic

‍

HomeWorkAboutMoreContact
LinkedinInstagramYoutube