Case Study: Network Address Translation – Configuring NAT in a CLI Simulation
Project Overview
A technical learning, network simulation where users configure Dynamic NAT/PAT in a command-line interface. The focus was on usability testing, instructional clarity, and improving learner success in a high-stakes IT task.
Role: UX Researcher, Instructional Designer, Flow Architect
Tools: RouterSim, Java, JavaScript, Figma, Adobe Illustrator
Research & Goals
Learners were consistently failing a key CLI simulation in RouterSim related to NAT configuration. Our goal was to identify where learners struggled, measure behavior patterns during CLI input, and redesign the instructional flow to improve comprehension and task success.
The Instructional Scenario
“The senior network administrator at Gadget Research Company needs you to set up NAT on a network. Ensure that all internal users can access the Internet. You have a company of 20 users. EIGRP has been configured on internal routers.”
- Configure Dynamic NAT/PAT using subnet 40.0.0.16/28
- Create NAT pool GADGET-NAT-POOL
- Set up NAT access list and default routes
- Configure static routing on the ISP
UX & Instructional Design Process
- Conducted keystroke-level usability testing with 20 learners
- Identified pain points: incorrect ACLs, NAT overload syntax errors, missing routes
- Mapped complete task flow in Figma
- Redesigned instruction sequencing and added inline guidance
Analysis
Generated an assment report of the user's actions. Focused on common problem areas:
- Incorrect NAT access list statements
- Misconfigured NAT overload syntax
- Omitted default routes
Key Insights
| Insight | Impact |
|---|---|
| Users skipped or miswrote NAT access lists | NAT failed silently, leading to frustration |
| “Overload” keyword often omitted | No NAT translation, blocking Internet access |
| Inside/outside interface mislabeling | Broke task flow early, increasing abandon rates |
| Guided syntax helped learners succeed | Reduced trial-and-error input and frustration |
Outcomes
Iterative redesign and programming development produced the following results:
- 35% increase in task success rate
- 27% reduction in average completion time
- Reduced support requests due to instructional clarity
- UX improvements applied to other CLI modules
Reflection
This project reinforced the value of bridging UX research and instructional design. By analyzing real user behavior at a keystroke level, we uncovered not just what went wrong—but why. That led to targeted improvements in both content design and simulation behavior.
Case Study: Construction Claims Website – IRAM
Project Overview
A legal content system used by lawyers, contractors, and project managers needed modernization. I led the redesign and development of an intuitive, responsive web experience that made complex construction law topics easy to find and use.
Role: UX Designer, Developer, Content Strategist
Tools: HTML5, CSS3, JavaScript, Adobe XD, Balsamiq
Research & Goals
The original application was difficult to navigate, lacked search capabilities, and had inconsistent terminology. I interviewed key user groups to understand their needs and friction points, and identified major usability gaps.
Design Strategy
- Created a web-based, menu-driven experience with both side and top navigation to provide structured pathways through dense material
- Used accordion-based categories to reduce cognitive load and avoid overwhelming the user
- Designed interactive learning aids:
"For Example" and "Remember" icons launched contextual pop-ups for real-world scenarios and definitions - Integrated search functionality and glossaries for faster content retrieval and self-guided learning
Information Architecture & Design Process
- Created a new site map grouped by user role (Contractor, Lawyer, etc.)
- Introduced collapsible navigation and glossary-based architecture
- Developed icons and instructional callouts to reduce reading fatigue
- Used HTML/CSS/JavaScript for final responsive implementation
Key Insights
| Finding | Design Response |
|---|---|
| Users forgot key legal definitions | Added glossary popups and hover terms |
| Lawyers needed dual-context access | Built side-by-side tabs: Law vs. Examples |
| Scrolling fatigue | Implemented collapsible menus and sticky nav |
| Overwhelming text blocks | Chunked content into clear, skimmable cards |
Outcomes
- Reduced user effort and information-seeking time
- Improved learning engagement across user roles
- Established scalable content patterns for future modules
Reflection
This project showed how UX principles can simplify high-stakes legal information. Understanding domain-specific workflows helped me design a tool that was both functional and approachable.
Case Study: Meli's Grand Adventure – AI-Powered Publishing
Project Overview
I created and published a children’s storybook and companion coloring book using generative AI tools. This tested the potential of AI for storytelling, illustration, layout, and multi-format publishing.
Role: Product Designer, Illustrator (AI-powered), Publisher
Tools: ChatGPT, DALL·E, Figma, KDP (Amazon), Canva
Goals
- Create character-driven content using ChatGPT and DALL·E
- Design visuals that appeal to children ages 3–8
- Format and publish via Amazon KDP
- Build an integrated website and social presence for the character
Process
- Scripted the story with conversational AI tools
- Used prompt engineering to generate consistent illustrations
- Formatted layouts in Figma (storybook + coloring book)
- Managed publishing specs: bleed, resolution, color space, and layout
- Built Meli’s website and social media identity
Key UX Decisions
| Challenge | Solution |
|---|---|
| Maintaining character consistency | Used prompt stacking with reference constraints |
| Making child-friendly images | Emphasized white space, soft color palettes |
| Ensuring print quality | Used 300 DPI, vector-style, and line-only for coloring pages |
| Extending brand experience | Created a story-driven website and Facebook page |
Outcomes
- Published 2 polished, age-appropriate products on Amazon
- Tested a replicable model for AI-powered publishing
- Created a character brand with room for expansion
Reflection
This project merged creativity, storytelling, and UX strategy—powered by generative AI. It deepened my understanding of how emerging tools can support lean content production and user-centered design.
Generative AI
I create and illustrate unique children’s AI companions, eBooks and coloring books with Canva and Generative AI. I determine the best asset to use in the books by contrasting and comparing material derived from Photoshop (AI), Meta AI, ChatGPT and OpenArt.
Current Project
Meli's World (melworld.ai) is a bilingual, AI-powered companion platform designed to reimagine digital interaction for children ages 2–7+. At its core is Meli—an emotionally intelligent digital pet who offers empathetic, developmentally tailored support for young pet lovers in both English and Spanish.
Core Features & Technical Architecture:
- Age-Adaptive Interface: Dynamic font scaling and interface complexity that automatically adjusts across developmental tiers (ages 2–3, 4–6, 7+)
- Real-Time Bilingual Support: Seamless language toggling with age-appropriate vocabulary and culturally sensitive responses
- Multimodal Engagement: Voice input, sound effects, animated feedback, and interactive UI elements for deeper immersion
- Pet Management System: Tabbed interface for documenting multiple pets, featuring voice-to-text input and contextual feedback
- Educational Content Engine: Structured modules on pet care, "What If" scenarios, and dynamic storytelling tailored to age and interest
Development Phases:
Phase 1 (Prototype): Currently completing the core architecture with responsive modal-based UI, multilingual content handling, dynamic scaling by age, and simulated emotional responses. The system adapts visual, textual, and interaction patterns based on developmental stage while maintaining an emotionally supportive tone.
Phase 2 (Planned): Integration of LLM-based emotional intelligence, interactive story generation, personalized learning algorithms, and enhanced multimodal features including real-time illustrations and adaptive audio experiences.
This platform demonstrates advanced front-end development and accessibility-first design (WCAG/Section 508), providing a nurturing digital space that grows with the child—encouraging empathy, learning, and responsible pet care.
Amazon Publications
eBook - Meli's Grand Adventure
Paperback - Meli's Grand Adventure
Paperback - Meli's Grand Adventure Coloring Book
Children's Paperback Book - Meli's Grand Adventure
The following pages are excerpts from the paperback book . . .
Children's Coloring Book - Meli's Grand Adventure
I have also created a children's coloring book for children ages 3-8 years old (soon to be published). It is based on the eBook called "Meli's Grand Adventure". It is titled "Meli's Grand Adventure: Coloring Book". The following pages are excerpts from the book . . .
Click Here to View Meli's Website
UX/Instructional Writing Samples
The following are UX/Instructional writing samples that are derived from user guides, websites, and software applications that I was involved in their creation. Click on the corresponding button next to the title to view the related pdf file.
Mobile Apps
Colorado Avalanche Dashboards
The Colorado Avalanche were Stanley Cup champions in the 2021-2022 season. To commemorate their 2021-2022 season, dashboards were created that detail their month-to-month, regular season, win record, from October 2021 to April 2022. This mobile app was created with Figma . . . (Click arrows 
to expand window)
Wedding Photographer
I created a high fidelity mobile app design based on the work of a professional photographer. I first wanted to provide striking images that could be reached from the main screen. I inserted a small visual guide, informing users that they could scroll vertically down the screen. I also wanted to provide vital information about the business, such as pricing. I created a section on valuable FAQs, which displays a scrollable menu and by simply clicking on a question, a response to that specific FAQ would display on the right side of the screen. This prototype was created with Figma . . . (Click arrows to expand window)
This is a mobile app for a company that provides over 200 pre-employment tests. This app is easy to use via scrollable menus. This was created with Figma . . . (Click arrows to expand window)
Resource Associates (https://www.resourceassociates.com) offers over 200 pre-employment tests available on demand on their web site. Users can obtain a rich amount of information to aid in the selection of a test. I designed the following wireframe that forms the basis of a mobile app that I developed.
The wireframe prototype was developed with Axure RP.
Vendor Onboarding
At XYZ.com, the original manner of vendor onboarding was where employees would manually enter information into the system, from data sheets. This process was bogged down by duplication and vendor errors. This prototype provides a quicker process for determining which documents that vendors should obtain and fill out. After each question is answered (Yes or No), the next question is automatically displayed, based on the vendor's choice.
This prototype was created with Figma . . . (Click arrows to expand window)
Visually, the solution is ostensibly simple, however, the app had to account for all possible vendor responses. You can see that in the image below (lines and arrows) with a connection map.
I have been touched by the efforts of groups throughout the world that tirelessly work toward saving our oceans and planet, and ameliorating our climate crises. I wanted to find a brief but comprehensive way present to visuals, related text, and links to organizations throughout the world. Therefore, I created a prototype with Figma . . . (Click arrows to expand window)
Web Sites
Meli's Grand Adventure
This web site is based on a paperback book titled "Meli's Grand Adventure". It is about Meli, the silky terrier, on her heartwarming journey to a new home from Pennsylania to Colorado.
IRAM
This web site is based on a desktop application created years earlier. There was a need to convert this desktop application into a web site using traditional front end tools. Without this web site there would be no way to explore and retreive digital information on the subject matter. This site provides a means by which construction owners and contractors can easily access all of the information required to identify, recognize, analyze and manage potential construction contract claim and dispute situations. The site was constructed using HTML5, CSS3, and JavaScript. Glossaries are provided. A full web site search function is available.
Use the username (esteem) and password (456) to access the IRAM website.
Water Research Foundation
The Water Research Foundation (WRF) is the leading research organization advancing the science of all water to meet the evolving needs of its subscribers and the water sector. This site was constructed using WordPress.
RouterSim Web Site
I created and have maintained the RouterSim web site from its inception. This site was recently revamped with Bootstrap and JavaScript.
My Portfolio
I recently revised my portfolio website with Bootstrap, HTML5, CSS3, JavaScript, and JQuery. The original site was menu driven only and displayed content on several pages. Users can navigate the current site by using the menu on the right side of the screen or vertically scrolling down the page with a mouse.
The current site presents several new features:
Parallax pages
Pop-ups
Portfolios that link to InVision
Animation of text and images with the use of wow.js
Page space is conserved by presenting 12 UX research topics in the same page location by using JQuery
As before, the site's responsive design allows all devices (i.e., smart phone, tablet, tablet horizontal, or desktop view) to properly display page elements
Western Pacific Insurance
This revamped web site was modified with Bootstrap 4.0.
The responsive design allows all devices (i.e., smart phone, tablet, tablet horizontal, or desktop view) to properly display page elements.
The client wanted a carousal of pictures, revolving at the top of the landing page.
The client wanted a concise site with few pages.
Several topics are presented on the Products page and users can vertically scroll down the page.
Users can also click on sub-menu items and the use of anchors has the program vertically scrolling to the desired position on the page.
Design Thinking (HCD)
With the aspect of creating a software application that allows users to interact and learn with a simulator (virtual network), I wanted to develop a meaningful and systematic approach to solving problems. I wanted to use a framework that was very user-oriented and promoted user empathy. Two other requirements were a non-linear process that allows for multiple iterations in examining issues and problems. Design Thinking and human-centered design were chosen as the methodologies that would be used. They were employed in the design and development of two dozen RouterSim products. Both methods share several similarities:
- Empathy
- Prioritizing the needs and experiences of the user or customer
- Iterative cycles of prototyping, testing, and refining ideas and solutions based on feedback
Several employees were invited to the Design Thinking meetings:
- Potential Users
- Java Developers
- Designers
- Technical Support
- Sales & Marketing
The following, typical areas were dealt with in the Design Thinking processes.
The first part of Design Thinking involved conducting ethnographic research. I observed actual users and examined learning methods that they currently employed in learning Cisco material. I was careful to not prematurely make assumptions and draw conclusions. Journey maps and empathy maps were used in tracking the interaction that users had with their learning environment. It helped identify needs that users were often unable to articulate. A subject matter expert was used so that their input could also be used to identify user needs. It was observed that users:
- Could read one or more books. A user can view images in books but are extremely limited in being able to have hands-on experiences and work with different network configurations.
- Attend a seminar. But users can only learn through hearing and seeing visual presentations. No ability to have hands-on experiences.
- Purchase routers and switches. Considering that you have to purchase several devices in order to create a modest network, this is financially unfeasible for most.
This was frustrating for users and limited learning experiences and the development of cognitive flexibility. I informally met with small groups who expressed their feelings and we discussed issues. They were encouraged to "storytell" their experiences. I used active listening and empathy while interacting with people.
Define
Card sorting was performed to separate and categorize either problems discussed with users or issues that might be encountered in the development and use of a RouterSim product. Sticky notes were put on a large board and continuously added to and/or rearranged if necessary. The top 5 areas (pain points) of interest were:
- Interface Design and Development
- Building Networks
- Configuring and Testing Networks
- Information Architecture
- Assessing User Skills
The problem statement is "how does the interface look like that is pleasing to the eye, intutive and functional?"
The problem statement is "are there specific steps in building a network (i.e., click on a device button to display the device on the Network Visualizr screen, then connect devices)?"
The problem statement is "how do you use the step-by-step online documentation in conjunction to configuring each device on the screen?"
The problem statement is "Based on suggested features, what is the flow of the program from one screen to another, that is intuitive for user?"
The problem statement is "after going through step-by-step instruction, how are user's problem-solving skills assessed?"
Based on the three levels of software programs that RouterSim wanted to create, plus, the user observation and gathered data, three personas were created. This referred to applications for Cisco CCENT, CCNA, and CCNP.
Ideation
A problem statement was the starting point in visualizing possible solutions. Brainstorming was employed to generate ideas, no matter if they were good or bad. Free association was supported so that ideas could flow without judgement or interruption. Card sorting and sticky notes on a board was used to categorize ideas. The top five or six ideas were used in the creation of prototypes.
Features
There was a special place in this Design Thinking process, the creation of product features. This was an integral process that influenced the success and acceptance of products. I brainstormed and identified possible areas of development:
- Interfaces
- Architectural Flow
- Special User-Related Functionality
- Graphical Objects
- Interaction With A Simulated Network
- Configuring A Network
Storyboard
In examining possible solutions, step-by-step storyboards were created so that the program workflow(s) would be easier to conceptualized and visualized. Information was taken from sticky notes on a white board. After viewing storyboard(s) It was common for Design Thinking participants to either add and/or remove items from the white board. Essentially, this process allowed us to flush out the storyboard(s) into a smoother and more understandable journey.
User Journey Map
In working with current and future users of Cisco learning material it was necessary to create user journey maps. In conjunction with the creation of storyboards, and pre-prototyping phases, the creation of user journey maps allowed me to more closely correlate feelings, thoughts, and potential user interaction with existing prototypes or future ones.
Prototype
One purpose of one or more prototypes is the generation of new ideas. Depending on how many items and/or problems were flushed out, storyboards, mockups, low-fidelity protypes, and high-fidelity were created. Users and teammates would continually provide feedback. Potential customers were first shown paper prototypes. This was based on using sticky notes being reviewed and modified. Prototypes provided a way to see if there were gaps in team thinking and/or if something was missed.
Testing
Each potential product was divided into several content areas that was explored within a lean process that provided a minimal viable product (MVP). A minimal amount of the interface, features, and functionality were created and tested by users. There were four main areas that were tested:
- Buttons, graphics, and devices on the Net Visualizer screen
- Information architecture - Does the program and the flow of the application perform as expected?
- Learning - Is the material easy to learn, understand, and allow easy and intutive, user interaction?
- User assessment - Does the program accurately assess user interaction with the MVP?
Iteration
Each of the five main areas of Design Thinking was open to iteration so that prior areas could be revisited when new ideas or insights were generated. A non-linear format was supported so that any part of the design process could re-examined. For example, prior assumptions were re-visited to validate the existence of sufficient and valid evidence. Through iteration, it became clearer what part(s) would be examined (or re-examined) for increased clarity and usefulness.
Through iteration, it became clearer what part(s) would be examined (or re-examined) for increased clarity aand usefulness.
WCAG - UX/UI Best Practices Guide
While employed at an earlier position, I was asked to create a WCAG - UX/UI best practices guide. While not being comprehensive in the inclusion of all topics, it provides a general guide to WCAG readibility issues and other user-related interaction.
UX Research - Methods and Strategies
When I co-founded RouterSim we had a great deal of work that was needed to substantiate our hypotheses that network simulators would be a viable alternative to real Cisco routers and switches. The following UX research strategies were utilized in gathering user information. Click on any of the following methods and strategies to learn how they were used in UX research.
Concept Testing
Concept testing is a key aspect of the human-centered design process and it was utilized by RouterSim. When the initial idea of having a router simulator was spawned, there was no way to intuitively know if such a concept would be accepted. There were none in existent. I conducted ethnograpic studies and observed actual users and examined learning methods that they currently employed in learning Cisco material. I was careful to not prematurely make assumptions and draw conclusions.
I created quantitative surveys and presented them to people in the IT field. People were asked a series of questions about the effort and cost of preparing for a Cisco certification exam. This not only included questions about the use of books but the actual purchase of routers and switches; A very expensive proposition. Feedback from potential users indicated that a low cost simulator would be a boon to the industry.
Competitor Analysis
When RouterSim was created, no other company had a network simulator for people in school. Therefore, there was no extensive competitor analysis completed. However, Cisco textbooks were available which provided step-by-step instruction. In order to practice you would have to have access to real equipment which is potentially expensive.
At a later date another company started producing a simulator and we had to periodically conduct competitor analysis on their products. Eventually Cisco produced a simulator and we again needed to periodically conduct competitor analysis. RouterSim interfaces were developed based on our theoretical approach and deficiencies that were noted in competitor products.
Surveys
When new products were planned, I gathered a great deal of information about potential users. I wanted to create and present relevant information based on the background, knowledge level, and goals of the user. Another key factor was that a user may be studying for a specific Cisco certification exam and a specific technical level.
I created surveys based on the 5-point Likert Scale. A Likert scale is a psychometric scale commonly involved in research that employs questionnaires. It is the most widely used approach to scaling responses in survey research.
Contextual Inquiry
Observation was recorded at various points of discovery and usability. I observed how people studied and prepared for Cisco exams by using books and real equipment. I conducted remote moderated and unmoderated research. This was usually one-on-one interaction in which I watched the user in the course of the user's normal study activities and discussed those activities with the user.
I recorded "pain points", points of motivated behavior, and times of frustration. When presented with prototypes, people would be video taped.
User Interviews
I interviewed people that were studying for their Cisco certification exam or had recently taken it. I wanted to investigate their experiences and especially their feelings. I used a survey with the Likert scale plus an open ended one. The following are common themes reported:
- Understanding complex topics
- Feelings of being overwhelmed was a prevalent response
- Time management – spending too much time on a question during a prep exam or actual exam
- Motivation – pacing oneself with other activities in your life to in order to schedule time dedicated toward studying
- Money – students in poorer countries cannot afford books and/or equipment
- More Money – Traveling to Cisco test center + Cisco certification exams is prohibitive to some students
I did a deeper dive in understanding how well users could deal with networking issues. Ie wanted to examine the speed at which a user could successfully accomplish tasks. I constructed assessments that were drawn from current literature of the Cisco areas of CCENT, CCNA, and CCNP. Users were presented with topics that had increasing levels of complexity and possible responses (i.e., single multiple-choice response, more than one correct answer, etc.). I examined the data and saw three main see clusters of information highly correlated with specific levels of Cisco-related accomplishment and/or expertise. This allowed me to establish three baselines for the creation of RouterSim software.
RITE Testing
I have worked in a Kanban environment and because of the natue of the products that have been developed a waterfall methodoligy would not be compatible with the development tasks. I have worked with users in continuous iterate, usability tasks.
This is closely aligned with RITE (rapid iterative testing and evaluation). I see this approach as more focused testing which is a usabity testing method that usually involves a small number of participants. The key premise is to identify not just usability problems, but also to react quickly to identified issues and test new solutions. There could be multiple RITE episodes within the broader concept of Design Thinking testing. I went through several iterations with think-aloud exercises.
Personas
I examined common factors among potential users:
- Age and gender
- Education level
- Immediate professional goals for the near future
- Current occupation
- Knowledge of Cisco related networking tasks
- How a user might interact with RouterSim products
- How additional knowledge of networking would be used
I did a deep dive into understanding how well users could deal with networking issues. We wanted to examine the speed at which a user could successfully accomplish tasks. I constructed assessments that were drawn from current literature of the Cisco areas of CCENT, CCNA, and CCNP. Users were presented with topics that had increasing levels of complexity and possible responses (i.e., single multiple-choice response, more than one correct answer, etc.). I examined the data and saw three main clusters of information that highly correlated with specific levels of Cisco-related accomplishment and/or expertise. This allowed us to establish three baselines for the creation of RouterSim software.
User Journey Maps
Based on personas that were established, customer journey maps were created. These were end-to-end encapsulations of what a customer (user) thought, felt, and behaved through “touchpoints” in their journey. Graham (2007) stated that “touchpoints are the key building blocks of experiences. He further defines episodes, experience and end-to-end experience on the basis of touchpoint.
- "Episodes are groups of touchpoints"
- "Experience is all the individual touchpoints or episodes that make up a purposeful activity by a customer"
- "End-to-end experience refers to longer experiences made up of a number of episodes”
Stakeholder Interviews
There were four stakeholders that I interacted with and interviewed. They played key parts in the growth and success of RouterSim. Two were resellers and had specific commercial needs in branding and selling RouterSim software.
Todd L. - Cisco Subject Matter Expert
Neil E. - Publisher at Sybex and John Wiley and Sons
John L. - Professor of Psychology
Takashi S. - President of Logic Vein
Analytics
Initially I needed to find what aspects of presenting a router and switch simulator to people in the IT field would surface in studying needs. I needed to find out what users actually wanted. Qualitative and quantitative research was conducted. Qualitative research included:
- Concept testing
- Focus groups
- Customer feedback
- Ethnographic field study
Quantitative research that I conducted included:
- Surveys (usually using a Likert scale)
- Stakeholder interviews
- A/B testing
- Multivariate testing
- Prototyping
- User assessment
The data was also translated into graphic charts and examined. This greatly assisted in the creation of multiple personas which in turn guided us in setting levels of complexity in the step-by-step labs.
Heuristic Analysis
I tested the usability of software and documentation. I developed different user personas based on the prior knowledge of users and future goals. Some were new to the world of Cisco hardware and configurations, while others had been working in the IT field for several years. Users were timed on how long it took them to complete tasks using the software. Written and verbal feedback was recorded. I conducted remote moderated and unmoderated research. I re-examined and modified personas, where needed, for each of the over two dozen products that were created.
Card Sorting
Mental models of users traversing the navigation options of the software were examined with this technique. The layout and presentation of documentation was also examined with this method. Open and closed sorting were used in looking at clustered data. Information was placed on "sticky notes" and a white board. After viewing storyboard(s), it was common for Design Thinking participants to either add and/or remove items from the white board. Essentially, this process allowed me to flush out the storyboard(s) into a smoother and more understandable journey.
A/B Testing
I tested user interest in and engagement with RouterSim software by examining variations of attributes in an A/B format. Screen attributes were examined such as color foreground and background, font style or size and device size. Users were randomly divided into two groups, one a control group and the other were usually presented with a single variant.
Audio responses of users were recorded and data from short questionnaires were garnered. Attitudinal responses to different devices (graphical representations of routers and switches) were examined by the use of a Likert Scale. I conducted remote unmoderated research that automatically timed how long it took users to accomplish tasks.
Examples . . .
All RouterSim products had one thing in common, a Network Visualizer screen where users could build and test virtual networks. At the top of the screen were buttons on a button panel. I had to create icons that best represented actions associated with button. A/B testing testing was utilized to compare several variations of each button. Users were asked to provide feedback as to the intended action of each button after looking at the button icon. This allowed me to closely fashion each button to it's associated action.
Flow Chart
Toward the end of the UX research, based on UI specifications I created a flow chart for the Network Visualizer program. It was important to capture every screen asset (buttons, tabs, link to screens, etc.) so that programmers had a clear idea when they started creating Java code.
Persona
Based on UX research it was decided that three types of eLearning products would be initially developed. Each one would be more difficult and sophisticated. Three distinct personas were developed. The categories for each one were:
- General Biography
- Goals
- Motivations
- Frustrations
- Weekly Activities
- Technical Usage
User Journey Map
In working with current and future users of Cisco learning material it was necessary to create user journey maps. It allowed RouterSim to more closely match user experiences and potential success with future products. The following user journey involved a person preparing for the Cisco CCNA Cetification exam. They used a prototype of Routersim's product, CCNA Network Visualizer. At various points in the program I captured a user's "Doing", "Thinking", and Emotions." Of interest is the clear report of positive and negative emotions.
Interaction with Stakeholders
There were four stakeholders that I interacted with and interviewed. They played key parts in the growth and success of RouterSim. Two were resellers and had specific commercial needs in branding and selling RouterSim software.
Todd L.
Todd L. was a partner at RouterSim and was the subject matter expert in the development of simulation-based training software. He has published over 80 books on IT topics through Sybex, a division of John Wiley and Sons (San Francisco, CA). Todd L. supplied the hardware (routers and switches) to RouterSim, plus more importantly, offered his knowledge of the IT field and the potential users of RouterSim software. He played an integral part in assisting in the development of user personas. I used active listening in trying to assuage Todd’s feelings, plus I was a liaison between him and the programmers and used the same techniques in bolstering the programmers.
Neil E.
Neil E. was vice president and publisher at Sybex and John Wiley and Sons (San Francisco). Because of his relationship with Todd L., he was introduced to the possibility of branding RouterSim software and selling it in book stores and eventually over the Internet. After several meetings with him by Todd L. and me, a positive relationship was established. I served as the liaison between the two companies and worked with them in developing their branded software and user manuals. I worked with Sybex employees in creating all user documentation. In the first year that Sybex offered the software on Amazon, sales reached a ranking of third..
John L.
John L. was a professor in the department of psychology at the University of Tennessee. He is currently president of Resource Associates, Inc. He was a partner at RouterSim for some time. He specializes in testing, research methods, psychometrics, and human resources management and authored over 100 scholarly articles. I met John years ago when I attended the University of Tennessee. RouterSim developed several personas of potential users of our software and John L. was an invaluable asset in this effort. He was the subject matter expert in testing and research methods.
Takashi S.
Takashi S. resides in Japan. He is President of Logic Vein. He became aware of RouterSim software and contacted us. He wanted to be an exclusive reseller in Japan. After several email exchanges we met with him in San Francisco to discuss and establish a relationship. The relationship was very positive but challenging. They wanted to brand RouterSim software and translate it into their language. They had to translate our documentation into Japanese, plus, work with us on a constant basis to integrate Japanese words, phrases, and symbols into RouterSim software. One thing I discovered was how precise they were while testing our software. That was a personal challenge for me.
IRAM Site Map (Created with Figma and Autoflow plugin)
This web site provides a means by which construction owners and contractors can easily access
all of the information required to identify, recognize, analyze and manage potential construction
claim and dispute situations.
During the conceptualization and research phases for new products I used my instructional design skills. For each product that I have worked on, I performed needs assessment, gap and tasks analysis. I established user personas, learner profile(s), and learning objectives. It has always been imperative to interact with potential users in an iterative way (Design Thinking) to make sure that the planned application would be engaging, meaningful, and relevant to their professional goals.
With the aspect of creating a software application that allows users to interact and learn with a simulator (virtual network), I wanted to develop a meaningful and systematic approach to solving problems. I wanted to use a framework that was very user-oriented and promoted user empathy. Two other requirements were a non-linear process that allows for multiple iterations in examining issues and problems. Design Thinking and human-centered design were chosen as the methodologies that would be used. They were employed in the design and development of two dozen RouterSim products. Both methods share several similarities:
- Empathy
- Prioritizing the needs and experiences of the user or customer
- Iterative cycles of prototyping, testing, and refining ideas and solutions based on feedback
I used the well-known ADDIE and Design Thinking models. I drew from the works of Rand Spiro (cognitive flexibility theory), Roger Schank (problem-based scenarios), and the Don Kirkpatrick model of learning.
Click Here to View ADDIE ExampleClick Here to View Kirkpatrick Example
Design Systems
The following design systems were created for the look and feel of the RouterSim website and products. Click on the corresponding button next to the title to view the related pdf file.
About Me
I have been the lead in combining theoretical and conceptual aspects of the design and development of over two dozen eLearning applications. I am well versed in applying educational and learning theories and concepts into real-life learning applications. Because of my multidisciplinary background from educational and professional experiences, I offer unique perspectives in the design and development of eLearning applications. I have a B.A. in psychology, an M.A. in educational psychology, and an M. A. in instructional design and technology. I have a unique hybrid skillset that allows me to perform instructional design tasks and/or UX/UI responsilities. I am very comfortable using technology to create deliverables.
Products are developed in a user-centered, highly interactive environment where there is a sense of urgency in bringing about the best user experience possible. I have designed and created software-based assessment so that users can learn and increase their problem-based skills.
- User Experience & Product Design – Managed and lead end-to-end UI and UX processes from research to execution
- User Research & Testing – Conducting usability testing, heuristic evaluations, and A/B testing to improve engagement
- Wireframing & Prototyping – Creating interactive prototypes and high-fidelity designs with Figma, Adobe XD, and Axure RP
- AI-Driven UX/UI Enhancements – Incorporating Generative AI (DALL·E 3, Meta AI, Photoshop AI) into design workflows
- Management – Led UX strategy and product design for 24+ digital products, overseeing research, design systems, and user testing
- Accessibility & Inclusive Design – Ensuring WCAG 2.2 & 508 compliance to improve usability for all users
- Design Thinking & Agile Development - Iterating on designs based on data insights
- Cross-Functional Collaboration – Working alongside product managers, developers, and stakeholders to drive innovation
- Front-End Understanding – Knowledge of HTML5, CSS3, JavaScript, and responsive frameworks
While working at RouterSim I was instrumental in the conceptualization, design, development, and delivery of over two dozen eLearning applications for the IT field. I am passionate about learning and have produced user-centric applications that are engaging and easy to use. Psychological and learning principles have been employed in all phases of product design and development.
UX/UI ResearchI managed and lead a team in UX/UI research. I determined specific user needs by conducting extensive research with concept testing, competitor analysis, surveys (Likert Scale), and user interviews. Stakeholder interviews were given in order to verify the direction of development and sales channels. Based on business requirements, meeting client needs by conducting heuristic analysis, and creating personas, user journeys, storyboards, A/B testing, card sorting, flow charts, and mockups.
UX/UI DesignBased on business requirements, I created storyboards, wireframes, journey maps, UX flow charts, mockups and clickable prototypes, meeting client needs. I created screens and graphical assets for over two dozen products and user manuals. I created new and redesigned existing web sites from the traditional HTML/CSS format to responsive sites developed with Bootstrap.
Publications- Meli's Grand Adventure (Children’s Book and Coloring Book) – Published on Amazon (2024)
- Designed illustrations and layout using Generative AI and Figma
- Aligned illustrations and layout with KDP and Amazon publishing standards, ensuring seamless publication and visibility
- (CD-ROM), Sybex and Wiley and Sons (publishers) (January 2014)
- CCNA Routing and Switching Virtual Lab, Titanium Edition 4.0 (CD-ROM), Sybex and Wiley and Sons (publishers) (November 2013)
- CCENT Virtual Lab 2.0: Exam 100-101 (ICND1) (CD-ROM), Sybex and Wiley and Sons (publishers) (November 2013)
- CCNA Virtual Lab, Titanium Edition 3.0 (CD-ROM), Sybex and Wiley and Sons (publishers) (October 2012)
- CCNA Virtual Lab, CCENT 1.0 (CD-ROM), Sybex and Wiley and Sons (publishers) (October 2012)
- Network+ Study Guide: Exam N10-003, Deluxe, 2nd Edition (Hardcover), Sybex (publishers) (2011)
- CCNA Virtual Lab, Titanium Edition 2.0 (CD-ROM), Sybex and Wiley and Sons (publishers) (2008)