During a UI Design class (Oct – Dec 2020) through BrainStation, I redesigned the visuals for app for surfershealing.org, a non-profit organization where they host surf events to take autistic kids surfing as a therapeutic experience.
This is not real client work.
Ideation and concept development
Wireframes
Brand identity visual design
Mock ups
Prototyping
Presentation
Problem:
I designed it with the users (autistic kids and their families as well as potential donors and volunteers) in mind so a few immediate changes I knew I wanted to make were:
• Brand refresh
• Make the navigation straightforward
• Make it easy to either sign up or donate
• Tell the company’s full story in a more editorial and aesthetic way (keep it easy to read without removing too much content)
After deciding on the organizational structure of the pages needed, the top navigation, and some initial sketches of those key pages, I created a basic wireframe structure for the layout based on my sketches.
I chose not to add any content in until I had a visual style. The site is pretty text and photo heavy so it seemed easier to do this later and I only wanted to get the basic layout down before any details.
I began to think about brand styles and visuals, drawing a lot of inspiration from the ocean and surf culture as well as creating a more calming, relaxing vibe to suit the target audience.
Once this was created, I put together the mock ups and it didn’t need too much adjusting from my original layout. I created the desktop version first (for the class) and the mobile screens additionally on my own time.
