Research-based product development culminating in a hyper-local website connecting volunteers and the community.
Research • UX • UI • Front-end Dev
Germantown VolunteersGraduate Student project for Foundations of Interaction and User Experience Design
Timeframe: 13-week semester
Assignment: Identify and redesign a small site using the methods learned in class, the final deliverables were a detailed case study, including a final presentation with a final coded prototype walk-through. The Germantown Volunteers site went beyond the requirements of the assignment and experimented in research-based product design. Project Description: Germantown is a neighborhood in Philadelphia that I love and call home. My goal was to redesign the neighborhood site to reflect the diversity, its history and the community at large. During my research with stakeholders, this was already being addressed and a new site would be unveiled in a couple of months. Instead of duplicating effort, I took the research and pivoted. A new product was developed to reinforce community building and pride.
Preliminary Research
Employed newly learned skills in SWOT analysis, site mapping and user flow diagramming to identify the potential areas for user experience improvement. Then using Facebook neighborhood group pages for inspiration, developed 3 personas that represented distinct needs.
Information Architecture and Prototyping
During persona development, I came across a significant number of examples of Germantown residents supporting each other and their community through volunteer opportunities, community meetings and neighborhood events. Building on that spirit, I chose to create a volunteer site that addressed the community needs. Many volunteer sites represent large areas and organizations, this can be a barrier for smaller organizations and I saw this as an opportunity to support smaller community building efforts. I conducted open card-sorting tests (even one at a Germantown diner), to assess the information people were interested in and to guide the site architecture. With those insights, I moved into several rounds of prototyping and user testing sessions.
Visual Design and Mock-ups
Using the murals and local photographs of the neighborhood for inspiration, I developed a moodboard to capture the vibrant, dynamic nature of Germantown. Bright colors are represent the optimistic and helpful nature of the site. The UI kit helped to outline the look and feel of different elements and made for an easier translation into .psd mock-ups of every page, breakpoint and element state.
Front-end Development
With the mock-ups completed, I moved into the front-end development of the site with HTML, CSS and smidgen to Javascript. This class was my first exposure to coding. We used GitHub to manage changes and to host the final site.
Here is the final site:
What I Learned
This was my first hands-on experience building a site from concept through development and it was intense. Practicing and learning various research techniques and seeing their positive influence on design was and still is exciting to me.
• Test your research methods first
• Users are surprising
• A little bit of research goes a long way
• Test and iterate often, failures help you learn
• Coding is like knitting!
