My name is Ryan Roy,  I’m a User Experience Researcher and User Interface Product Designer with 14 years of experience in the field of user-centered design. I’ve been working almost 100% remotely for the last seven years as a Senior UX/UI Designer.

My main responsibilities are to use my research and design skills to consistently advocate for users’ needs, the needs of the business, and the needs of the teams I support.

I do this by starting with these main questions.

• What am I trying to communicate?
• Are we making user-centered design decisions?
• How do we support both our users and business goals like increasing profit, decreasing costs, and improving value while also making sure I advocate for usability and research methods that benefit all of these.

Portfolio of Projects

ABC Gym Membership Application Redesign

ABC Financial is a leader in fitness club management. They have a reputation for quality customer relationships spanning thirty years.

ABC’s main offering to its clients was a large legacy enterprise product. The team I was a part of was assembled to build an innovative product to replace this legacy application.

Design system under pressure

In the early phases of the project, my team and I built a design system in anticipation of needing to scale our designs quickly. We would be working with several teams of product designers and engineering so we had to stay visually consistent and provide guidelines to follow. The design system was an excellent communication tool and helped to speed up development time dramatically. One big challenge was the time constraints so we had to fall back on first principles of design, as well as tools we had worked with in the past like Atomic Design, the 8 Point Grid, and Google Material Design

Understand our users’ experience

User experience in practice is the act of understanding the product from the users’ point of view and it’s an important early phase in a design process. ABC Financial’s main users are the large gyms that need the software to run everything from membership, sign-ups, and sign-ins to back-office accounting, and bill services.

We decided the fastest way to get started was to do discovery sessions with the current users at one of our client’s gyms to help us understand how the users were currently engaging with our software and what difficulties they were running into.

Observe current users

The Front Desk Lead gave us a complete tour of the facility and then took us through the membership sales offer that accompanies it.

After the membership offer, we had more opportunities to observe other prospects taking the tour too so we had a good understanding of what a prospect would encounter entering one of these facilities.

Empathize with the users’ pain

What was easily observed was just how many steps and how much redundancy existed in the current system.

Our front desk users pointed out all the workarounds and duplicative screens in addition to having to search for difficult to find workflows all making the process of signing up a new member time-consuming and costly.

In addition to a dated UI, the core of the application has functionality flaws going offline so frequently they’re running a real danger of losing the client’s business.

Users Comments

“I just want to be able to do this [Sign-Up] quickly and that’s not possible in this system.”

“If it could have fewer steps that would make our life so much easier.”

“When I’m signing people up they need a canceled check to complete the process. No one has checks any more!”

“The driver’s licenses scanner puts the information in the wrong fields so we have to manually enter everything and mistakes happen all the time.”

Collaborate, Sketch and Flow Map

I prefer to sketch out a few options for a solution before I start working with a computer program. In a remote environment, I use a digital whiteboard tool to collaborate as well as Zoom. In this case, I used a pen and grid paper to start working out ideas for improving the signup experience.

These sketches show the ideas unfolding into the first step, entering the users’ contact data. I took these to the team, shared them with our users, and stakeholders and iterated with their feedback until it was time to work in higher fidelity.

High-Fidelity Designs

We don’t always need to make every screen in high-fidelity. We got to a comfort level of being able to give wireframes and simple sketches to our developers to implement. This allowed more time for research and collaboration on complex parts of the business.

Signup flow

 

Here are the steps a staff member and new member will take in the first phase of the signup.

Screen 1. Demonstrates where the user is taken when they select the Add Member button from anywhere in the application. It’s a global feature to allow faster access for users to start the membership process.

Screen 2. Demonstrates what text entry will look like for two examples. Entering text (First Name) and field errors (Email).

Screen 3. Provides an example of a modal overlay for the waiver in this flow. The screen is provided to the new member to read and agree.

Screen 4. Shows the completed form, Note: Access ID appears as an auto-filled field however it can be manually changed depending on the gyms needs.

Screen 5. Demonstrates how the front desk staff would upload a photo. The need for a feature to take the photo on the spot would be built in a future iteration. For now, we are temporarily assuming the photo is available on their system to upload.

Screen 6. Shows the completed form for a new member.

Screen 7. Shows the saved form that a user can edit as needed.

Conclusion

