Alexander Christian
Designer

CECA

UX, UI, & Research Case Study

Introduction

About Company
CECA is a non-profit organization of elevator contractors and suppliers. CECA has been serving the interests of independent elevator contractors and vertical lift suppliers in Canada for over 40 years. CECA is a membership driven organization.

About Project

CECA is looking to build a comprehensive collection of elevator manuals for maintenance members to access the information they need in a convenient and organized location. Acting as a neutral member for elevator companies to utilize.

CECA

Sitemap

CECA

Registration User Flow

Wireframes

Colloquially called "Blueprints" for their appearance, these wireframes provide a useful blend of wireframe and comps, giving the client and developers a better representation of the final product.

CECA

Registration

Utilizing an Auto Suggestion for the Company Name field allows us to better manage a complex list not suited for a dropdown, while allowing a user to enter a new, unregistered option if needed.

The Password & Confirm Password fields both feature live validation for requirements.

CECA

Confirm Registration

After completing the initial form for Registration, the user is provided instructions and helpful suggestions to confirm the registration through their email.

Included with troubleshooting tips is an option to Resend Confirmation Email, or Contact Support as a last resort.

CECA

Sign In

Included in the Sign In page is both an option to access Registration or begin the process for Password Recovery.

CECA

Password Recovery

A confirmation email is sent to the registered email, where a link is provided to complete the password recovery process.

CECA

Password Recovery Confirmation

Similar to the instructions provided for registration, the pattern is repeated here for the user.

CECA

Reset Password

Resetting the password follows the same pattern as registration, including live validation of password requirements.

CECA

Reset Password Success

Replacing what was originally a separate screen with a confirmation prompt that takes the user directly to the Sign In screen reduced friction for the user.

CECA

Home

Our primary method for finding manuals is to utilize the Search and refine through Filters. We also have categories for users not sure what they are looking for.

CECA

Filtering Menu

Filtering was reduced to what was considered the most essential features. Saved manuals are now accessed as a filtering option rather than storing them separately for the MVP.

CECA

Search Results

Search Results includes interactive filter tags, and utilizes a simple card organization. 

CECA

Manual Detail

Once a manual is selected the user is given a detailed view of the manual and will also receive other relevant manual options below based on search results

CECA

Manual Detail Focus

Opening the manual in focus mode loads the file and allows the user swipe or use navigation controls.

CECA

Menu

Browse all manuals returns the user to the Home page, while View Saved Manuals loads the Home page with "Saved Manuals" filtering selected. This was cost effective solution to implement for the MVP.

CECA

User Profile

Users will be able to edit information they provided. Changing their email will prompt the user to complete the Confirm Email process. CECA Member ID are provided automatically.

Visual Design

Utilizing the brand color and type treatments of the CECA brand, and gave the app a modern feel without losing it's brand awareness.