Carve Your Path - User Interface Design

This interactive app for middle school age children allows them to see the variety of jobs available to them, as well as how their education affects their potential career options.

 
Carve Your Path - User Interface Design
Developed for the New Mexico Department of Education, this interactive tool introduces 6th, 7th, and 8th graders to careers and job opportunities that they may not have realized were available. Users can play with an interactive graph to see exactly how their level of education affects the number of jobs available to them, as well as get more detailed information about any of the jobs included in the database.

The user interface of this project went through several changes as we worked from the initial concept to completion. After much iteration and user testing, the final product we ended up with was very, very different from the original design.
Originally, we planned to go with a build-your-own story theme, in keeping with the theme of the "Carve Your Path" project. After performing initial user tests however, we came to the conclusion that the layout we had chosen was simply not working.
Above, you can see the initial layout for the storybook design. The story would reveal itself sentence by sentence, and users could click on blanks to fill them in and progress the story.
This approach had several problems. We quickly found that only allowing one selection per choice was far too limiting. The categories we were given were very specific and many combinations of choices resulted in no jobs available. More importantly, the app was not fun to use. Testers were frequently bored, and it was a clunky interface to navigate through.
We decided to scrap the original design and try something new. The next iteration took a paneled approach, with collapsible sections that allowed users to quickly make changes to their choices and see how that affected potential jobs. As you can see above, we also allowed the selection of multiple areas of interest, with each one completing a section of the background image behind the user's avatar.
One of the bigger additions to the UI was an interactive graph that allowed users to change their level of education on the fly, and see how many jobs were available at different salary ranges.
Users could now also see how many jobs were available to them at the top of the app, in addition to being able to see a list of all available jobs as opposed to one random job at a time in the previous version. With this new expanded framework laid out, we set about finalizing the UI and art assets.
The interests page was given outlines that could be filled in to add visual interest to the page even when nothing was selected. We made the number of jobs available at the top of the screen easier to read.
The interactive graph was given more precise information - users could now see exactly how many jobs were in what specific salary ranges. The number of educational options were simplified as well, as different degree types such as post-baccalaureate and masters degrees were combined into single categories.
The final change proved to be one of the testers' favorites. The list of jobs was replaced by a job wheel that could be spun for a random job. If users wanted a more directed approach, a scroll bar and the ability to sort alphabetically, by salary, and by educational requirements were added.

This project came a long way from the initial vision and changed a lot from the intial concept. By the end of the project, we had something that was fun to use and conveyed more information than we thought possible with the original version.
Back to Top