EGBOKhero@2xEGBOKhero@2x

About the Project

I met Ben Justus, the founder of EGBOK, while on Semester at Sea in the Fall of 2014. He expressed his interest in wanting to redesign EGBOK’s website because their current site was outdated and not easy to use. In addition, it did not utilize impactful content or powerful imagery to create the best possible experience. The goal of the project was to redesign egbokmission.org to be driven by usability, content, and strong visual language. Since EGBOK's new digital experience went live April 2015, the number of single and reoccurring donations has continued to increase.     

As a user experience designer, I create wireframes, high-fidelity mockups, and brought the site to life online using Squarespace to convey the new brand voice. I collaborated closely with the founder, executive director, and development coordinator to ensure all business goals and user needs were met. 

I used a pen and paper to quickly sketch low-fidelity design thoughts and any initial ideas I had regarding how to solve the design challenge. While researching information on user personas, developing a strong content strategy, and keeping track of any feedback, I used Evernote to take notes and stay organized. I then used Sketch to create mood boards, style guides, and high-fidelity mockups. Since the EGBOK team is mostly in Cambodia and wanted the flexibility to make small updates independently, we felt using Squarespace was the best choice for hosting and developing the site. I used HTML and CSS code blocks throughout the templated site to create a more personalized experience.

[unex_ce_button id="content_s6cgaujm2,column_content_69ziehbjj" button_text_color="#273556" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="2px" button_bg_color="#d0e1f9" button_padding="12px 40px 12px 40px" button_border_width="0px" button_border_color="#d0e1f9" button_border_radius="0px" button_text_hover_color="#273556" button_text_spacing_hover="2px" button_bg_hover_color="#8e9cb0" button_border_hover_color="#8e9cb0" button_link="http://www.egbokmission.org/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW LIVE[/ce_button]

While redesigning EGBOK’s digital experience, I created three user personas to ensure that all user goals, needs, and interests were met.

Potential Donor

GOALS & INTERESTS

She is curious about EGBOK and immediately wants a general overview of the organization. Specific details, like key data points or recent organization updates, about EGBOK are also very important to her before making a donation.

FRUSTRATIONS

She hates complicated digital experiences. She does not like when she cannot find concrete stats to drive her decisions.

General Supporter

GOALS & INTERESTS

She is very passionate about Cambodia and specifically EGBOK. She wants an easy way to raise awareness and donate to EGBOK.

FRUSTRATIONS

She hates complicated digital experiences. She gets frustrated when she can’t easily share with her friends and family how EGBOK has a huge impact on the youth of Cambodia.

Cambodia Network

GOALS & INTERESTS

As an active member in the Cambodian hospitality community, he is looking for a simple way to find out details about EGBOK’s program. He wants to learn specifically what students will be doing at EGBOK with an ultimate goal to send students to the program.

FRUSTRATIONS

He hates complicated digital experiences. He does not like when he can’t easily find content about EGBOK students.

While keeping in mind the competition and targeted users, I worked closely with Ben to create a sitemap that would streamline all user goals while keeping in mind the primary business goal which is for users to donate.

Low-Fidelity Wireframes

I created wireframes to determine what content should live on each page as well as the general information architecture.

After knowing what content I wanted to drive the design, I began to explore various visual layouts for key pages. Once I felt that I developed a strong design system, I created a style guide to ensure all visual elements were consistent throughout the experience.

I used a 12-column grid system to help develop clarity and consistency throughout the experience.

High-Fidelity Mockups

Using the visual language that I created in the style guide, I continued to design the experience using sketch to create high-fidelity mockups.

We looked at many different platforms to host and build the site, but ultimately decided to use Squarespace since it allows the rest of the EGBOK team to easily make small updates to the site on their own. While this did restrict many of the design decisions I made, I personalized EGBOK’s digital experience with small code injections throughout the site. Squarespace also served as a prototyping tool allowing the rest of the EGBOK team to test the site before it went live.

[unex_ce_button id="content_p87nd8myp" button_text_color="#ffffff" button_font="semibold" button_font_size="14px" button_width="auto" button_alignment="right" button_text_spacing="2px" button_bg_color="#4d648d" button_padding="12px 40px 12px 40px" button_border_width="0px" button_border_color="#4d648d" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#3d4f6f" button_border_hover_color="#3d4f6f" button_link="/blocjams" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]NEXT PROJECT[/ce_button]