Web paGe RedesiGns
During my time as a UI design intern, I redesigned many web pages for nonprofit organization Resilience, Inc in both desktop and mobile format. My main focus was on the the portal to their social-emotional learning program, SELENA, which contained lessons and activities for teachers to share with students about topics like social awareness, relationship skills, responsible decision-making, and financial literacy.
Tools Used
Figma​
My Roles
UI designer​
Supplied DesiGn System
My project manager provided the website's design system to follow when redesigning. Photos were to be shaped with jagged edges, and graphics were included that could be layered over photos.
#CDE6C6
#FCD804
#94CF49
#FCFCEF
#2A3036
Lato SemiBold 64
Raleway Regular 40
RALEWAY REGULAR 28
Raleway Regular 24
HomePaGe RedesiGn
The existing homepage for the learning portal was very unpolished and poorly spaced with no clear branding.
OriGinal
RedesiGn
The existing homepage consisted of large photos with short bursts of texts in between
To optimize organization and convey information concisely, I created multiple sections with cards, utilizing photos along with icons
Using the given design system, I created an eye-catching header with a hero image
DesiGn Iterations & Revised DesiGn System
After submitting my first draft, my project manager gave me the freedom to make changes to the design system while iterating on my designs.
I changed both the heading and body typefaces. I chose a more stylistic typeface for the headings to add more personality in the design. For the body text, I chose a typeface that was easier to read.
Tamil MN Regular 58
Tamil MN Regular 48
Tamil MN Regular 32
Figtree Regular 22
Iteration 1
Expanded hero image across entire width of page for sleeker, more professional look
Changed the look of some of the cards to look less like buttons as they were not clickable
Changed the look of the second section of cards to better utilize the space
Final version
More RedesiGns
I next continued to redesign other pages on their SELENA website, specifically their Contact Us page and their portal Login page.
OriGinal
Existing Contact Us page was very generic and old-fashioned
Added hero image and used new design system to create better organization and aesthetic
OriGinal
Existing Login page design focused on a photo instead of the function of the page
Made sure the redesign showcases the login entry field
RedesiGn
RedesiGn
Mobile Versions
After completing the desktop redesigns, I created mobile versions of the homepage, Contact Us page, and Login page.
Other Web PaGe RedesiGns
Throughout my internship, I redesigned other web pages as well. One of these was the informational page for the Financial Literacy section of the program on the organization's main website.
DesiGn Style
I was told to use other pages on the website as a guide for the redesign
OriGinal
Existing page was uninterrupted text bookended by two photos
Used the colorful block design from the other web pages to visually show list
Made sure the most important information was above the fold