WEB DESIGN
Resource Page Re-design
Intro:
The resource page allows the user to look into related topics that surround their selected product.
Challenge:
The resource page is one of five top visited pages but few of the resource tiles are easily accessible.
The page currently has a horizontal scroll that displays 5-7 items at a time. You can filter by category or type but filtering by industry or product may be more relevant to the users. Our current solution is Pathfactory, which has very focused content streams.
Solution:
Implement a vertical scroll (9 tiles) with pagination, so that more tiles are seen and pagination lets the user know how many pages there are. Resources will be pre-filtered by industry page and product page so that the user can focus on the type (case study, video, etc.) This simplifies the process of searching and reduces possibility of bouncing from page to page. Filter will be located on the left so that it is always accessible. On the corporate page, user will be able to access high-level functions. We incorporated a zoom-in, interactive feature to the tiles to catch the user’s attention and to entice them to look into the resource details.
On mobile— instead of check boxes, we are switching to a drop down function so that the user has an easier time choosing their filter.
Research/Reference:
Qualtrics, FormStack, Rydoo
Conclusion:
More resource tiles are viewable, users know how many resources are available, and tiles are pre-filtered depending on industry so that users are not bogged down with products they aren’t interested in.
Previous Design
New Design
WEB DESIGN
Manufacturing Training Page – Calendar Class
Previous Design
Intro:
The Manufacturing Training Page was a program that offered our clients classes to train their employees on the M1 product. They had the ability to choose from different sets of classes scheduled throughout the month.
Challenge:
Information on the page is very spread out and hard to coordinate if you want to take multiple courses. Course overview and class date information is separated, with the CTA at the bottom of the page.
Solution:
Create classes organized within a monthly calendar format to keep the information viewable all at once. Opens up the opportunity for them to sign up for multiple classes, rather than just one course at a time.
Research / Reference:
I used calendar schedules like Microsoft Teams as my influence for my design in order to give the user courses at a glance.
User Flow
HIFI Wireframe/Prototype:
Conclusion:
Class information is presented in a more compact and concise manner. This new method presents an easier way to schedule classes, and schedule multiple classes simultaneously.
Afterthoughts:
I would have re-designed the Order Review section. The hierarchy is a little confusing and it should be more apparent that you could edit class times and dates in that section. Our color palette is limited— secondary colors could have freshened up the calendar, too. Word legibility is a bit hard on mobile, I would have tried a vertical weekly calendar for the mobile vs. monthly calendar view on desktop.
ERP ASSESSMENT TOOL
Project Overview
Re-branded the ERP Assessment tool to help prospects decide if the products, JobBOSS or M1, are a better fit for them. The undecided customers will be sent to business development representatives after taking the quiz. This will be used in future emails and on the website as a lead or contact conversion tool.
Problem Solving
The ERP Assessment Tool was re-branded with the new, minimalist ECI branding guidelines.
The radio buttons were replaced with a cleaner design to match the branding.
A more accurate progress bar showing the current page number over the total was added to show the user progress.
Improved the UX flow by adding the customer’s answer results at the end of the quiz and emailing them for later use.
The back button at the top left allows the customer to change their answer during the quiz.
Previous Design
New Design
Interactive Prototype - Web
Choose your answers by clicking on the radio buttons— the red check proceeds the user to the next question.
Question 5 expands to a secondary question if the user chooses the second answer.
See advancement via the progress bar at the bottom of the quiz.
The client inputs their information to receive their results and further help from a company representative.
The client can restart the quiz by clicking the “x” on the top right corner.
ERP Assessment Tool - Mobile
The biggest difference between Web and Mobile is the progress number switched from bottom left corner to above the question to let the user know what question they are on at a glance.