matt leech ux design portfolio low res

www.mattleechdesign.com

UX | UI | DIGITAL | WEB | BRANDING | PRINT

Matt Leech49 Ryde Road, Brighton, BN2 3EGContact: +44 (0) 7957 300 592 | [email protected] | www.mattleechdesign.com

I aM a UX/UI dEsIGNER who has EXtENsIvE EXpERIENCE woRkING IN BRaNdING, pRINt, dIGItaL aNd wEB dEsIGN RoLEs. I MadE thE tRaNsItIoN INto UX dEsIGN IN 2014. whILst woRkING CLosELy wIth dEvELopERs aNd aLso CLIENt faCING, I BEGaN to UNdERstaNd thE NEEd aNd ChaLLENGEs of UsER-CENtEREd dEsIGN. It Is soMEthING that I fEEL passIoNatE aBoUt, It Is oNE thING to CREatE a UsER INtERfaCE that Is attRaCtIvE aNd EyE-CatChING, BUt thE REaL vaLUE Is to UNdERstaNd how to CREatE soMEthING that hELps thE UsER, soMEthING that REspoNds to thE UsER’s NEEds, whICh IN tURN adds vaLUE aNd REtURN to thE stakEhoLdER/CLIENt.

sECtIoN 01

UX & UiA look over my work process and some case study examples of UX and Ui projects.

sECtIoN 02

digitAl, web, bRANdiNg & pRiNtA selection of work i have created over the years working in print, digital and web design roles.

+44 (0) 7957 300 592

mailto:[email protected]



hi, I’m Matt...wELCoME to My poRtfoLIo, fIRst thINGs fIRst, hERE Is a LIttLE BIt aBoUt ME...

when i am not immersed in UX i enjoy the outdoors, i am an easy going guy who enjoys the simple things in life, which suits me and my family, based here in brighton. i enjoy all types of activities, be it a walk around town, a hike up the South Downs or a peaceful day fishing in the middle of nowhere, i am content. i also enjoy a good de-sign show or walk around a gallery, be it a digital exhibi-tion or a stroll around the tAte Modern it’s a great way to find inspiration. I have also been lucky enough to travel and work overseas for a good few years back in 2002, travelling around South east Asia, Australasia, Asia and europe, which i feel really gave me inspiration as a de-signer and certainly broadened my horizons as a person. Returning and working in london in 2009 i have worked in a variety of design roles from print to digital and web i made the exciting transition in UX and Ui design.

Over the past 2 years i have been working at etS as their Senior designer. i am responsible for working with their psychologists and developers to create bespoke HR systems for large international blue chip companies. this was the start of my UX journey, after many hours of training both online and in one-to-one workshops with UX tutors, i began to apply the UX processes to the HR client projects for etS. the results were and still are fantastic, as a company etS has increased its revenue, the teams of developers and psychologists at ETS are finding that the whole work cycle is much more manageable and enjoyable, and the clients are very happy with their products and the interaction they had throughout the life cycle from concept to completion.

For me, I was now officially hooked and sold on the work-ing life of the UX designer. i hope you enjoy my portfolio, with some UX case studies and a quick insight into how i work as a UX designer, along with some examples of work in other fields of design.

EMp pLC2009 – 2011Graphic/digital designer

IdM pdG Co,.Ltd 2004 – 2008Graphic designer

fragrance oils (International) Ltd2000 – 2002Graphic designer

UBM - United Business Media2011 – 2013digital art Editor

EMp pLC2009 – 2011Graphic/digital designer

Informa2013 – 2014Creative designer

freelance2011 - 2016wordpress sites

Ets2014 – presentsenior designer



My UX design process...I foLLow a UsER CENtREd dEsIGN appRoaCh to My woRk, By kEEpING yoUR BUsINEss GoaLs aNd oBJECtIvEs IN aLIGNMENt wIth thE NEEds aNd EXpECtatIoNs of yoUR UsERs.

