Building a Fully
Interactive Website with
a Store front
For a Non-Profit
Organization
Project Details
Sector: Nonprofit
Challenge: To design and build a website from scratch for Resolution Prayer Ministries International
My Role: Visual Designer, Interaction Designer, Prototyping, Testing
Responsibilities: wireframing, user research, designing, prototyping, testing
Project Time: 3 weeks - (March 2022)
The Design Process
I. Defining the Problem
Resolution Prayer Ministries International (RPMI) wanted to create a website to establish their online presence. RPMI wanted to have a platform for members of their ministry to easily find information, sign up for various events, and foster community. RPMI also wanted a website with a storefront component to sell merchandise and accept donations.
II. Collecting Information
The RPMI stakeholder has provided 2 reference websites to communicate how they wanted their site to look. I thoroughly examined both reference websites to get a better understanding of their vision for their own website.
Website Reference 1: KFT Church
Analysis
KTF’s website used a lot of pictures and large text to grab user attention, and create an immersive user experience. On the homepage, they used a large call-to-action gallery, where they showcase their most important upcoming events and content. They also used a lot of subpages to create an elaborate webpage hierarchy. The overall look and feel of KFT’s website was eye-catching and inviting.
Website Reference 2: Prayer Resolution
Analysis
Prayer Resolution’s homepage is simpler. Their use of simple color scheme and layout with rounded corners made the experience of navigating their website unique. In their design, they’ve laid out the content of their site in a way that was easy to digest and thorough at the same time.
I incorporated a combination of these 2 designs to create a design that aimed to fit the requirements and specifications of the RPMI stakeholder. The RPMI stakeholder wanted six webpages (including the homepage): Watch Sermons, Events, Get Involved, Store, and About.
III. Brainstorm & Analyze
Sitemap
Here's the sitemap I made detailing the basic skeletal outline of the website. This sitemap shows how users will navigate the different pages throughout the entire website.
Sketches
Describe your image
Describe your image
Describe your image
Describe your image
Wireframes
Analysis
In these initial sketches, I experimented with simple designs and layouts to ensure that important information can easily be accessed. I chose to use text on a solid background to aid the ease of accessibility of information for the additional webpages.
IV. Develop Solutions
Color Scheme
Analysis
I chose the cooler green colors as the main colors because they match the RPMI logo. As the accent color, I chose the bright orange for call-to-action buttons (CTA). This bright color creates a strong contrast between the darker cool green colors, which catches user attention better.
Mockups
Analysis
With the chosen color scheme, I created these designs based on the reference websites and the logo provided by the RPMI stakeholder. Similar to KFT’s website, I used a lot of pictures on the homepage to create an immersive user experience for users. I also used gradients to create smooth transitions between different parts of content on the website.
V. Stakeholder Feedback
The RPMI stakeholder loved the designs, especially the homepage. She liked how I used colors from the logo, pictures, and gradients to make the homepage come to life. However, she wasn’t too fond of the additional webpages because they were too dull and boring. So, in the next iteration of the designs, I added pictures to the background of the additional webpages to bring them to life!
VI. Improve
Based on stakeholder feedback, I chose to add more background photos on the additional webpages to make them less dull and boring. I showed the new designs to the RPMI stakeholder and she approved me to build the website. I used Wix’s website builder to actually build the website.
Final Thoughts
I really enjoyed designing this website for RPMI. Being able to use my creativity to solve problems and help people is extremely gratifying. This experience taught me the importance of putting users at the center of your designs. It’s extremely important to listen to user feedback when iterating from design mockups to ensure that they meet the user needs.
