Puente Website Re-Design

Company

Date

  • April 2020 - August 2020

Process

  • Agile

Role

  • React Developer
  • UX Designer
  • UX Researcher

Responsibilities

  • Background Research
  • Update Branding
  • Lo-Fidelity Wireframing
  • Hi-Fidelity Wireframing
  • Prototyping
  • Full-Stack Development
  • Quality Assurance Testing

Technologies Used

  • React.js
  • Gatsby.js
  • HTML
  • SCSS
  • GraphQL
  • Contentful Headless CMS
  • Lottie
  • Adobe Xd
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe Premiere Pro

Overview

Puente is a global non-profit organization that uses data collection and analysis technology to tackle some of the biggest development challenges they face in the Dominican Republic. Puente primarily uses mobile applications to assess, map, and prioritize needs in the communities they serve. They have a robust network of volunteers that are trained to use their technology to survey their communities, identify needs, and help design solutions. They envision their technology helping to create a world where development organizations collaborate intelligently and selflessly to maximize their collective impact on the individuals in the communities they serve.

Problem

I was approached by Puente in April 2020 to revamp their existing Wordpress website, and give them something more in line with what you would expect from an emerging technology company. Their Wordpress website featured a clunky layout that greatly hindered the user experience, and they felt limited in what they could do due to the limitations of Wordpress templates and complications that come with applying custom code to said templates. They did not enjoy the process and interface they had to use on the Wordpress backend to update content.

Solution

To solve the issues Puente was having with their Wordpress website, it was decided that their website would be re-designed from the ground up, an intensive and iterative process consisting of two main phases; Design and Development. The design phase would consist of an overhaul of Puente’s branding before moving onto creating lo and hi fidelity wireframes of the new website. For development, we planned to create a website using Gatsby.js and HTML code using SCSS modules to style the website. In addition, GraphQL would be used to connect the website to the Contentful headless CMS to allow for quick and easy content changes to be made without Puente team members having to dig into the code.

Goals

  1. 1. Create a brand new Puente website featuring a modern and user-friendly design based on current best practices and a revamped set of company branding guidelines.
  2. 2. Showcase technology that Puente creates to aid their community in a way that is fitting of a modern technology company.
  3. 3. Showcase Puente’s community projects.
  4. 4. Showcase featured members of Puente’s robust volunteer network, and offer ways for new volunteers to get involved.
  5. 5. Enable users to stay connected with Puente on projects, technology, and other news items that Puente wishes to advertise.
  6. 6. Enable users to easily support Puente through donating from the website or purchasing merchandise.

Wireframing and Prototyping

Puente Homepage Design
Puente Volunteer Page Design
Puente News Page Design

Interested in working together?