UX Design, Research, and Deliverables

Creating a full-stack UX process for freelance clients


UX Deliverables

UX deliverables banner.

This page is designed as a summary of various UX deliverables so you can see the "look and feel", taken from various projects described elsewhere on this site.

Information Architecture

Some comparative IA diagrams for websites selling educational toys. Developed as a compliment to a card-sorting study.

UX in XR image

Melissa and Doug

Information Architecture for the Melissa and Doug website (click for enlargement).

UX in XR image

Mattel

Information architecture for Mattel's primary website (click for enlargement).

UX in XR image

Educational Insights

Information architecture for the Educational Insights Website (click for enlargement).


Research and User Stories

A user story for a persona working within an avatar-based VR app (see Language Learning App)

interaction dialog between user and avatar

A conversational diagram for a challenge between two students within a social app (see Language Learning App)

interation dialogue during student duel

Interaction Diagrams and Information Architecture

Rebuild a site for client Crayon Collection (see WordPress Work

WordPress Information Architecture diagram for crayon collection

After validating the information architecture, I redesigned their menu system.

WordPress menu redesign, Information Architecture for crayon collection

High resolution interaction diagrams created for Language Learning App (see LLA UX Development

high-resolution interaction diagram, initial onboarding high-resolution interaction, parental onboarding

Wireframes and Wireflows

Medium-Resolution wireflow for Language Learning App (see Language Learning App)

medium resolution onboarding using low-resolution wireflow

High resolution was a standard Interaction Design Flowchart, incorporating conditional branches within onboarding for all users. Each step in the interaction was matched by number to the conversational design model created earlier.

high-resolution interaction diagram, initial onboarding high-resolution interaction, parental onboarding

Wireframes for XPO Tulsa (see WordPress Work

xpo tulsa wireframes for revised wordpress theme

(Click for enlarged version)


Prototype Screens

"Grey box" screen samples from interactive Virtual Reality Prototype (created with ProtoPie) for an ESL app (see Language Learning App)

three sample screens showing onboarding in the LLA app. Select language, select user type, select avatar

Interactive prototype screens for onboarding. Left: select language, Center: select user type, Right: select Avatar.

three sample screens from the prototype showing basic level 1 questions.

Interactive prototype screens for onboarding. The prototype challenges students with basic (Level 1) questions in order to help them learn the interface. Questions are functional and scored by the prototype.

prototype screens showing aspects of the virtual world simulation, viewable in 3d via 'magic window' movement of the users's smartphone. Left: check voice commands in vitual world, Center: Choose a virtual world, Right: see other students and challenges in the virtual world

Functional Prototypes and Apps


Short video demonstrating the WebVR application prototype (see Legend VR app).


Short video demonstrating WebVR-Mini app (see GitHub for code).


Related pages: VR Real Estate App | Language Learning App | More Projects