The MD Beekeepers Association is an admirable organization with an important cause. However, their website is outdated and lacks a forward thinking design vision.
The Solution: We propose a re-design of the website using our best practices as designers, following the design thinking process.
Tools Used: Figma, Figjam, Trello, Miro, Zoom, Slack
We believe that by redesigning the MD Beekeepers website with user-centric design principles, incorporating educational content, interactive features, and fostering a sense of community - we will achieve increased user engagement, improved knowledge dissemination, and strengthened advocacy for beekeeping practices.
Through our redesigned website, we aim to cultivate a vibrant online community passionate about beekeeping and environmental stewardship. By fostering engagement, sharing knowledge, and celebrating the vital role of bees, we strive to inspire action, raise awareness, and empower individuals to make a positive impact on bee populations and biodiversity conservation.
We created a survey that we gathered data from in addition to conducting user interviews to gain feedback on the most important changes needed to be made to the site.
Based on the insights we gathered during our research, we created an empathy map to really understand our target user.
User Insight Statement: A nature enthusiast with a desire to promote bee conservation feels discouraged due to her lack of formal education or hands-on experience in the field.
We conducted a competitor analysis on 4 companies (See Here).
Direct Competitors:
Indirect Competitors:
We wanted to ensure we had specific points to improve and work on, so we conducted heuristic evaluations on both versions of the site with annotations.
We then began to look at the site from our target users point of view to help prioritize design changes to be made.
First Iteration:
Second Iteration:
Moving into information architecture, we mapped out how we wanted the site to be structured based on our research so far. Using the sitemap, we sketched out the first iteration of the wireframes. The sketches showcase how we want to structure info on each page, and our general idea for how to place each element on the digital prototype.
Web Version:
Mobile Version:
We created a RWD so the elements conform to the mobile version. Featuring a hamburger menu rather than the horizontal web navigation.
We conducted user testing interviews to gauge the functionality of our design - we received positive feedback from our testers with some constructive points as well:
Using the feedback from the wireframe testing, we started adding more visual elements to the web & mobile prototypes.
We wanted to conduct some A/B testing at this stage, so we created two versions of a higher fidelity desktop & mobile site.
Version A:
Version B:
Mobile:
Our main focus of this re-design was to make the site more modern and inviting to encourage an increase in donations and volunteer willingness to participate.
We changed the main layout and re-worked the navigation.
General Closing Feedback:
