Detroit based communication
designer, visual storyteller, and friend.
About
Email
05_SER_NONPROFIT_MOBILE WEBSITE
Role:
Ideation
Website Design
Coding
User Testing
Overview:
The SER Mobile Website is a digital program matchmaker designed for adults returning to school, built for the nonprofit SER. The goal of this project was to research and interview the SER nonprofit organization, then design and develop a website that helps users identify the right educational program based on their unique needs and goals.
Process:
The project began with an in-depth exploration of SER’s mission and current website. To better understand its challenges, multiple staff and students were interviewed. The most common feedback was that the existing site was overwhelming, with too much information and no clear path for users to find the right program. In response, a streamlined matchmaker tool was created. Using FigJam, a storyboard for the matchmaking system was mapped out, which was then translated into a fully functioning mobile website using Phoenix Code. The final site features a clean, user-friendly homepage introducing SER and its mission, followed by a quiz-like matchmaking experience that helps users find their ideal program. Based on the answers provided, the site suggests a specific program, offering users the option to apply directly or explore other options. The visual design centers on various shades of blue (SER’s brand color) to create a calm and trustworthy interface. To make the site feel more inviting and personal, playful phrases such as “Find your match!” and “Woohoo!” were added throughout the experience. Small yet meaningful touches, like animated confetti at the end of the quiz and smooth page transitions, helped elevate the user experience.
Outcomes:
The biggest challenge was working in Phoenix Code with no prior coding experience. Learning along the way made development slower, but ultimately more rewarding. Through trial and error, it became easier to build key interactive features such as button functionality, page transitions, and celebratory animations, gaining valuable hands-on coding experience in the process.