erik riccardimy role + responsibility as the ux/ui designer for this project, my role was to...

www.erikriccardi.com Erik Riccardi 1

USER EXPERIENCE & USER INTERFACE DESIGNER

ERIK RICCARDI

At the core, Erik is an intuitive creative mind. He is passionate about helping clients achieve their goals using design. He is always looking for a challenge and enjoys learning new techniques and programs from others he comes in contact with.


I am seasoned User Experience & User Interface Designer skilled at sketching, wireframing, UI design and bringing ideas to life through prototyping. I love graphic design and working with stakeholders to solve user problems. I get excited about technology and how consumers interact with it. In my next role I want to join and lead a design team to build innovative user-centric products.

WHO AM I?


MY SKILLS & SOFTWARE

MY RESPONSIBILITIES

• Adobe Creative Suite

• Balsamiq

• HTML

• CSS

• Xmind

• Responsive Design

UI DESIGNI have many years of experiencecreating colorful and award winning designs. I have a great understanding of layout, color, typography, icons, images and design theory.

MY SOFTWARE

USER RESEARCHI have experience doing end to end user research projects, including creating the plan, recruiting participants, writing the guides, conducting interviews, and presenting findings.

WIREFRAMINGWireframe is a blueprint for each screen of an interface. Its main purpose is to show how something works, not how it looks. Wireframing defines the elements that need to be present from page to page.

PRODUCT DESIGNI have a passionate curiosity to explore new stuff and unveil trends. Solving problems is a great passions of mine.

• JavaScript

• WordPress

• SharePoint.

• Justinmind

• Lean UX

• Design Theory


MY SELECT PROJECTS

The following are a selection of projects from my portfolio of work to demonstrate my range of skills and experience as a User Experience Designer. I’ve tried to showcase evolution of each project and snapshots of the process that was followed.


What is netFORM Pro?

netFORUM Pro SaaS software provides a complete set of membership management features, easy to use reporting and enhanced tools to allow associations to easily interact with members and strengthen member engagement.

Key Goals

I needed to update the UI with Ablia’s new product styles. Secondly, the registration module used to sign up people at trade show or conversations was too long and not easy to follow. The steps need to be reduced.

My Role + Responsibility

As the UX/UI designer for this project, my role was to collaborate with product owner and design the new workflow of the module.

I worked closely with our development team to determine what strategy would be best to improve the registration module.


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design

05: Testing & Learnings

For this project I took the Lean UX methodology approach.

I picked the Lean UX approach because it focuses on the experience under design and is less focused on deliverables than traditional UX. This way I could obtain feedback as early as possible. It required a greater level of collaboration with the entire team and being the only designer, I needed to speak with the developers as much as possible. Also, Lean UX mimics the Agile life cycle we were in the beginning process of adapting to, so it fit perfectly.

Assumptions• Users feel the registration process was too

long.

• The long process is causing low rates of completion.

• UI is has not been refreshed for years.

Why Lean UX?

12Steps to reduce

10Person Team

20+Pots of Coffee

12Steps


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design


In the discovery process I mapped out the current user flow, did a Heuristic evaluation and conducted interviews.

My first step was to map out the current event registration flow. I wanted a visual of the entire process and start to think how we could shorten the process.

Current 12 Step User Journey Flow


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design



A heuristic evaluation was performed by defining criteria to identify weaknesses and strengths of the website. These same criteria would be used to guide our project and test the new product.

Heuristic Evaluation


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design



User interviews are a core to user experience. That’s why I chose to approach 8 people to interview, taking into account the recommendation made in Donald Norman’s article, “Why You Only Need to Test with 5 Users,” noting that it is possible to learn about 80% of the errors, problems, and behavior from the first 6 users.

That would bring enough data and inputs to generate concepts and hypothesis.

After conceptualization phase, however, I’d take the prototype out to test with other users in order to gather more feedbacks and validation.