i always try to work as closely as possible with my clients and teams, going through rapid cycles of research, design, feedback, refinement and validation throughout the project. This means that there is less long-term risk to the end product and the delivery, and also helps to make the whole experience much more enjoyable for all involved. the sig-nificant outcome to this process is a useful, usable and successful experience for your users, but just as importantly a return on investment for your business. i have listed and sketched out the processes below to highlight the thinking and issues that can arise.

1) INfoRM aNd dEfINE: REqUIREMENts GathERING

Meeting with the client to discuss the brief and docu-menting all requirements to visualise the project, expec-tations, scope, budget and to define exactly what the project will in tale. establishing goals and priorities with the client at this stage is essential.

2) CoLLaBoRatE: REsEaRCh

Competition in the marketplace, understanding what technologies are available, testing existing products us-ing surveys, screenshot surveys, day-in-life studies, card sorting, videos of usability tests, workshop sessions, user journeys, user experiences and expectations, cre-ating user personas and studying outputs from ethno-graphic research.

3) dEsIGN: CoNCEpt dEsIGN

Using Axure or the Adobe Suite to create the following: Story boarding, user flow sketches, information hierar-chies, paper prototypes, mock-ups, Ui sketches, wireframes, interactive prototyping, animation mock-ups and video sketches.

4) vaLIdatE: tEstING

At this stage it is important not to assume that what you are creating is in fact going to work to get you to the end goal. i advise on testing the conceptual design us-ing internal focus groups, user centred testing groups, client user focus groups, user task scenarios, videos of usability testing, surveys and development testing.

4.1) RepeAt StAgeS 3 ANd pOSSibly 2 depeNdiNg ON feedbACk fROM teStiNg/vAlidAtiON

5) dELIvERy: dEtaILEd dEsIGN aNd spECIfICatIoN

depending on the scope of the project and my involve-ment on delivering the final product myself or working with developers there are a variety of methods to delivering the detailed design and specification. I use the following: UI mock-ups, user flow mock-ups, story boarding, information hierarchies/site maps, mock-ups, paper prototypes, animation mock-ups, video sketches, wireframes.



section 1UX & UI pRoCEss BREakdowN/CasE stUdIEs



Section 01

UX staGE sUMMaRy

Here i would like to show a variety of techniques and processes that i use for each stage of the UX design life cycle. documenting requirements is an essential stage to the UX design process, here it is important to es-tablish goals, priorities, budget and time frames.

UX skILLs

Speaking directly with clientweb based project board (trello)Using a shared excel documentCreating a brief sheetdata gathering (google Analytics)

Ets BasE systEMINfoRM aNd dEfINE: GathERING REqUIREMENts



Section 01

UX staGE sUMMaRy

Researching the product, user issues and also the competition in the mar-ket place is essential. it can often be the case that what the client would like to achieve and what the users of the product actually think are not aligned. At this stage it can become clear that the priority for the client may change, and that buy addressing an issue that they may not have con-sidered, will actually have a greater impact on the product and their re-turn than just going ahead with what the client has initially requested.

UX skILLs

Researching industry competitionfocus group user testingfocus group Q&AUser journey testing and mappinginformation hierarchyUser surveysClient internal surveysOnline surveysUser persona’s

Ets BasE systEMCoLLaBoRatE: REsEaRCh



Section 01

UX staGE sUMMaRy

At this stage the designs should be basic and more of a way to gauge an understanding of the product user journeys and features with the cli-ent/stakeholder. At a basic level, of-ten working with the client and even users to establish structure, naviga-tion, features and interactions.

UX skILLs

SketchesUser journey flowsAxure interactive wireframesillustrator/photoshop mockupspaper prototypes

Ets BasE systEMCoNCEpt dEsIGN



Section 01

pRoJECt sUMMaRy

A bespoke web-application tool that is capable of handling all wedding bookings and data capture used by staff on ipads. the client requires a web App that his staff in ireland will be able to use with clients when tak-ing wedding bookings on the stores ipads. The system must be flexible in editing inputs and very easy to use as some staff have english as a second language. the data captured must be easily collated, categorised and easily accessed

My INvoLvEMENt

