Level 11
DeCurtis FCS
Project Type: Full Time at Level 11
My Role: UX Design
Skills: UX/UI Design, Prototyping
Tools: Sketch, ProtoPie
OVERVIEW
While working at Level 11 (now Launch Consulting) I worked on a client project for DeCurtis. We designed and built a custom, end-to-end inventory and fulfillment management system for the client. The deliverable included an admin-facing web app and a staff-facing Android mobile app.
One specific request from the client was that the mobile app should be accessible for their warehouse staff, which included individuals on the autism spectrum.
UI Design Recommendations for People with ASD
Reference
20 Guides Every Graphic Designer Should Read Before Designing for Autism (link)
User Interface for People with Autism Spectrum Disorders (link)
Designing autism-friendly websites (link)
Sensory Issues
Autistic people often have heightened sensory awareness, and so can find busy pages overwhelming.
Consistency
ensure that navigation mechanisms are consistent in appearance and behavior
ensure that the relative importance of different sections is indicated in a consistent way
Interaction
Use visual indicator for time-consuming actions
Have a help button
Communication
provide visual alternatives to textual material
avoid the use of metaphors, exaggeration, or ambiguous language
Give short instructions at every step
Here’s the color scheme used for the web app and the Android mobile app.
Color scheme for the web app
Color scheme for the mobile app
Information Architecture
I documented my initial research findings around product catalog structures used by industry-leading Inventory Management Systems.
Square Dashboard
Shopify
And this is the resulting high-level I/A for the Fulfillment Center System.
I/A for the FCS - Admin dashboard
Data Models
Here’s an overview of the back-end data model, which informed and guided the front-end experience design in many ways.
Customer Journey
This journey maps shows where the fulfillment center fits in the larger context of the customer’s experience.
Customer journey map
Use Cases
Requirements and specific use cases were identified. These diagrams illustrate some of the core warehouse workflows. Click to view images in full size.
Integrated workstation display uses cases
Wireframes
I spent weeks iterating on wireframes with the client for both web and mobile apps. Regular ux reviews and clear communication ensures expectations are managed and delivered on time and on budget.
Mobile wireframe example
Web wireframe example
Final Mobile and Web App Prototypes
Check out the final mobile and web app prototypes in action!
Final mobile app UI flow
Final web app UI mockup
If you have an android device, use this link to download the the mobile prototype and test it like a native app!