Interviewed Audience

The interview took approximately 30 minutes and use usability scripts that I wrote with open ended questions I felt would help me understand their concerns. The scripts gave the users a series of task to perform. The goal was to see how well they completed the tasks and then I would ask if they were excepting that action or what are your thoughts on the layout.

Interviews

80%Found the

workflow to register people to long and

cumbersome

65%Wanted a newer

look to the product

20%Found the flow

to be ok but needed some

improvements


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design


I now start looking at the data to create personas and a new user flow.

Based on doing empathy map exercises I created two important personas who I felt would be the primary user of our application. This showed us the main goals and behaviors of our users. We referred to them throughout the entire development process as a guide to make assumptions and scenarios where they would perform as users.

Personas

Sara RandallMEMBERSHIP MANAGER

“I need confidence that the system is accurately capturing and reporting my data because I put a lot of time and effort into it. I

expect it to quickly give me what I need, when I need it.”

40 year old, female5 years of experience as a Membership Manager of an association

Graduate Degree Using netFORUM Pro for 4 years

GOALS• Accurate membership billing

• Membership retention

• Up to date membership reporting and trends

BEHAVIORS• Handles daily processing and

inquiries

• Wears multiple hats to accomplish all necessary tasks

• Performs repetitive and tedious daily tasks

PamelaDATABASE MANAGER

“I appreciate an application that is easy to use and can be customized for specific user types or roles.”

52 year’s old, female3 and half years of experience working at a medium-sized nonprofit

Volunteers a minimum of 8 hours a week with her organization’s external events Bachelors Degree in Information Systems

GOALS• A robust reporting tool that is

flexible, customizable, yet easy to pull reports.

• A product that limits a user from entering invalid data and offers error-prevention.

• Software that is very intuitive to limit the learning curve and training needed for new employees.

BEHAVIORS• Responsible for establishing job

specific workflows to keep staff on track.

• Pulls comprehensive, on-the-fly reports often requested by her coworkers.

• Runs monthly, quarterly, and annual reports so management can review the overall health of their organization.


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design


Now I could start looking at the data to create personas and a new user flow.

After reviewing the usability studies and the heuristic review, I began to brainstorm a new slimmed down process for the module. The process took many whiteboard drawings and sketches; however, we were able to get the process flow down from 12 steps to 4.

User Journey Flow


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design


Once I was finished analyzing it was time to begin the prototyping and design.

The design process started with low fidelity sketches using Balsamiq. This was the quickest way to iterate through many design options quickly.

Prototyping and Validation


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design


Once I was finished analyzing it was time to begin the prototyping and design.

For the design we wanted to have a UI that would be consistent throughout all of Abila’s product line.

Using that base UI structure, I designed an interface for the module that was clean and simple to navigate.

I made sure not to weigh down the design with non-essential UI elements.

New UI


netFOURM Pro

01: Process

02: Discovery

03: Analyze

04: Design


During the mockup process I did some user testing to get a sense of what the users were thinking when they saw the new process. The results showed that users enjoyed the new process but were still getting suck on a few ideas. This helped me to go back to the whiteboard to see how I could create a solution for these new issues.

Testing

Methods:• Usertesting.com• One on one interviews with users

Techniques• Survey• A/B testing of the new user flow

Results• We discovered that the users enjoyed the new UI and user flow of the module.

• Testing also revealed that they where getting suck in the middle of the new flow. We analyzed our findings and found a new solution. With redesigned and testing the user was getting through the new workflow with ease.

• Research is VERY important: The user survey revealed unexpected information and made it possible to adapt the product to users’ needs.

• Personas are powerful: Being aware of users’ needs helped me to create a seamless experience for our users.

• The user is always right: Conducting user testing and evaluating users’ feedback at various stages helped me to discover and eliminate issues during the process.

Learnings


What is the Project?

