UX / UI / WEBSITE REDESIGN

Design The Future: Digital 2022

Role

UX / UI Design, Wireframes, Research, Website Design

Tools

Adobe XD, Photoshop, Kajabi

duration

3 months

view the live site
Click Here For Website

Overview

Design the Future is an award-winning Design Thinking & STEM summer program that teaches high school students how to design and build products for individuals with disabilities. Due to the Covid-19 pandemic, many on campus programs, including Design the Future, adapted from in person to virtual learning.

Problem

Since Design the Future did not have an online course in the past, it was my responsibility as a designer to help portray their program as going remote.

solution

I designed a hero image to clarify the program as digitally focused and remote and select images from their previous classes based on the image’s emotions and whether they assist in illustrating the copy-written sections of the page.

The Design Process

Researching Online Schools & Programs

How do they Communicate Thier program to their users?

Design The Future: Digital is a high school Stem summer program with a fun and insightful personality the program's founder sought to illustrate through their website.

During the meeting I had with the program's founder and colleagues, it was shared how the program was going digital and that it needed to be evident it is going to be remote from now until next year. This discussion lead me to research:

- How online summer programs communicate the theme of their programs.

- Discover imagery that carries the story and emotion of the website's copy write.

- How to configure information so that it is dynamic and exciting to read.

Prototypes

implementing insperation in designs

After researching and compiling inspiration from multiple online school and summer program websites, I implemented designs based on the highlights of those websites. The methods I have applied from my inspiration were images of happy individuals within the age range of the students across the website designs. I used images from Design The Future: Digital Facebook page as well as from license-free websites.

The Fourth & Chosen Iteration

How The Fourth Iteration Came to Be

Due to the lack of images from Design The Future, I sought out and discovered a picture of a young and happy individual on a cell phone. I felt this image portrayed the program as a whole because of the age range the individual falls in and the glowing smile and display of happiness while on a digital device. I had to photoshop the model onto an illustrated background I created. The background imagery of icons I presented together had the purpose of clarifying the theme of Design The Future’s program of helping develop digital solutions for those with disabilities.

Desktop display
tablet display
mobile display

New UI Style Guide

What I Learned

The Importance of Emotion shown in Images

One of the challenges of working on this project was not having images of the program showcasing its digital side. Due to covid, this typically on-campus program was turning remote for the year. Instead of relying on license-free photos of students in a classroom, I decided to select images for the Stem program's Facebook page from their previous gatherings. My selection of images was based on the story it was telling through the picture and emotions displayed that best matched the copy write on the screen. In doing so, I achieved a more exciting and friendlier website for potential students to explore.

Let's work together

Send me a message on any design inquiries!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.