top of page
Case Study.png

Ho'omau Ke Ola's Landing Page

UI Design Sprint

Role: UI Designer
Tools: Figma, Adobe Photoshop
Timeline: 1-week UI design sprint

Brief

What is Ho'omau Ke Ola?

Ho’omau Ke Ola is a non-profit organization to promote healing from Substance Abuse in a trauma-informed environment that weaves Western Best Practices with Hawaiian Spiritual Values.

Day 1–2: Discovery & Research

Research in UI Design? What’s the point?


In order to execute the organization’s vision, I began to contextualize the relevant data.

“What‘s their mission statement?” (Business Goal)
“Who are their users?” (Empathy)

Contextualization allowed me to define the desired outcome from both the business and the user. [Design Thinking]

On Catch-a-Fire, Director Shauna G. proposed a brand new website for her non-profit organization. Upon research, the existing webpage seemed underdeveloped and extremely wordy. This ultimately highlighted the question, “How might the designer bring forth a visual balance to a very informative and formal website?”

Understanding the structure

What's the original site like?

I screenshot each page and took some notes on how might I effectively consolidate jumbled information. This allowed me to visualize proper placements of certain sections and components. (“Can this be included on the homepage?”)

Day 3: Moodboard/Inspirations + Sketching

I went onto Collectui.com to gather some inspiration on some visually appealing designs and created a Moodboard:

MoodBoard.png

Day 3.5: Sketching!

The designing STARTS NOW!

Then I listed some sections that were imperative to the Landing page from top to bottom. This allowed me to maintain the skeleton of the information architecture and hierarchy.


  1. Condensed Nav Bar

  2. Hero Image + CTA

  3. Mission Statement / About

  4. 4 Main Programs

  5. After Care

  6. Blog or Media OR Testimonial

  7. Footer

Sketch with Anno.png

Day 4: Wireframing Mid-Fidelity Prototype

Created with Figma

Creating the wireframe was fairly easy, as my main focus was mainly on the flow of the landing page rather than the structure.

To create this I utilized free-to-use templates on Figma’s Community Plugin option.

0_26azr09L5lEtSF7X.png

Day 5–7 Critique and Iterations

Spoiler Alert: I've had GREAT feedback

On this day I received some valuable feedback on how to better demonstrate the organization’s formality and message… as well as some aesthetic tweaks that needed to be changed.

Here are some valuable comments received by peers:

  1. “Navigation seemed a little too congested, consider increasing the grid layout to spread out the links.”

  2. “The Hero image is hard to see, perhaps adding more contrast to the background will help?”

  3. “The call-to-action button needs to be in context.”

  4. “The green dividers break the flow of the page.”

  5. “The footer should be condensed, it seems too wordy.”

Some critiques also questioned the mission of the website and how the quote “Learn. Heal. Grow” tied into the story from start to finish.

0_vhfADL0TtkZRg8xX.jpg
0_WbYt7vNij2MaRsup.png

Some visible changes

Updates: Content control

Title: Added spacing in between the content for more breathing room.
Programs: Seemed too wordy, add some context in relation to each program.
Learn More: Changed the wording.

0_EfOlSF5gG3EPL7tf.gif

Hey, you made it!

Thanks for reading. Have any questions? Let's connect!

bottom of page