MATT LEECH UX DESIGN PORTFOLIO LOW RES

Download MATT LEECH UX DESIGN PORTFOLIO LOW RES

Post on 15-Apr-2017

55 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    Matt Leech49 Ryde Road, Brighton, BN2 3EGContact: +44 (0) 7957 300 592 | matt@mattleechdesign.com | 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 UsERs 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 592mailto:matt@mattleechdesign.com

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    hi, Im 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 its 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

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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.

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    section 1UX & UI pRoCEss BREakdowN/CasE stUdIEs

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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 personas

    Ets BasE systEMCoLLaBoRatE: REsEaRCh

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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 JustinMinds 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.

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    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-bels 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

  • www.mattleechdesign.com

    UX | UI | DIGITAL | WEB | BRANDING | PRINT

    Section 01

    pRoJECt sUMMaRy

    the system was very outdated at etS for their clients 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

    Joe.Bloggs@company.com

    **********

    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...