The front desk staff, managers, and the members all suffered through a sign-on process that was faulty with numerous screens and repetitive practices that hurt all of these users’ experiences.

By reducing the number of steps, making the entry fields easier to read, and the forms easier to understand we have allowed these users to sign up new members almost 76% faster than the previous method. We also saved ABC loss of revenue as this allowed them to keep a major client account.

MyTaskit Project Management App Design

MyTaskit provides a comprehensive SaaS software platform for coordinating tasks within companies and between multiple businesses and their customers. Below are some of the enhancements and features I’ve worked on for MyTaskit.

Personas 

Whenever possible I suggest using personas to help the team understand and relate to the end-user of the particular product I’m designing for. At MyTaskit we needed to understand the goals and desires of our users to better guide the brand in making decisions about the tools and features we were offering.

Persona 1.

The majority of this work is based on the behavior and needs of the supervisors who are or will be using the MyTaskit app. I developed this persona as a guidepost to help our whole company empathize with the needs of the real users and design with specific user needs in mind. The Sam persona is built from a composite of six user interviews with general managers and supervisors working in the marine industry.

 

Persona 2.

I developed this persona to help us empathize with the technicians using our product and to design with their needs in mind. Kent was built from a composite of user interviews with technicians who work in the marine industry. These are also the future managers, supervisors, and decision-makers that will be buying our product one day, so it is key to focus on them as they move up.

Design System

The visual design language we created for MyTaskIt was the design system. This is a series of components that can be assembled to create an interface. Adhering to the standard of a design is how we created a shared understanding and communicated our ideas to the development team seamlessly.

These pieces can be combined in millions of ways and even when all the pieces are really consistent, the results of constructing them are not a cookie-cutter template. So the product is greater than a bunch of reusable components, it’s a unique tool that allows for both consistency across teams and projects and remains flexible enough to allow for creativity and edge cases.

Project 1. Social Profile Feature

The purpose of the social feature, in general, is to allow the businesses that use MyTaskit to share industry info, create groups and follow communities. The activities feature, on the page below, lets other users who are connected to this business see their activity.

The Goal and Approach

The Goal: Enhance the usability to improve user adoption and daily active use.

The Approach: Sketch a few prototypes and show to users, stakeholders, and in-house teams, make iterations, then create mid-fidelity wireframes and then high-fidelity mockups of the enhanced user interface.

Before

It’s common to inherit design debt and I respect the constraints that prior teams had to work with.

The usability of this page suffered when the pressure to get the feature done really lead to more of a literal functional interpretation of the build requirements and no user input.

When this happens in any environment usability will diminish.

The users and the stakeholders who saw this feature of the application after the design was complete were not impressed and the project stayed on hold for months while they replaced the designer. Later it was made a priority again and assigned to me.

Prototype Sketching and User Feedback

I started with a few basic sketches that I shared with end-users, stakeholders and people on my team such as designers, and developers.  Team input is a huge value to me, I enjoy the results of collaboration and iteration. It also gives the team a preview of what we’re considering and the early input helps us vet the feasibility of our ideas. Getting user-centered feedback is also paramount. I shared these with users through informal user testing groups and the response was positive and insightful.

Wireframe

For this group, I created a mid-fidelity wireframe because they were easier to comprehend than a traditional blueprint style wireframe. Mid-fidelity requires a little additional effort but the extra effort was worth it since it got things moving into production fast.

 

Final Result

We moved quickly from user testing and wireframes to high fidelity design because the time we had available was short. This design was approved by the stakeholder, development team and most importantly the users who reviewed it. It was put into development and is currently in production.

Project 2.

Task Priority Feature

The purpose of the task priority feature is to allow the business that’s using MyTaskit to place the tasks they plan on assigning to their technicians in the order of priority they would like them completed in.

Project 2. Accounting Import Tool

The Goal and Approach

The Goal: Enhance the broader appeal of MyTaskit and it’s usability by adding a simple import tool for all customers who use Quickbooks accounting tools.

The Approach: Observe the current process and determine the needs of these types of customers. Sketch out prototypes and show to users, stakeholders, and in-house teams, make iterations, then create mid-fidelity wireframes and then high-fidelity mockups of the enhanced user interface.

Before

MyTaskit’s system for integrating these customers had been to enter each new customer’s clients into the system manually. This was time-consuming, error-prone and not scaleable as MyTaskit grows and the customer client base increases.