UX project leadershipUi designdevelopment support

pRoJECt IssUEs

location of clienttesting remotelybudget changes required re-designlanguage considerationsdevelopment outsourcing costs

pRoJECt oUtCoMEs

the system is now signed off by the client after a series of re-designs and changes due to feedback from usability testing with the users/staff. The user journey has been simplified and the outputs have been signed of with a CMS office hub environment for the stakeholders to use with man-aging the bookings.

UX CasE stUdy:E.M.M wEddING app

REsEaRCh-dEsIGN CoNCEpt:EstaBLIshING thE UsER JoURNEy

• Create the i.A (information Architecture)• Understand all functionality for the user• Understand how this links to the database• Consider data mistakes and options for edits• Create simple sketches highlighting user journey• test/share sketches with users for feedback• Create wireframes for user journey for testing

tEstING IssUEs

• location of client (ireland)• location of users (ireland)

tEstING soLUtIoNs

• the initial sketches were sent over and a skype session was set up with the client and his staff

• the interactive wireframes/prototype was sent via JustinMind testing tool for feedback with comments

• the 2nd iterations to the Ui and user journey were also sent via JustinMind sharing tool for feedback via comments.

• A live testing session with users via JustinMind’s validately (think Aloud) or Skype.

doCUMENtING REqUIREMENts

• establishing what it is we are creating• who is the user• why is this going to bring value to the stakeholder/client• How are we going to create this• How much time have we got for each stage of the process• what is the budget? establish the budget for each stage of the process.

fEEdBaCk fRoM tEstING UsER JoURNEy/UsaBILIty

• The pages were a little to complicated with too many fields per page• the process felt a little time consuming for 1 page• the language used was confusing to some users due to english being their second language

UX dEsIGN ChaNGEs to MEEt REqUIREMENts

• Simplify the user journey. One field per page, move onto the next field (page).• Establish language that all users can understand for each field.

The user journey is interactive giving the ‘user/tester’ the ability to navigate the prototype and add comments.



Section 01

dEsIGN CoNCEpt & vaLIdatIoN:UsER JoURNEy & UsER INtERfaCE

• testing the new user journey with the User/Staff• Creating new wireframes/interactive prototype for testing• Creating the User interface for sign off• Creating the interface elements for development• working with developers to clearly manage the user journey and

functionality• working with the developers on the data output CMS/Reporting• Managing the schedule and development stages for testing with the

stakeholder and users

weddiNg detAilS ClOtHiNg detAilS pRiCe detAilS MeASUReMeNtS & AlteRAtiONS

fiNd OR CReAte New

bUyiNg OR ReNtAl



Section 01

pRoJECt sUMMaRy

A bespoke HR system, that allows the user to create and manage their own questionnaires and reports. the system would need to be sim-ple, clean and to sit with in AkzoNo-bel’s ‘your Compass’ branding. the system would sit on the employees desktop and be a centra hub for them to monitor and a day-to-day basis. this would require the system hav-ing notification push alerts and also to inform the user on any interaction with their questionnaires or reports from other users.

My INvoLvEMENt

UX project leadershipUi designimplementation support

pRoJECt oUtCoMEs

The system is in the final stages of development. the hub was re-de-signed several times to meet usabil-ity requirements and was tested in-ternally at AkzoNobel with a number of managers and employees. After receiving feedback and working with the development team on design updates the system is now signed off and going through rapid develop-ment cycles to ensure that their is testing of each area of the hub whilst other areas are developed, this is to ensure that the project is live with in the deadline for launch.

UX CasE stUdy:akZoNoBEL systEM



Section 01

pRoJECt sUMMaRy

the system was very outdated at etS for their client’s mobile HR sys-tems. Unresponsive and often clunky or confusing. working with the devel-opment team i created some wire-frames and mock ups to create some user friendly user interfaces, using the research and testing we gathered from the desktop demo tool. As the budget and time frames for this part of the project were quite tight we have made incremental small fixes, with the aim to have a full scope pro-ject for improvement to come in the near future.

