Photography Portfolio

By Cameron Kuey

View more of Cameron’s Photography at his Facebook Page

Graphics & Logos

Designed by Cameron Kuey

Web & Mobile UI/UX Design Portfolio

Klema by The Cultivation Project

The Problem: At the moment, missionaries are faced with the difficult task of building up support teams to help fund their services. Besides doing their intended work of loving on others, missionaries have to spend months going from church to church in order to fundraise for their ministry, grow and maintain an emailing list, and learn how to use social media to get others to join their work. Since many missionaries were never trained to do this from the start, it becomes difficult and burdensome for them. After participating on a few short-term missions trips myself (less than a month long each), I experienced a fraction of the pain that full-time missionaries had to go through.

What is Klema?: In 2017, I decided to create a new platform, called Klema, through my non-profit organization, The Cultivation Project, in order to provide a solution to the communication and fundraising pain felt by the thousands of missionaries around the globe. Below is the first wireframe and design prototype of Klema.

Phases: There are three major phases for the design development on Klema since launching in 2017 that I will explain in detail below:

1. The first phase was designing the Desktop Website Wireframe Prototype

2. The second phase was creating our minimum viable product, or the Live Beta website.

3. The third phase, which is happening right now, is designing an iOS app, the first mobile version of Klema.

Throughout the next portion of this portfolio, I will explain how Klema’s original design was ultimately influenced by a combination of feature requests by real-world missionaries and the desire for an intuitive and simplified platform for missionary communication. I will then explain how the design has since transformed when transitioning from our prototype to our minimum viable product and iOS app.

Use the live design prototype of Klema below:

PHASE 1

Klema.io - Website Wireframe prototype

Desktop Web Version: From June 2017 - September 2017, I led a web development team to design the first iteration of Klema’s desktop web interface. I communicated closely with Crystal Kwok, our UI/UX Designer to develop the look, feel, and functionality of the website.

My Role: Since I had a UI/UX Designer for this project, my role was to focus on laying out the overall vision and working directly with Crystal to help manage her design. As President of The Cultivation Project and Klema, my job included talking to as many churches, missionaries, and organizations that we could, and funneling my findings into our Klema design decisions. Crystal used Sketch and Invision to design our prototype, but allowed me to make the final decisions for each screen that was designed.

Designed Around Purpose

Here’s a list of features that we wanted to include in Klema and a short description of how it ultimately influenced our design process. At any moment, feel free to interact or test any features with our design prototype above:

• Following: From the start, I wanted Klema to have a social media feel in order to encourage community and personal expression. I understood that most of the content creation was going to be by missionaries, and most of the content viewership would be by supporters. Because of this, we went with a “follow-unfollow” model for user relationships, rather than “friending”. This heavily influenced Klema’s design because we could then separate data and information into three main categories: user-created content, followers-created content, and users to be discovered.

• Profile Page: The main role of the profile page was to consolidate any user-created content. Our end goal was to design the profile page so that anybody could simply view the profile page and immediately understand who the missionary was, what their purpose/work was focused on, and how they needed support. We designed the profile page so that key pieces of information, such as a short “about me” description, optional location of service, and more personal facts were easily viewable. From there, content created by the missionary, such as prayer requests, blog posts, and missions trips, would be organized chronologically in quadrants to keep a clean and standardized look.

• Prayer Requests Writing, Reading & Interacting: Arguably, the most important way to support a missionary is by praying for them and continuing to pray for the specific things they share with their supporters. There were three aspects of prayer requests that we had to consider in the design:

  • Writing: For Klema, it was important that writing a prayer request was intuitive and efficient in terms of the time it takes to put one onto Klema. We decided to create an “add prayer request” button in the navigation bar that would launch a modal when clicked on. This would make it very easy for missionaries to write prayer requests and encourage them to write more frequently no matter what screen they happened to be on.

  • Reading: There were a couple of ideas that came up for how to show prayer requests from the users you follow. We originally thought about having a banner floating across all screens (almost like a stock ticker) that would show the latest prayer request, but found that it was too messy. In the end, we decided to dedicate a section of the newsfeed (later renamed “activity” feed) to purely show prayer request updates from people you follow in chronological order. One of the main reasons was that the activity feed was designed for people to consume and receive information, while the other pages on Klema had different purposes (I will get more into this in the activity feed section below).

  • Interacting: I spoke to a lot of missionaries and missionary teams about the importance of receiving feedback and interactions from their support bases. One missionary in particular told me that she sends out her prayer requests and updates to her support group once a month by attaching a PDF letter to a mass email group. However, because her whole support group is just bcc’d to the email, nobody ever responds back, confirms that they have read the update, or mentions that they are/were praying for the missionary. As a result, the missionary felt discouraged or alone a lot (which also aligned with more trends in missionary mental health issues that are known amongst the Christian missions industry). This finding ultimately led to us including an interactive button next to each prayer request where users can click if they are “praying for the missionary’s prayer request”, similar to a like button on other social media platforms. In the first iteration of Klema, this button was simply a circle and would tally the amount of clicks from unique users.

