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.
🧠 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
- Phase 1: Research, plan, and develop a fully-functioning coded website.
- Phase 2: Apply design process to create a live redesign.
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.
- User Interviews
- Identify Pain Points & Opportunities
- Provisional Navigation Hierarchy
- Low-Fidelity Wireframes
- Fully-functional website coded from scratch
Establish Brand Identity
- Brand Identity for website
- Guidelines for marketing collateral creation/collection
- Sitemap & Navigation Hierarchy (Revised)
- Mid-Fidelity Wireframes
- Hi-Fidelity Prototype
Establish Brand Identity
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:
- Create fav icon
- Apply URL image as background in CSS
- Use Floats, Clears, and Fixed as "positioning"
- Use proper headline and paragraph tags
- Create a form of HTML entities
- Format all links (content and navigational)
- Include visited, active, and hover effects
- Create "class" and "id" attributes
- Use HTML and CSS comments
- Use HTML5 Semantic Structure tags
- Use HTML5shiv coding
- Create an unordered or ordered list
- Create a data table
- Include Google Maps
- Include a Pseudo class
- Make page Responsive
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.
- Logo Usage
- Communication Identity
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.
In addition to hi-fidelity prototypes, a series of design specification documents were created to future-proof the website.
This guideline contains information about the overall design system, including font choice, font size, paragraph leading/tracking, and color hex code.
Reusable modules and components are outlined for future use of development. It provide information on fonts, spacing, and color.
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!