Matt Mitchell

Wireframes

These wireframes were created to establish direction for making payments in a responsive friendly environment. Currently the site has two codebases, one for mobile and desktop, and not all functions exist in both which has been a pain point for customers for too long. These wireframes suggest possible solutions to address these issues and include all expected site functionality.

Being in the automotive business, physically having vehicle titles is something that's needed on a frequent basis. In order to receive the titles from AFC, our dealers (customers) have always contacted branch employees at satellite locations in order to do this. This new "title request" UI will give the customer the ability to request titles right from the site.

Prototypes

Field employees internal to AFC were often tasked to manually verify vehicles for customers in order to grant loan extensions. These prototypes were created to aleviate these cumbersome tasks and give time back for other important items.

This prototype was intended for AFC's new public facing site yet to be created. Management requested a design that would help communicate what AFC is and does for it's customers for those who may be seeking more information. This project was unfortunately handed off to marketing but I'm still very proud of this design.

Our customers were in need of a home page that will display relevant information to them and their business. User research suggested that they needed effective ways to determine upcoming payments and overall account balance.

Conference Display Animation

This animation was created to be displayed during the yearly field conference for AFC. It's intent was to showcase progress made on the responsive customer payment portal. This consists of a screen record capture in our non-production environment and an iPhone photosohp template. I combined the two in After Effects and masked the corners to complete the rounded corner effect.

UI Pattern Library

This pattern library was created to aid in the implementation process of the new responsive customer payment portal. This was created, architechted, and maintained by myself to be consumed by our dev teams both on site and off-shore. It also served as a means to finalize designs and UI components in HTML and CSS before starting in the production code environment.

Responsive Email Design

A few of our larger e-commerce sites at Pearson had an email newsletter that would be sent out on a weekly basis. The current design doesn’t fit or work well in most modern email clients on smaller mobile devices. In order to modernize the user’s experience we would have to come up with a responsive email template for site managers to use and publish that was capable of adapting to any screen size.

Solution

My coworker was responsible for the preliminary wireframes, due to workload and scheduling conflicts I took this on during the prototyping phase of the project, and handed it back to my coworker to implement. Below you will find a link to an HTML high-fidelity prototype showcasing the responsive nature of the proposed email newsletter redesign.

• Functional HTML prototype

Roles and Skills Used

On this project, I held the role of User Interface designer and front-end developer(HTML, CSS, JavaScript). These prototypes were well received by product management and stakeholders and approved for implementation to prodcution environment.

Logo and Site Design

InformIT is one of three flagship e-commerce portals (out of 15+) that our team maintained at Pearson. The last time the design had been refreshed was in the early 2000’s. At this point in 2014 it was in great need of an update.

Driven by Branding

This wasn’t a scheduled project on our roadmap by any means, the origin of this project is pretty interesting actually. Almost a year prior to the completion of this redesign Pearson marketing mandated that all web portals within Pearson’s realm be branded with a “Pearson strap” at the top of the page. The only catch was you had to use one of 6 colors associated with the new branding guidelines. Ok great, well let’s get to work putting this thing into place then. Should be a good day or two worth of work for all of the sites.

Solution

Hold on a second, hold your horses sir, none of these colors work well with InformIT’s color scheme. We can find ones that work well for all other sites, but not this one. Well I guess one solution would be to redesign the site. So that’s exactly what I did.

• Made the colors a bit more neutral to fit with the brighter colors given to us by Pearson’s corporate marketing team.
• removed shiny gradients, a lot of drop shadows, and most of everything else that dated the design to that time period.
• Increased contrast on navigation elements to conform to WCAG accessibility standards.
• made tagline below logo softer by using lower case text and lighter font.

Comparing old vs. new headers

Roles and Skills Used

On this project, I held the role of User Interface designer. These prototypes were very well received by one of our most difficult stakeholders. The code was implemented into production by my coworker.