Redesign and reinvent the Florida Turnpike Enterprise’s intranet to a content management system like SharePoint so employees can be more engaged with the company and to begin to use the intranet as a file collaboration tool.

Key Goals

The main goals of the project where to build an intranet to get people more involved with it and to begin a new way of file collaboration among departments.


As the UX/UI Designer and Product Strategist for this project, my role was to collaborate with the product owner, department heads and executives to find the correct SharePoint solution for them. I also provided SharePoint training in setting up department sites, file migration and collaboration.


Turnpike Intranet

01: Discovery

02: Analyze

03: Design

04: Learning & Results

A survey was used to help us to understand the different types of personalities working at Florida Turnpike and what would appeal most to them; from a functional, messaging, and visual standpoint. Over 200 employees provided feedback to the survey.

Find information quickly 86.04%

Simple and easy interface 82.43%

Accurate search results 66.67%

Updated and relevant content 77.03%

Useful widgets 39.19%

Consistency 59.01%

During the Discovery phase I created a survey and conducted user interviews to gather information.


Turnpike Intranet

01: Discovery

02: Analyze

03: Design


Each persona contained a demographic to the average employee, problems, motivations to use the intranet, and motivation to continue to use the intranet.

The information about each persona focused on its goals and frustrations with the product as well as their interaction with it, which drastically affected my design decisions.

Based on the interviews we set up two personas, one for an executive and another representing an employee or manager. We referred to this throughout the product development process.


Turnpike Intranet

01: Discovery

02: Analyze

03: Design


Taxonomy

I worked with product owners to remove content no longer needed and preformed a card sorting exercise with several employees to determine how we rearrange the content.

We went from 7 buckets down to 4.


Turnpike Intranet

01: Discovery

02: Analyze

03: Design


With the proper planning, we were able to confidently move into creating wireframes for the site. We decided to focus more on the functionality and structure of the site, opting for low-fidelity wireframes with very little detail. Ultimately, we could add design elements in later, what was important for our users, was that the site was clear and simple.


Turnpike Intranet

01: Discovery

02: Analyze

03: Design


UI Iterations

With the design I did not want the site to look like a “SharePoint site.” I decided to make it look like a traditional site. With the help of some SharePoint developers we were able to achieve the goal with some customized web parts.


Turnpike Intranet

01: Discovery

02: Analyze

03: Design


Final UI

With the design I did not want the site to look like a “SharePoint site.” I decided to make it look like a traditional site. With the help of some SharePoint developers we were able to achieve the goal with some customized web parts.

Child Pages

Homepage


Turnpike Intranet

01: Discovery

02: Analyze

03: Design


Learning & ResultsWith the customized web parts, a designated person could now keep the site up to date with current content without having any knowledge of coding. This process will help motivate the new collaboration the Turnpike wanted. The leadership of the Turnpike were very pleased with the results and are looking into how they can expand the new experience to all Turnpike offices.


What is the Project?

The PedSafe/Greenway Software Development Package will leverage the technologies installed as part of the PedSafe/Greenway Deployment to optimize the functionality of the hardware, increasing safety for pedestrians, bicyclists and motorists, and providing transit users the ability to access real-time information for multi-modal decisions.

Key Goals

FDOT District 5 came to Atkins to help them write a ITN (Intent To Negotiate) document to procure a vendor to build PedSafe/Greenway Software Development Package. The package contains three unique applications, on-board unit (OBU) emulator, transit kiosk software, and the University of Central Florida (UCF) mobile application enhancement.


My role was to create the use cases and wireframe out each one and give technical advice to the Project Manager.

Timeline3 weeks to create wireframes and write the document.


FDOT

01: Transit Kiosk

Custom-built software to be deployed on transit kiosks will allow users to input origin and destination information to determine the various multi-modal travel options, as well as compare estimated travel time, wait time, cost, and location of each alternative.

• Developer• FDOT Admin• Public Interface

02: OBU Emulator App

03: UCF Mobile AppEnhancement


