Summary

Understanding the Need

The need for a unified design system came while looking at the registration modal of the website. Much of the content that existed on the site was there to give a SEO advantage. However, the current design was confusing to navigate and led to user frustration.

Limits & Goals

The largest constraint of this project was not to change the written content on the site. Changing or removing any of the content would affect the SEO in a negative way. The main goal of the project was organizing the content that existed on the site into the new design system. If the new system could be implemented into the site without a loss of content and SEO, then it would be a success.

Challenges

Learning the Existing Rules

With the goal in mind, I made a low-fidelity wireframe of the current location page to gain a better understanding of the current rules and limitations of the design system. I focused the research only on the location page because I planned to apply the rules I found there to the modal as well.

Developing the New Location Page and Modal

I created a high-fidelity prototype using Adobe XD to show what the location page would look like with the new design system applied. Creating this allowed us to see potential issues with the new rules in place and how we would rework interaction on the page to improve the UX.

Feedback & Refinement

After making the prototype of the new landing page and modal, we held a meeting for feedback. During the meeting we had noticed a few adjustments that would need to be made to keep everything consistent and opportunities to improve the design system further. I took these notes from the meeting and used them to refine the design system, and add in some elements that would help with accessibility on the website as well.

Results

Prototypes and Launch Plans

At the end of this project I delivered a new design system for the Nucamp website to improve the user journey during the registration process and while interacting with the location pages. Nucamp planned to implement the system I developed into their website later this year. The high-fidelity prototype can be viewed below.

View Prototype

Nucamp Design System

A design system to improve the registration process for students at Nucamp. An in-depth exploration into solving UX problems using the Atomic Design Method.

Company

Role

Year