Through observation and research, I realized that our users’ natural workflow was to use one or two spreadsheets to keep records of their clients. As a result, the feature we were going to build required some type of error handling and notification as users were likely to overwrite some data with multiple uploads as they added new clients.

Prototype Sketching and User Feedback

I began with iterative sketches that demonstrated how a user could search for files, import and receive feedback about the result.

I showed to our stakeholders and developers on my team and we agreed it needed more detailed information about any types of errors. Based on the research I suggested that it would also improve usability to let the users know where as well as what type of upload failures took place so they could correct them and try again.

Mid-Fidelity Wireframes

I used a mid-fidelity wireframe because they are easier to comprehend quickly. As noted above mid-fidelity requires a little additional effort but the extra effort is worth it since it gets things moving faster, out of UI design and into production.

Note: The main focus is the importing tool and since the background was not part of this project I kept it in high-fidelity but grayed it out.

Final Product

This is a quick video walk-through of the prototype I built to demonstrate to our stakeholders and user. We also found this was an effective tool to communicate with our remote developers. This video provided them detail on the functionality we expected from the build.

Project 3. Calendar Scheduling

The purpose of the Calendar Scheduling feature is to allow the business using MyTaskit to place the tasks they plan on assigning to their technicians on a calendar, see all their task and all their employees in one view on a daily calendar.

The Goal and Approach

The Goal: Offer a feature that user research had strongly suggested is a necessity, remain competitive in the industry and increase usability.

The Approach: Sketch a few prototypes and show to dev partners, users, stakeholders, and in-house teams. Then make our iterations and create a clickable prototype for demonstration.

Before

Previously our users would view each technician’s work individually to see their tasks but they had no way to see the big picture of who was working on what task in one screen. The usability was difficult as a result because it forced the users (supervisors) to jump back and forth between screens to see a view of what their entire day looked like.

Research

Field research uncovered how users were tracking the progress of tasks being completed day by day using whiteboard grids and calendars. It’s a time-consuming method of manual scheduling that we designed this feature to supplant.

Prototype Sketching and User Feedback

I began with rapid prototype sketches to explore the possible ways a supervisor could look at a list of tasks that need to be done and see a list of their employee’s time on a calendar and then add those tasks under each employee.

Our users, stakeholder, and developers reviewed the sketches. From that round of feedback, we agreed to narrow the scope of the design to just cover one day view of the calendar. Our users did not find value in seeing more than one day at a time so they could get their guys working with the least gap in their day as possible. Based on the research I also suggested that it would also improve usability to let the users search for their task and filter them versus having a long continuous list to scroll through.

Whiteboard Round

Medium Fidelity Wireframe

In the early stages, we had sketched the list on the right and the calendar on the left but after further user feedback and competitive analysis, we moved the task list and search to the left of the calendar area. At this time we also moved into wireframes.

Final Prototype

I built this prototype in Axure RP Pro vs Adobe XD as I had with the previous Import Project 3 because of the versatility of the software and the ability to make rapid changes to the entire project. I also appreciate that I can save these as HTML and CSS files for front-end developers.

Intuit

 Learning Management System

While working on the Intuit account for Acumenity, I architected a SaaS application that integrates training tools into one connected platform called Cinch. It’s an LMS that also enables organizations to integrate with tools like GoToWebinar, EventBrite, ConstantContact and more.

This project was vast, took twelve months to complete and during that time I created over twelve hundred wireframes, prototypes, and numerous high fidelity mockups. It started out as an exam testing platform for Intuit exam creators to be able to build and change exams easily, updating them in real-time. Intuit was impressed with our beta of the Cinch app and asked us to develop the application further to replace their existing learning management system.

Below are some of the artifacts from that project. I’ll be adding details of my process soon, in short, however, I performed the research, the sketches, the wireframes and the high-fidelity deliverables (shown here).

Persona 1. Exam Author

For Intuit we needed to understand the goals of our exam authors to better guide us in making decisions about the tools and features we were planning to offer them. These composites also helped us bring empathy to the process and further understanding of why a change or new feature was needed.

The following examples do not discuss my process for this project 

Exam Question Builder (Mid-Fidelity)

Exam Question Builder (High-Fidelity)