See attached for instructions
Laurus College Web Design Program Last Update: 9/03/2021 WDD101: Final Submission Guidelines: Please zip your files wdd101-lastname-final.zip and upload via the assignment link on MLP. Directions: Follow the directions below 1. Your Final Project will see you creating a design document and a re-designed home page for one of the following sites. You may also choose your own if you have a site you’d like to work on · https://www.fsmpl.org/ · https://www.visionquestranch.com/ · http://www.thepuppyranch.com/ · http://coastalbusinessfinance.com/ · http://www.santamariakiwanis.org/ · http://la-picosita.cafes-city.com/ · https://www.k-9pals.org/ 2. Pre-Planning · Visit your chosen site and investigate the available pages and content · Use the design document template below to answer the questions i. What are the major goals/conversions of the site and their KPI? ii. What are some of the “valuable content” on the site? iii. Does the site have a clear audience? What does the site do to appeal to that audience? iv. What is the state of the brand in terms of colors, typography, personality, and other design choices? Is brand personality coming across or does it need work? v. What is the navigation like on this website? Is it consistent and easy to use? vi. What are some additional requirements you think this site might have? vii. What are some of the brand’s benefits? Are brand benefits being adequately highlighted? viii. What is a potential customer journey for the site? ix. Does the site answer the “three questions” within three seconds? 1. Where am I? 2. What can I do here? 3. Where do I go next? · Create a “solution” paragraph as shown in the template. Discuss what changes you suggest and how they will improve the site. · Create a user persona of the websites target audience 3. age 4. gender 5. socioeconomic status 6. occupation 7. hobbies, interests Note: This doesn’t have to be too in depth. A sentence or two for each will suffice. · Create a potential customer journey for the persona as shown in the template · Map out a site tree diagram of your site navigation pages 1. List the pages (or sections if it’s a 1-page site) and the hierarchy of where you want the user to navigate (Home, About, Contact, FAQ, Services, Testimonials…).* 2. Give a brief description of what you want each page (or section) to accomplish. · Create a wireframe for at least three pages of your website redesign. Your wireframe should adhere to the following: 1. Don’t use color, keep it black, white, or gray. 2. Use simple squares and rectangles to describe web sections. 3. Use plain text and font families for any textual content. 4. Use an ‘X’ in a box to denote images. · List your color choices and font-family choices: 1. Choose a primary color 2. and a secondary color 3. and any other secondary colors you feel the site needs. 4. *Limit your colors to two-three--> 1 primary and 1-2 secondary colors 5. Choose 2 fonts: Headline font and paragraph text font 8. Using your site tree, wireframe and style guide create the site in the Wordpress CMS using the Elementor plugin a. Your site must have a header and footer and at least 3 other sections b. Screenshot header, footer and all other sections c. Include your username login in each screenshot Store all files in a project folder to stay organized. Zip up the following files and turn into MLP · Completed Design Document Template · Website screenshots of header/footer and sections 9. On the last day of class we will have brief 2 minute Project Presentations. You can address the follow topics: · What did you learn from this experience? · Throughout this term, do you feel you improved on these skills? · What was the most challenging aspect of the project? · What was the easiest part of the process for you? · What are you particularly proud of in this project? · Could you see yourself using these skills for yourself or have you found an interest in web design? 10. If someone is unable to share their project, said student will be required to write a two page summary of the final included the above mentioned questions. Said written summary can be submitted with the rest of the final project. Good Luck and Thank You! Design Document Website Information · Website Name: · Website URL: · Why you chose this site: The Problem In around 200-400 words briefly describe the UI/UX issues with the current site. Wait and complete this section AFTER you research the site and complete the questions below and summarize your findings. The Solution In around 200-400 words briefly describe your solution to the UI/UX issues in the current site. What will you do to redesign the site? What changes will you be making to the brand? Although we will only be completing the home page, please discuss the site as a whole and what steps you would take to improve the design. You may want to wait and complete this section last. Website Goals What are some of the goals and key performance indicators of the website? Goal Key Performance Indicator (KPI) Valuable Content What are some of the valuable content items on this website? Content Item Description Site Audience What (if any) is the site’s audience? What does the site do to appeal to the audience? Site Brand What is the state of the brand in terms of colors, typography, personality and other design choices? Is the brand personality coming across or does it need work? Why or why not? Site Navigation What is the navigation like on this website? Is it consistent and easy to use? Why or why not? Brand Benefits What are some of the brand’s benefits? Are brand benefits being adequately highlighted? Why or why not? Customer Journey What is a potential customer journey for this site before the re-design? Do you think the journey can be improved? Why or why not? Three Questions Does the site answer the “three questions” within three seconds? Where am I? What can I do here? Where do I go next? Why or why not? Potential Persona Describe a potential user of the website. Include their age, gender, socioeconomic status, occupation, hobbies, interests etc. Feel free to attach a picture if you find one. Why do you think this persona is a good fit for the brand and the website re-design? PERSONA Goals Pain Points · · · · · · · · FIRST LAST Gender: Age: Job: Family: “Quote” Attitude Toward Brand Hobbies · · · · · · · · · · Biography Customer Journey Describe a potential customer journey your persona might make on the website. Remember to consider the site as one step in a larger journey and include other marketing channels such as social media if appropriate. Use the following generic template and describe possible touchpoints you would be creating or repurposing for the re-design. Remember to consider valuable content, call to actions, and your website goals. If you find the table too limiting, feel free to describe the journey as a paragraph instead. Discover Research Compare Decide Task(s) Question(s) Touchpoints Emotions Weaknesses Influences Site Tree Create a diagram of your site’s pages and how they relate to each other. Give a brief description of each page and how it fits into a potential customer journey. If your website is very large, please just choose a selection of six or seven pages or use an example page if relevant. For instance, you don’t need to list every single blog post, just use one as an example. If you create your site tree on paper or in a different program, please take a screenshot and attach it to this word document or as a separate file, whichever makes more sense. Wireframe Create a wireframe for at least three pages of your website redesign. Please ensure that at least one of those pages is the home page you will be creating. Your wireframe should adhere to the following: 1. Don’t use color, keep it black, white, or gray. 2. Use simple squares and rectangles to describe web sections. 3. Use plain text and font families for any textual content. 4. Use an ‘X’ in a box to denote images. Please take a screenshot of each wireframe and attach it below or zip it together with this document as a separate file, whichever makes more sense. Style Guide Colors List and describe your primary and secondary colors. Write a short paragraph below that describes why you kept the brand colors or changed them. Describe how you think the colors enhance the brand. Please include a sample of each color below either as a screenshot or a shape. Fonts Choose two fonts. A paragraph and a headline font. Write a short paragraph below that describes why you kept the brand fonts or why you changed them. Describe how you think the fonts enhance the brand. Please include a sample of each as a screenshot. 2 | Page