The Real World
MY ROLE
UX/UI design
Client outreach
TOOLS
Adobe XD
TYPE
Interactive Web App Prototype
Web App
DATE COMPLETED
In progress
The Backstory
I am the lead UX/UI designer for “The Real World”, a collaboration with the UConn DX Lab and UConn’s College of Agriculture, Health and Natural Resources (CAHNR). I worked with an agile development team to transform CAHNR’s in-person learning simulation into a digital experience. The Real World is a web app that uses situational gameplay to teach high school college students about financial literacy and help them understand how to live within their means.
The Challenge
The client approached us with a pre-determined game curriculum, which included eight levels and lengthy spoken scripts at the beginning of each level. Creating the level design meant distilling their fifty page curriculum into logical, understandable steps in the user interface. Another challenge was creating a universal level design that fit the diverse content of the eight levels— from a user experience standpoint, this was important for usability and from a development standpoint, this would make my team’s work a lot easier and quicker.
The Outcome
In our first design sprint, I created user-flows for each level and created a universal design system that allowed for different types of content.
After reviewing CAHNR’s curriculum several times to fully understand the game’s content, I saw that the scripts did not provide enough context for the player during the game. Instead of asking the client to abandon the script entirely, I re-imagined how a script could be used to enhance the user’s understanding of gameplay. I showed the clients two interactive prototypes— one with their script at the beginning of the level, and one with my re-imagined script interspersed throughout the level. The decision was unanimous that the interspersed script provided more context and value to the user.
Our next design sprint includes building out one level and user testing with students.
User Flow
Two of the eight game levels translated from CAHNR’s game curriculum to a user flow.
These two levels are “housing” & “transportation”.
Wireframes
I created universal design components that fit the content for each of the eight levels.
High Fidelity Designs
As the user progresses completes each level, the colors will shift to create differentiation between the levels and a clear “start” to each level.
Design
I drew inspiration from images our client used in their documentation and created new identification systems for each level that utilize a mix of colors and various icons, being careful to make sure contrast ratios meet at least WCAG AA guidelines.