FDOT

01: Transit Kiosk

Developer

The OBU emulator is a progressive web-application that load like regular web pages or websites, but offers various user functionality, such as device hardware access.

There are three parts that where wireframed out:



A developer would log into the system to get to their dashboard where they can submit new apps for approval, see statuses on previous submitted apps, upload new app updates or even test the app in the emulator environment.



FDOT

01: Transit Kiosk

FDOT Admin





The App Depot Admin would log in into the application and see their dashboard. From the dashboard they can test the submitted app, publish or not approve it. Also the dashboard would tell the admin how apps are preforming with set matrix like download rate and usage.



FDOT

01: Transit Kiosk

Public Interface



03: UCF Transit Mobile App



The user would go to the iTunes or Google Play stores to download the emulator to their mobile device. From the emulator app they can search and install apps that will run in the emulator.


FDOT

01: Transit Kiosk

UCF Mobile App Enhancement

The UCF Mobile application enhancement will provide an interface into the route and mode choice engine application and OBU emulator deployed on user’s Smartphones.



The user would go to a section on the UCF app and be able to type in their destination and the app will show them the best form of transportation for them. The map will show real time data on where the currently location of the transportation is.


Interactive map that shows your location and the real time location of the transportation methods. Also displays campus park lot capacity.

Displays the quickest transportation method to your destination plus arrival time and cost.


UI PROJECTS

The following are highlights of my design projects that I have completed throughout my career.


While consulting for The Florida Turnpike Enterprise they where selected by the USDOT to receive funding to begin an autonomous vehicle program. The Turnpike is partnering with other Central Florida agencies to research how autonomous vehicles will be the future of transportation. The sites purpose is to showcase their partnerships and draw in new ones.

Central Florida Automated Vehicle Partners

http://centralfloridaavpg.com

Project

My Responsibilities

The Problem

This was a brand new site for them. I knew that people in other departments need to edit the site very easily. So I decided on building the template for WordPress. This would give them a CMS system to easily edit the site.

I led the content layout, UI design and HTML coding for the template.

http://centralfloridaavpg.com/


While at the Florida Turnpike I was able to lead the design and development of a new site that will help promote the Turnpike’s effort to build a proving ground to test new tolling equipment and autonomous vehicles. Their goal for the site is to showcase the proving ground to attract car and autonomous vehicles system manufactures to eventually partner with the Turnpike.

SunTrax

http://www.suntraxfl.com

Project

The Problem (Old Site)

My ResponsibilitiesI led the content layout, UI design and HTML coding for the site.

http://www.suntraxfl.com/


When developers would build any internal application for The Florida’s Turnpike Enterprise they used an outdated .NET template to speed up the development process. The issue was the template was old, not responsive and not up to today’s development standards.

Florida's Turnpike Enterprise Application Template

Project

The Process & My ResponsibilitiesI took the initiative to create a new and modern template to use when building applications. I wanted it to be responsive, so if any member of the Turnpike staff was in the field, on a tablet and/or phone the application would be functional on those devices. The new template incorporated the latest version of Bootstrap and .Net code.

Old Turnpike Application Template


My primary goal for the redesign

• To modernize the template• Make it responsive on all devices• Give the developers a new tool to create new applications with• Help speed up the development time• Create a pattern library for the developers to use to help understand where elements go• Be able to customize it for any department within the Turnpike or FDOT

Florida's Turnpike Enterprise Application Template

Goal

Results

The developers enjoyed using the new code, as it sped up the development time for them. We were also able to use the new template on a new Central Office (FDOT) application that required it to be customized to their branding guidelines. So far it has been a great success.

Old Turnpike Application Template


THANK YOU!

ERIK [email protected]

MY ONLINE PRESENCE

www.linkedin.com/in/erikriccardi/

www.erikriccardi.com

erik riccardimy role + responsibility as the ux/ui designer for this project, my role was to...

Documents