HARVEST
Prototyping project using HTML & CSS
Introduction
Harvest
Harvest is a community webpage that aims to bridge the gap between goers and senders of missions.
Team: Individual Project
Timeline: 4 weeks
Role: Concept, Research, Prototyping, Visual Design
Tools: Html, CSS, Atom, Surge, Adobe Illustrator
Problem Space
Problem Statement
Missionaries and supporters need a streamlined and efficient way to communicate with each other without wasting time or feeling overwhelmed.
Important updates can go unnoticed when both missionaries and supporters must search through facebook event pages, google forms, email lists, Wordpress websites, inbox full of person emails, and go-fund me pages.
The Solution
Harvest is a website that provides a collective platform for missionaries and supporters to stay updated and connected.
Problem Scenarios
Missionary
Imagine you are preparing for your mission trip. You first create a facebook event page inviting friends, only to remember that many elders at church do not have facebook accounts. On facebook, only platform users can rsvp and get notified on updates, meaning that you must create another google form link to collect individual email address AND create another version of the facebook event page information into a digital support letter. Now you have two contact sheets to look back and forth from and need to separately send updates and alerts about your mission.
Supporter
Imagine you are trying to find updates on different missionaries. You are curious to see if there have been fundraising updates for the past few months for the missionaries you’ve been supporting. When you search up their names on the search bar, you cant’ find the exact event. Next, you spend almost 30 minutes searching through you facebook notifications, past events, present events, and event invites to find the right page. You realize that this is a waste of time and give up finding the updates you wanted.
RESEARCH & Ideation
Competitive Analysis
I researched different platforms used by missionaries and supporters to analyze their visual design and information layout.
Facebook events
General event page, many users
Display critical information of an event in one page
Gofundme
Easy on boarding to donate
Raise money and track progress
Wordpress
Easy to share links
Blog style
Website Pages
Home
Introduction
CTA
About
Origin story
Sign up/ Sign in
Required to view “my page”
My Page
View all the events user is following
View events created by user
Prototyping
Wireframing
created on Adobe Illustrator
High Fidelity Mockup
created on Adobe Illustrator
Key Insight & Iterations
After receiving feedback on the low & high fidelity mockup, I learned that the webpage lacked functionality and visual readability in certain pages. Thus, I went back to redesigning layout of some pages of the website and the visual design for usability.
These were the resulted changes in the pages:
