Hello I'm Scott -
I am thoughtful User Experience Designer who likes to dabble in code.

Building the Foundations of a Design System

UX/UI Design + Strategy

The Goal

Assist a friend’s startup in launching an e-commerce website for their new product.

The Challenge

Creating a user experience that marketed their product and allowed users to smoothly purchase them.

The wireframes and designs had to work within an off the shelf Wordpress theme. Which would be restrict how much could be changed without rewriting the whole theme.

What I did

• Page design and layout
• Consult on UX best practices
• Create user personas
• Create user journey maps
• Iconography
• Copywriting

Launching an E-commerce Start-up

UX DESIGN

The Goal

Assist a friend’s startup in launching an e-commerce website for their new product.

The Challenge

Creating a user experience that marketed their product and allowed users to smoothly purchase them.

The wireframes and designs had to work within an off the shelf Wordpress theme. Which would be restrict how much could be changed without rewriting the whole theme.

What I did

• Page design and layout
• Consult on UX best practices
• Create user personas
• Create user journey maps
• Iconography
• Copywriting

Home page wireframes

Product page wireframes

Petite Jardin Icons

Petite Jardin Personas

End result

Go to the live site

Course pages

University of Westminster

Digital Interaction Producer/UX Designer

The goal

Improve applications and conversions on over 600 course sign-up pages by redesigning the page layout and content. Ensuring that the pages are optimised for any screen size and that clients can find desired information easily.

The challenge

The course sign-up pages are the most important part of the University’s online presence. Recruitment for courses is the key to the success of the University, as this is its main source of income.

Each of the existing pages looked slightly different and there was no coherent template used. Generally, the sign-up pages were very text-heavy and contained a lot of mandatory information that must be included in accordance with UK Consumer Law.

Creating a page design that balanced the needs of stakeholders was always going to be tricky. Mainly marrying the needs of the academics in charge of running each individual course and the marketing team in charge of recruiting students , and making sure this was actually meeting the needs of the customer.

Discovery

Requirements gathering

Gathering requirements was a long process that involved many people from many teams across the organisation and a organisation first... Input from the users (potential students).

Along with 1-2-1 interviews I ran interactive workshops that saw stakeholders building a course page out of post-it notes.

Usability benchmarking

Performed benchmarking usability tests on our site and our competitors on a few key tasks. I enlisted the help from a reputable firm, Periscopics, to carry out the tests.

This exercise allowed me to see how the university stacked up against its competitors, and gather a few ideas on where we could improve the user journey on our own site.

Industry comparison

To identify trends in course pages across competitor universities.

I focused on comparing the layout of a course pages, the user journey to find it and subsequently the quality of the content on the page.

The pages researched, in the majority of cases were; the Home page, course search/finder and the course page itself.The simplest user journey to course pages.

If I liked a particular site’s design I gave the site a bit more of a look across a few more pages to see if I could find any stand out features that improved the user experience that we should be taking note of.

With all this information I was identified trends in:

• Design
• Layout
• Information shown
• Information architecture
• Functionality

Design

Sketches

With such a complex design I started sketching possible layouts.

For me this was the best way to get a lot of ideas quickly and also flush out ideas that the stakeholders didn’t like.

I concentrated on basic hierarchy, layout and in this case the most important consideration was the content.

My decisions were informed from previous stakeholder interviews, competitor research and user testing.

Low fidelity wireframes

Stakeholders are happy so far and I have my basic layout in sketches.

Away with paper and into a digital form. My tool of choice was Axure RP.

This next step of wireframes allowed me to really work on the layout of the pages and to start adding some real content, bringing the design to life.

These then paved the way to start involving the users in validating the designs.

Course page template wireframe

Validation

Usability testing

Before any major signs of brand were introduced to designs, I wanted to validate the layout and labeling of what had been produced.

I wrote a test containing 15 tasks taken from the personas that I had worked on before the redesign. This also contained a script, as I needed to enrol some facilitators from the web team to help me get the test numbers I would need.

I wanted to get some input from real prospective students, something you can’t find at a coffee shop. So I headed to a fair attended by 16-17 year olds looking to go to University.

We tested Guerilla style at the fair and did so singularly. The testing and concentrated on key tasks that we know that this user group is looking for, as informed from our personas.

The results were very positive. The majority of users completed all tasks with relative ease, with the only changes needing to be made the wording of a few headings and the design of tabs.

Additional user research

Focus group

To make sure my research was as comprehensive as could be, and that I hadn’t missed anything, I set up a focus group with a small yet lucrative segment our customer base: international students.

This informal workshop allowed me to gain insight into our international students audience and how they:

• use our website
• what information they need
• the importance of each piece of information
• gain feedback on new designs
• additional insight in their needs, fears and frustrations which can feed into our personas

Tasks

I used an open card sorting exercise to determine what information they needed to know about a course and about the university to make a decision about applying for a course.

Finally they were asked to group the card by relevance and order it by priority MuSCo (must should could), focusing on the cards prioritised as musts.

