Introduction
My name is Tolu Balogun and I am the Team Lead for Gracepoint International Christian Center’s Content Marketing Team. As part of my responsibilities, I was given the task of revamping the church’s online presence, including its website and social media platforms.
To kick-start the project, I led a team of four to conduct research on the church’s impact. Our aim was to gain insight into the experiences, commitment levels, and areas of appreciation and improvement that the church community felt were important. To achieve this, we carefully crafted a series of questions that would help us understand the different perspectives and personalities within the church.
We selected a diverse group of nine individuals who represented the leadership, workforce, and membership of the church. Through their responses, we discovered a common theme – a strong sense of belonging to a family. Armed with this valuable insight, we developed a problem statement and created user personas that accurately reflected the ideal member of Gracepoint ICC.
Our next step was to embark on the UI/UX design and UX writing process. In this case study, I will take you through the journey we embarked on to create a website that truly reflects the essence of Gracepoint ICC.
Join me as we explore the design process that brought about a website that is not only aesthetically pleasing, but also user-friendly, informative and engaging.
Research
For this project, I employed the Research Thinking methodology developed by NNgroup. This methodology allowed us to conduct research that was user-centric and iterative, ensuring that our final design would meet the needs of our target audience.
Our research approach consisted of several stages. Firstly, we conducted user interviews with nine individuals who represented the different personalities within Gracepoint ICC. We asked them a series of questions that were designed to elicit information about their experiences in church, their level of commitment, and their thoughts on areas of improvement.
We then analyzed the data collected and identified the common themes and patterns. Through this process, we gained valuable insights into the needs and expectations of our target audience. We discovered that the sense of belonging to a family was a central theme that cut across all categories of individuals within the church.
We then used these findings to create user personas and develop a problem statement that accurately reflected the needs of the Gracepoint ICC community. These personas and problem statements formed the foundation for the UI/UX design and UX writing process that followed.
The methodology allowed us to develop a user-centric design that accurately reflects the needs and expectations of the Gracepoint ICC community. By continuously iterating throughout the design process, we were able to create a website that is aesthetically pleasing, user-friendly, informative, and engaging.
Affinity Mapping
In order to gain a deeper understanding of how the church community perceived Gracepoint International Christian Center and how they wanted to interact with the church online, we grouped similar answers from our research into an affinity map.
This process involved taking the responses from our user interviews and organizing them into themes and patterns. By doing this, we were able to identify commonalities and develop a better understanding of the needs and expectations of the church community.
The insights gained from the affinity map formed the foundation for the content that was made available on the church’s website. This content was carefully crafted to ensure that it was in line with the needs and expectations of the church community.
Furthermore, the information from the affinity map was passed on to the church leadership. This helped to ensure that the church was aligned with the needs of its community and that its online presence was reflective of this.
Problem Statement
I want a church that can meet the community and spiritual needs of my family, be grounded in love for one another and provides a platform for me to grow to a more complete christian and human being with the support of my family, the church.
User Persona
Lightening Demo
Initial Prototype
Competitive Analysys
As part of the competitive analysis for for this project, I analyzed the fonts, spacing, iconography, and information hierarchy of two popular travel websites: AirBnB and Travelocity. AirBnB’s use of clear and legible sans-serif font, consistent spacing, and minimalist iconography as well as using the brand color to highlight and emphasize content ensure that the user interface was visually appealing and user-friendly. However, Travelocity’s design who also used a similar font system, with design elements feeling missing especially since I expected icons on some tab headers ensured that the design was not as modern looking as that on AirBnB. Both websites have a clear brfand identity, making it easy for users to recognize with easy to use navigation. These observations provided valuable insights for my project, helping you to create a user interface that is both visually pleasing and easy to use for the users.
Moodboard
After completing the analysis of competition, I was better equiped to draft a moodboard that I was able to use to pull colors, font and feel that I would want to use across the app.
Style Kit
With the moodboad set, I was able to define a more enjoyable Brand kit and selected three fonts to choose from. I needed a sans-serif font that projected luxury, was easy to read and looked confident.
My initial picks were Open Sans, Gordita, and Nourd.
I would have normally gone for the Open Sans font but I feel more confident with Gordita because of the base font weight. It is not as thin as Open Sans and not as Bold ad the Nourd font. Also, it is both more legible and readable than the other two font options.
With the feel from my moodbaord, I decided to choose the colors that had the highes contrasts and as such went with the color pairings shown above.
Mock Ups
Log In/Sign Up User Journey
Select Trip User Journey
I created Hi-Fidelity Mock Ups for the app and had to make major changes at the point of implementation that was way different from the initial wireframes that was initially done.