My INvoLvEMENt

UX project leadershipUi design

pRoJECt oUtCoMEs

the mobile systems for the clients look a lot less clunky, make more sense to the user than the previous version due to a more sensible navi-gation, and the increase and layout of the content size and structure.

UX CasE stUdy:Ets MoBILE systEMs

Width: 640 px retina

Height:1136 px retina

Base navigation

Default search and info area

Client Logo

Copyright

Log in here

ETS Logo

Title of the Tool

Type your email address here

Type your password here

Tap here to retrieve password

Have a HTML copy link here to retrieve password not a button to

reduce development time

LoginA large Login button - very clear and visible, branded to the clients

primary colour

Make sure the fields are visible and add dummy text to show that this

is where you enter the information

[email protected]

**********

Align all content with in this Div to the Divs above for client logo and

Title of Tool

Width: 640 px retina

Height:1136 px retina

Base navigation

Default search and info area

Client Logo

Copyright

Activity page

ETS Logo

Activity page

My 360 Tasks

Take surveyA large CTA button - very clear and

visible, branded to the clients primary colour

Inputed data generated by the developers/client input

Self

Participant

27 Dec 2016

Not Started

Align all content with in this Div to the Divs above for client logo and

Title of Tool

Go to site

Participant Name

Relationship Type

Feedback Close Date

Feedback Status

Naigation of the current page and also link back to the main menu



Section 01

pRoJECt sUMMaRy

i was asked to create the user in-terface of a bespoke performance management system for logicalis. working closely with the business psychologist and development team. the system mock-ups required to show the full user journey and any in-teractive feedback pop ups that may appear for the user.

My INvoLvEMENt

Ui designimplementation support

pRoJECt oUtCoMEs

the system was a success over at logicalis with the opportunity for ongoing repeat business with etS on an annual contract to continue to host and manage the system for them.

UI CasE stUdy:LoGICaLIs systEM



Section 01

pRoJECt sUMMaRy

we had the opportunity of work-ing with ee to update and re-design their HR performance management system. the brief was to create a bespoke, user friendly system that incorporated their branding, iconog-raphy and also had the functionality to offer the user options for manag-ing participants, retrieving reports and feedback on their ongoing per-formance profile and to also have a ‘social media interaction’ element to the system. Creating these user flows and working with the business psychologists. sales teams and de-velopers i was able to help bring ee into the fold at etS and create a well admired and much valued system for them.

My INvoLvEMENt


pRoJECt oUtCoMEs

the system is still in the develop-ment stages, although some chang-es have now been made due to the client wanting some elements re-moved from the user interface.

UI CasE stUdy:EE systEM



Section 01

pRoJECt sUMMaRy

A selection of engagement Survey log in screens i created for the cli-ents of etS.

My INvoLvEMENt


pRoJECt oUtCoMEs

these initial mock-ups helped the sales teams to bring the clients on board, increasing revenue at the company and by creating a set of system mock ups highlighting the user journey the client was able to visualise the whole system and out-put reports.

UI CasE stUdy:Ets CLIENt systEMs



section 2dIGItaL, wEB, BRaNdING aNd pRINt pRoJECts



Section 02

A mobile responsive HtMl email template 1, 2 & 3 column sections, used for newsletters and events.

A line of digital demo tools that help to educate users on their products.



Section 02

i created a number of reports, e-books, infographics and digital information packs for etS.

focusing on data and client success stories the challenge was to have an engaging/visually pleasing piece of information that could be used for both print/sales and digital/online marketing.



Section 02



Section 02

Slide 1

On opening page static image background, opacity area to slide in from the right hand of the

page with copy band marker in red to fade in.

Slide 2

titles/Headers or body copy to then fade in on top of the opacity area, level with the copy marker.

Slide 3

logos and sponsors to fade in at the bottom of the opacity area.



Section 02

2 0 1 2TRAVEL

AWARDS



Section 02



Section 02

Helping etS establish strong brand guidelines was essential to improving their products.



Section 02

matt leech ux design portfolio low res

Documents