This  project was part of my final project for a Graduate level course (MMC5277) at the University of Florida 🐊. The objective was to plan, research, design, and code a fully-functional, five-page website.

I continued the process and utilized this final project to apply it as phase one for a live website redesign for Plan País. Doing this preliminary HTML/CSS (with Javascript) website redesign allowed me to do three things beyond the purpose of portraying proficiency in coding:

The main goal was to create discipline and bring more recognition to an established brand. Plan País has an impact on its participants and is the leading platform in uniting the Venezuelan diaspora in the United States - yet, it needed a more professional image that represented the organization, its participants, and team members.

One of the objectives for the (MMC5277) Web Principles class was to conduct light research that would lead to better design decisions.

These are the main findings when conducting preliminary user interviews. The interview was separated into 4 initial questions where the interviewees had to select a number from 1 to 10 (best).

The second part of the user interviews involved the existing homepage, asking them to point out where they would find a specific type of information. This was to analyze the existing call to actions and information architecture.

A part of the website development process was to think out the navigation of the website. Based on the user interviews conducted, I decided to simplify the navigation and focus on the pain points identified. These involved adding a dedicated RSVP and Contact Us page.

A very simple low-fidelity wireframe was designed to mirror the navigational hierarchy. Its goal was to highlight the focus on the informational organization that would lead users to enter the marketing funnel from various pages.

For the course final project, the goal was to create a fully-functional website coded from scratch.Required criteria and elements to be included in deliverable coded project: 

Feel free to scroll and click around in the embedded Codepen project below. ⬇️

Use Google Chrome or Firefox for best view. Click on "Edit on Codepen" for full interaction and code.

To better service other teams in the organization, I created a visual style guide to provide a set of standards and consistency for the user interface. It was also created with a pragmatic focus that would be utilized by other team members and developer hand-off in the future.

Keeping the goal in mind to make the Plan País website match the level of prestige and professionalism that it possesses, the guidelines established for the website were also used to develop an overall guidelines for print material, social media standards, and other marketing collateral.

The dynamic visual system was created around the brands tricolor palette, along with white in order to maintain printing costs low. All document designs, digital graphics, and webpage used similar layouts in communicating information.Bridging together the documents, brochures, digital graphics, webpage helped solidify Plan País leadership and its ability to stand out.

Using the coded re-designed webpage as a starting point, emphases was placed on the experience through aesthetics. Considering the turbulent political environment that characterizes Venezuela, the objective of all interactions and visuals was to provide structural organization, one that would not be an added stressor to the user.

Applying an organized and intuitive information architecture hierarchy was an important factor in providing a thought-out design and structured user experience.

Symbolically, an improved process of information would be a mirror to the modern and future-thinking problem solving approach that the organization represents.

The user flow was an important aspect in the marketing design. The website's ultimate goal every year is to have the visitor register to attend the specific year's conference.

Rather than fitting these off-the-navigation pages in the user flow, these pages acted as landing pages to be used in conjunction with other marketing campaigns: Social Media, Email, PR, etc.

In addition to hi-fidelity prototypes, a series of design specification documents were created to future-proof the website.