Project Overview
Warehouse staff were struggling with an AS/400 terminal system from the 1980s. Through user-centered design, I transformed this outdated interface into a modern and efficient solution.
*Projected impact based on observed user pain points and design improvements
The Challenge
I wanted to redesign an AS/400 terminal screen that warehouse associates use for creating purchase orders. The current system is text-based and very difficult to use. Users need extensive training and still make costly errors because the interface is not intuitive.
For this case study, I focused on the most problematic screen and reimagined it from the ground up.
The original AS/400 terminal interface
- Low Productivity: Staff spending 40% more time on basic tasks
- High Error Rate: Manual data entry led to frequent mistakes
- Training Burden: New employees needed weeks to become proficient
Understanding the Problem
Who are the Users?
The users are warehouse associates who create purchase orders daily alongside inventory management and order fulfillment. They need to work quickly and accurately but the current system slows them down with complex commands and constant manual referencing.
What are the Main Issues?
Too much cognitive load
The interface feels cluttered with dense data and unclear hierarchy. Users rely on memorizing function keys and decoding abbreviations.
Inefficient workflow
Users must exit the screen and navigate multiple menus to find vendor details, then manually re-enter data in a cluttered table with minimal guidance.
Frequent errors with poor feedback
Frequent and unclear error messages leave users unsure of what went wrong. Required fields aren't marked, and outdated fields add to the confusion.
My Design Process
Initial Analysis
Studied the existing AS/400 screens, documented pain points, and mapped the current user workflow end-to-end.
Setting Design Goals
Defined clear objectives: reduce cognitive load, minimize errors, and create an intuitive interface that requires zero training.
Information Architecture
Reorganized the data hierarchy, grouped related fields, and eliminated unnecessary information from the interface.
User Flow Mapping
Created detailed user flows for the purchase order creation process, identifying decision points and potential error states.
Visual Interface Design
Designed the modern UI in Figma with clear typography, color-coded status indicators, and responsive layouts.
User flow for the redesigned purchase order process
Initial analysis, design goals, and information architecture
Visual interface design — dark theme, typography, and color system
The Solution
I created a clean, modern web interface that replaces the terminal experience while preserving all functionality. The design focuses on reducing cognitive load and guiding users through the purchase order workflow.
Before & after comparison, annotated interface improvements, and redesigned item entry
Key Interface Improvements
- Clear visual hierarchy — Information organized with proper spacing, grouping, and typography to reduce cognitive load
- Inline vendor lookup — Users can search and select vendors without leaving the screen
- Smart form validation — Required fields are clearly marked, with real-time validation and helpful error messages
- Status indicators — Color-coded badges show order status at a glance
- Guided item entry — Redesigned the item table with autocomplete, clear labels, and inline editing
.png)
The redesigned purchase order screen with full annotation detail
Key Learnings & Impact
Key Learnings
This project helped me understand how to translate complex legacy system requirements into a modern, user-friendly interface. The main learning was the importance of information hierarchy and providing clear, immediate feedback to users.
Design Philosophy
The original AS/400 interface was designed based on technical constraints, not user needs. Today we have better design tools and knowledge, so there is no reason to continue creating difficult interfaces.
Next Steps
- Complete the design for "Browse Catalog" and "Import Items" features
- Explore intelligent order summary that highlights potential errors
- Add suggestions for frequently ordered items based on past orders