• Blog Post Writing, Reading, & Drafting: One of the most popular forms of communication from missionaries to supporters is letter writing. As mentioned above, missionaries commonly write updates on word documents, save them as PDFs, then attach them to mass email groups. This method definitely serves its purpose, but requires way too many steps and ultimately discourages interactions between the missionaries and supporters. We had to figure out a way to design Klema so that it prioritizes ease of use, efficiency, and the important two-way relationship that so many missionaries long for with supporters.

  • Writing: Similar to writing a prayer request, we added a dedicated “+” button to the navigation bar, which when clicked on, opens up opportunities for a user to create various types of content on Klema. We wanted to keep the blog post writing experience simple and intuitive, so we pushed towards a minimalistic approach. By designing our writing interface with minimalism, it encourages the users to focus their writing on what matters the most, which is their stories, updates, and photos.

  • Reading: When viewing a user’s blog post, the update appears in a standardized format with the title, user name, and header image at the top of the screen and all of the content below. As mentioned earlier, we wanted this experience to be intuitive, so we designed the interface to be minimalistic and focused on the content, that way the user is encouraged to fully read and ingest the material.

  • Drafting: We understood that it would be very frustrating for a user to write a long update, only to lose internet connection or accidentally hit back in their browser and lose all of their work. We designed Klema so that all blog posts automatically save in the background every few seconds so that a user’s work is constantly up to date and backed up.

• Newsfeed (Activity Feed) that chronologically organizes all updates of people you follow: Nowadays, most major social media sites have algorithms to help show the “best” content to the user, based on their history, preferences, and trends. While that can be highly beneficial for those platforms, one of the main differences with Klema is that we expect social circles to be smaller and more intimate, resulting in users who would be following less people and groups as a whole. If you attend church on a normal basis, chances are, you will attend the same church consistently until you either move or want to change churches for some reason. And because of that, you will naturally hear about and want to support missionaries who are related to or sponsored by your church. Of course, there will always be the small percentage of users who will follow hundreds of missionaries, but for the average user, we expect them to follow a dozen or two at most. I concluded that it would be essential for the activity feed to show content of users you follow in chronological order because it will ensure that users would see and respond to the updates of those they care about.

• Discover Page for users to find new people or groups to follow: From the beginning, the idea of having a dedicated screen where users could discover new missionaries to follow was intriguing. Crystal and I had a lot of conversations about this because designing this feature meant that we had to have enough users and data to create the best experience. As a result, we ended up designing the discover page to simply show specific updates, groups, and users that we, as the managers of Klema, would want to feature. Since we didn’t have a large user base (we were brand new) and not enough data of how our users used Klema yet, this was the most resource efficient and easiest way to get going for a page dedicated to help users find new users to follow.

• Media (photos & videos) Sharing and Embedding: Since videos and photos are increasingly becoming the popular way to share updates, we designed Klema so that you could share photos and video embeds through the blog writing process. Due to limited resources and high server fees, we couldn’t design Klema to host videos, but rather embed to other platforms. This is an area in which we want to expand on in the future so that missionaries can have their own, private and secure video hosting platform incase they are in located within sensitive and dangerous governments.

• “Missions Trips” to provide a hub for missionary team communications: Since most missionaries work in teams, we had to figure out a way to create a team-like infrastructure on Klema. The idea of using hashtags to organize posts and members who are on the same team or trip came about mainly due to the organizational purposes that were possible on the backend. We had to figure out a way to intertwine these teams, or group, pages within our platform, which was already optimized for one to one user relationships. Crystal and I eventually came up with the idea of creating these “team hubs”, or missions trips, where users can add other users as “teammates”, and from then on, any post or prayer request written by those teammates would consolidate into their missions trip page. By doing this, we created a system that is more efficient and seamless than having teams update their websites constantly with new updates, or consolidating various written letters onto a single PDF to send out to supporters. Users can simply copy the URL of their missions trips page and send it out to supporters, who can then follow the trip and immediately see updates on their own activity feeds any time a new post or prayer request is written. This feature, by far, was one of my favorite and most exciting because of the way it was intertwined into our platform and operated behind the scenes.

PHASE 2

Klema.io - Beta Website

My Role: Throughout the transition from design prototype to live beta website, my role was to oversee and manage everything about the web development process. I directly managed the engineering team and collaborated with them to figure out what aspects of the prototype would make it into our minimum viable product, which was our live beta. Due to limited resources and time, we had to cut out some of the more complex features and simplify the design of Klema even more. I continued to work with Crystal to redesign some screens and consolidate some features to simplify the coding processes. Our team was able to launch the live beta website in May, 2018. Here are some notable design changes when transitioning from our prototype to minimum viable product:

• Following: This feature remained the same, however, the location of the “follow” button changed when we decided to add a “donation” button on the profile page as well. We wanted the buttons to be similar shape, size and colors, so we had to reorganize them so that they would center under the profile picture.

• Profile Page: The profile page changed quite a bit from our prototype to our MVP, but maintained the overall simplistic and modular look that we started with. The most notable change was creating two tabs that shared the same quadrant. The original prototype was designed with an infinite

Prayer Requests Writing, Reading & Interacting: Arguably, the most important way to support a missionary is by praying for them and continuing to pray for the specific things they share with their supporters. There were three types aspects of prayer requests that we had to consider in the design:

• Blog Post Interacting:

  • Interacting: Similar to the prayer request feature, we spoke to many missionary families and found that receiving any feedback or evidence of readership was important for their updating process. Missionaries informed us that they would feel more encouraged to keep updating supporters and have a peace of mind knowing that people were keeping up with their updates. We designed a simple “like” button that appears at the end of each blog post so that users can like content. Since this button appears at the end of a post, missionaries can know not only who read their content, but who most likely read through their content.

• Donation Giving & Receiving:

  • One of the most notable changes that was implemented into the beta site was adding a donation giving and receiving system within Klema. Since the main focuses of Klema are to help missionaries build their support bases and enhance communication with supporters, including a monetary donation system within Klema was essential for my perspective. The challenge was that we had to make this process seamless so that users won’t get confused and would feel more confident with giving through this platform.

  • Donation Giving: We designed donation giving on Klema so that it’s as easy as finding a user, clicking “donate”, and entering credit card information to finalize the payment. When donating to a user, a modal appears on the same screen, which is important because it keeps the user on Klema’s site and helps them feel more confident that their transaction is going to the right person.

  • Donation Receiving: If a user has enabled donation receiving, they will be able to access a list of the people who have donated and amounts that were donated to them on their settings page. We purposely designed this information into the settings pages of Klema so that any sensitive information wouldn’t show up as easily. We designed the donation information so that it clearly shows the donor information and donation amount in chronological order, making it easier for the user to keep track of this data.

• Activity Feed that chronologically organizes all updates of people you follow: Besides the fact that the newsfeed became the “Activity” feed, the overall designed was preserved from the prototype to the MVP. The screenshot below shows the slight design updates from the prototype to the MVP, which include: the “praying for” interactive button changing and the minor change from “newsfeed” to “activity” in the navigation bar.

• “Missions Trips” —> “Communities”: The final major design overhaul between the prototype and MVP occurred in our “missions trips” feature. The main influence behind this change was because we wanted Klema to attract large, self-sustaining communities (like churches) who could use Klema for all of their missionary needs. We added a “communities” tab on the navigation bar, which leads to a screen that shows all of the communities that you, as a user, are a part of, and all of the other communities that exist on Klema, which is intended to help users find new communities to join. The community groups help with a few important things:

  • Organization: We designed the community groups to act as a hub for any member, missionary, or supporter associated with that community group. For example, a missionary team can use it to consolidate their teammates and supporters, or a church can use it to consolidate their missionaries, pastors, and congregants. We added tools inside of the community groups to help filter out content so that you can select which users’ blog posts and prayer requests content show. By doing this, a missionary team can have all of their teammates’ blog updates and prayer requests organized and consolidated into chronological order in one hub, which is easier to share and externally link to.

  • Following: As a user, all you have to do is follow a community group and, from then on, any content that appears in the community group will also appear on your own activity feed. This makes it easier for users to simply follow an entire church community group or a missionary team and not have to worry about forgetting to follow all of the individual teammates who are a part of that group.

  • Donations: We designed community groups to also receive donations (optionally). After talking to a variety of churches, we noticed that they preferred to take care of their own donor accounting and fund distributions, so having one unified donation button would work well for them. Because of this, we designed community groups to have their own dedicated donation button, which when donated to, would go to the parent organization, company, or church that was in charge of the group.

PHASE 3

Klema.io - Mobile App

Mobile: After launching the live beta of Klema in May, 2018, my team has been able to gather some data and trends of how our users use Klema and what they care about the most. One of the most common requests was to simply have a mobile app version of Klema.

My Role: This time, I decided to directly design an iOS prototype of Klema using Sketch and Invision. Once again, I took this opportunity to also go back to the roots of Klema to see what was needed, what wasn’t working, and what new features could be implemented with this new mobile version.

Designing the iOS App: I designed the Klema mobile prototype so that a user can easily use the platform with one hand, or thumb rather. As with all mobile app designs, screen real estate is extra valuable and every pixel has to serve a purpose for the app. Here are some of the major changes from the desktop web version to the iOS mobile app design: