Website Redesign

Project Brief

Select an existing website, analyze its content and structure including areas of strength and weakness, and propose a redesign that includes new layout, ui and content in order to make the site more successful.  
STEP 1: SITE CHOSEN AND INITIAL ASSESSMENT  You will work with the rest of your class to develop a heuristic evaluation (or rubric) for a what makes a good website. After selecting your website for the project, you will apply this evaluation and summarize your findings.
STEP 2: PERSONAS, USABILITY AND CONTENT ASSESSMENT Based on work in class, develop 2–3 personas for your site. These personas should be realistic and represent major groups of people who might use the website. Each persona should have a name and an image. You should provide the following information: a background (basic demographics such as education, age, gender, technical ability), context (physical location, relationship to the site, devices used to access the site), attitudes (what is their mood when they are likely to be on the site?), motivations (what does the user need from the site? What are they looking for?), and challenges (what are the pain points on the site? What frustrations might they experience?) of each person who might use your site. In addition, you will perform a usability test and assess the content of the site. You will then draft a summary of key findings from the usability test as well as the assessment. Remember that this will become part of your final project presentation, so draft your summaries in such a way as to make them easy to present.
STEP 3: SITEMAP AND WIREFRAME Design a sitemap for the website that articulates all the pages of the site and how they will be organized. Your sitemap should gather the pages into logical units and groupings that will improve the site navigability. Additionally, craft a wireframe for both the mobile and desktop version of the homepage. The wireframes can be completed by physically drawing them or they may be digitally executed. Focus on clear organization, placing important content high on the page, making elements easy to find, and avoiding elements that don't serve a purpose. Remember that you do not need to fill all areas. Negative space is a good thing. Your homepage wireframe must include a space for a logo, navigation, a call to action, as well as image and text content.
STEP 4: UI KIT AND MOCKUP Create a UI Kit for your site that includes the typographic styling for Heading Levels 1 through 4, paragraphs, a basic color palette, the design of buttons and links (including hover states) and example icons. Though UI Kits typically have many elements, yours will be a small-scaled version and should include a color palette, typographic choices, as well as samples of the link styles and button styles for the site. Use no more than three fonts in your ui kit. Write one to two sentences articulating why your UI kit will serve the site and its purposes well. Focus on clarity, organization and cohesion. Remember that the design should reflect the personality and goals of the site and should be crafted to speak to the audience of the site. Consider whether the site is benefited by a restrained approach, or whether it is geared towards a particular audience that might favor a more dynamic approach. For instance, I would expect a different color palette for a site geared towards families than towards businessmen. It is strongly recommended that you execute your UI Kit and Wireframe in Adobe XD. Once completed, combine your UI Kit and Wireframe to produce a mockup of the homepage.
STEP 5: DRAFT PRESENTATION Bring together all previous items from the project together into a presentation that could be delivered to a client. Below is an example outline for this presentation. You are welcome to adapt this outline to better serve your presentation but it must include all of these elements. 1. Original Site 2. Purpose of the Site and General Audience 3. Personas 4. Key Issues with the Site (based on evaluation, content assessment, and usability test) a. Note that these key issues should be resolved by your redesign. 5. Modified Sitemap 6. UI Kit and Wireframe 7. Mockup 8. Before and After (original site next to final Mockup) Remember that simple design is often best for presentation, keeping your presentation document minimal will allow people to focus more fully on your work itself.
STEP 6: PRESENTATION Based on feedback from Step 5, complete your presentation and submit it online. You will be expected to present your project quickly (you will have three minutes to present). A good idea is to prepare 2–3 short sentences for each slide and say no more than that. Submit your complete presentation document as a PDF through the course site. Be sure the presentation doucment incudes all required elements from Step 5.

Learning Objectives

• Full web design process including user research, concepting, UI/UX principles, and information architecture.
• Research-based presentation skills, making a case for the redesign based on clear improvements that might be made to the site through a redesign.
• Knowledge of simple wireframing, sitemapping, heuristic evaluation, prototyping and usability testing methods.

Deliverables

A final presentation with all stages of the project included, pitched to the class in an effort to make a case for their redesign.

Reflections

The project was a great way to get students exposed to the full redesign process and move away from conversations driven by trend or personal aesthetics and towards conversations focused on the end users of the website. It is most useful at the start of the semester as it lays foundational groundwork and provides an overview that can be returned to and refined through later projects throughout the semester.