Project Overview

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:

🧠 Research and analyze in detail the design decisions that were being planned for the live website 📢 How to efficiently communicate these design choices with the Board Members of the organization 👩🏻‍💻 How to best present and organize specific information to the users on the live website

Outcomes

• Phase 1: Research, plan, and develop a fully-functioning coded website.
• Phase 2: Apply design process to create a live redesign.

Goal

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.

Process

Phase 1

Phase 2

Research

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

User Interviews

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.

Ideation

Provisional Navigation

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.

Lo-Fi Wireframes

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.

Web Development

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.

Brand Identity

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.

Logo Guidelines

Colors: Primaries

Colors: Secondary

Typography

Marketing Collateral

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.

Brand Guidelines

Included:

• Logo Usage
• Colors
• Typography
• Images/Photographs
• Communication Identity

Click here to view PDF

Design Prototype

Sitemap & Nav Hierarchy (Revised)

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.

Mid-Fi Wireframe Proposal (IA)

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.

Final Design

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

Visual Guidelines

This guideline contains information about the overall design system, including font choice, font size, paragraph leading/tracking, and color hex code.

Reusable Modules

Reusable modules and components are outlined for future use of development. It provide information on fonts, spacing, and color.

High-Fi Prototype

More information about design specs can be found in the final prototype. This also includes interactive state specifications.

Click the image to launch the desktop interactive prototype!