The goal of this project was to redesign the SoMahalo Hawaiian Shaved Ice website to elevate its visual appeal and improve user experience. While the original site reflected the brand’s roots, it lacked consistency, modern design elements, and cohesive branding. I created a bright, fun, and user-friendly experience that captured the spirit of SoMahalo by introducing a redesigned logo and leaning into a modern aesthetic while preserving the brand’s colorful aloha lifestyle.
My process included designing desktop and mobile wireframes, prototypes, and an email ad wireframe and prototype. I then coded and launched the new website, building a custom navigation bar, interactive buttons with pop-up windows, and a fully functional contact form to enhance usability.
Desktop & Mobile Wireframe
Desktop & Mobile Prototype
Email Wireframe
Email Prototype
Testing for Responsiveness
To evaluate my website’s performance, I used several tools. On Pingdom, my site scored a B (83) with a fast load time of 708ms. It suggested reducing HTTP requests to improve performance. Nibbler gave me a score of 39
and highlighted areas like low text volume (due to the one-page layout) and image optimization. I resized and compressed images in Photoshop to improve load speed. At the time of testing, the site wasn’t mobile-optimized,
but I’ve since added responsive code. I also ran the site through W3 Validator, which helped me fix minor HTML errors like adding a lang attribute. Using Chrome’s Lighthouse tool, I scored an 81 in performance, 75 in accessibility and best practices, and 91 in SEO. These tools taught me that optimizing a site goes beyond visuals. It’s about performance, accessibility, and precise coding.
and highlighted areas like low text volume (due to the one-page layout) and image optimization. I resized and compressed images in Photoshop to improve load speed. At the time of testing, the site wasn’t mobile-optimized,
but I’ve since added responsive code. I also ran the site through W3 Validator, which helped me fix minor HTML errors like adding a lang attribute. Using Chrome’s Lighthouse tool, I scored an 81 in performance, 75 in accessibility and best practices, and 91 in SEO. These tools taught me that optimizing a site goes beyond visuals. It’s about performance, accessibility, and precise coding.
Final Website Link
Design Rationale
I chose a four-color palette and used it across the entire website to establish strong brand consistency. The colors were selected to reflect the fun, vibrant, and refreshing energy of Hawaiian shaved ice. For the hero image, I placed a photo of palm trees behind the redesigned logo to immediately set the tropical tone. The new logo is clean and simple, yet still distinctive, and aligns perfectly with the updated aesthetic of the brand.
To improve usability, I created a layout that clearly separates content into logical sections, like menu items and catering options, making the site easier to navigate. Every image is framed with a distressed brown border to add visual texture and a handcrafted, island-inspired feel. For typography, I used Filmotype Maxwell as the primary font for its retro, friendly character and Jaldi served as a clean secondary font that keeps the body text light and approachable.
Instead of listing all the package details side by side, which felt overwhelming due to the varying text lengths, I implemented clickable buttons that expand the content. This keeps the page clean and more digestible for users.
In the “Our Story” section, I kept the original owner photos and displayed them in a Polaroid-style mockup to enhance the personal, local charm. I also added a handwritten-style cursive font to their signature to make it feel more heartfelt and authentic. Originally, I planned to design a postcard-style contact form, inspired by their old website, but after learning about better security practices, I replaced it with a contact button that links to a Google Form for safer information collection.
Overall, I’m very happy with how the design turned out and this project has been a great learning experience, teaching me about balancing aesthetic choices and technical/functional considerations that go into a website.