Discussion

I decided to use the remaining time with the users to really pick their brains.Using the post-it notes as prompts I would ask more question to either gather missing information or additional insight.

With the session coming to a close, I allowed the students to freely discuss any frustration around the website and the application process. Not always directly linked to the website, but as someone wanting to make a change, I could always record what is said and pass it on to the relevant department.

End result

A flexible, mobile optimised template which allows the University to market their courses to prospective students.

The content has been validated to be what prospective students want, to help them decide in choosing a course.

Original template in the GEL site

University of Westminster Architectural Technology Bsc course page

University of Westminster Architecture BA course page

Overall outcomes

Feedback

Even though we had run usability tests early on in the design process, I still wanted to make sure that what we were releasing was what our users needed.

So I ran surveys, feedback sessions and used Hotjar to see what impact the new design had on the users.

The feedback from prospective and incoming students was overwhelming. With some students saying that “the course page was the reason why they chose to apply to the University”.

Increase in conversions

Having a functional, well-tested design was just the start. The design of the page needed to convert prospective students at the busiest time of the year. Clearing. NB. Clearing is a way for universities to fill any spaces they have left for the new academic year. It gives applicants who do not hold an offer another chance of finding a university place.

Conversions on full-time undergraduate course pages over Clearing

Conversions on full-time undergraduate course pages (clicks on the apply button) for the period 1 July – 6 September, comparing 2016 data to 2017 data:

• Conversions up by 50% overall (1,499 extra clicks on apply)
• Conversions up by 29% on desktop (582 extra clicks)
• Conversions up by 27% on tablet (109 extra clicks)
• Conversions up by 97% on mobile (883 extra clicks)

The top ten converting course pages had a mean average increase of 72%.

The overall traffic to course pages had not increased for 2017 (it had in fact dipped by about 3%) – it is the course page conversion rate itself that has increased significantly, suggesting that the new design is a key factor in the increased conversions.

A big success for the University at a very competitive time in Higher Education in the UK.

Open day events

UX/UI Design

University of Westminster

The goal

To redesign the open days listing page and event pages, making them fully responsive bringing them inline with the new online identity and creating a design to help increase conversion.

The challenge

The organisation operates a single event over multiple locations and the design needs to clearly communicate the address/location.

This would involve the design of new components that are not in the pattern library and new functionality.

My role

The UX Designer and creative lead in a 8 person scrum team. Making sure that the users feedback is injected in desigs that have been validated through user testing.

---

Discovery

Content analysis and sector benchmarking

Before delving into the design I wanted to see what the organisations competitors were doing to gain a better understanding of where we might need to be. This included making note of the user journey of each competitor and the information/content displayed.

After looking through the competitors sites, comparing the information against what the organisation currently, and cross referencing this against our user personas, I came up with suggestions to source new content and allowed me to start wireframing.

Usability testing

We carried out user testing of our current pages to confirm what I already knew and to gain any other additional insight.

Design

Wireframes & mockups

Open days landing page wireframe

Open day event page wireframe

Validation

Usability testing

Before the build started I made sure my designs were validated.

This also gave me the chance to gain any additional insight on things I may have missed.

I created a user test script containing an intro, scenarios, tasks and questions from a user test plan all of which were informed by my user personas.

I, along with my members of my team went to Campuses to Guerilla test on current students. All team members had been given a tight script and training from myself on how to perform these test unbiased.

We received some great feedback on the overall design and content. But, more importantly, we found a couple of potential issues around the position of CTAs and missed element/components along with suggestions for additional content to help prospective students.

Post launch analysis

We compared like for like, 2 of the most important events in the recruitment calendar for undergraduate students.

The figures below show the increase in bookings and attendance to these events compared to the year before.

Traffic to the site had not increase by the same margins, so the only factor that had changed was the design of these pages.

Summary for 7 March 2018 UG open day

• 208% increase in the 2018 bookings compared to the same (pre-redesign) event in 2017.
• 63% increase in attendance numbers compared to the 2017 event.

Summary for 10 March 2018 UG open day

• 71% increase in the 2018 bookings compared to the same (pre-redesign) event in 2017.
• 23% increase in attendance numbers compared to the 2017 event.

Building a Pattern Library

UI DESIGN

The Challenge

To create an online design guide for the University's online presence.

This would be a pattern library and the building blocks for the redesign of the University's outward facing website.

As well as being the starting block for design work it would act in a secondary capacity as a design and brand guide for the University's 3rd part systems. Allowing all digital platforms to have a consistant look and brand presence.

My role

To redesign the bootstrap theme. Design and build on brand componants to transform the University's online presence.

Being a one person team, and the University not having a dedicated front-end devloper, I worked with a great outside agency to help with the build and implementation of the site.

What I did

• UI Design
• Front end development (HTML/SCSS)

Tools

Axure (wireframes/prototypes), Pen and paper, NPM, Illustrator (Icons), HTML/SCSS (prototypes), requirements elicitation

End result

See the end result