Course-Project

Course project assignment

UX Design and Photoshop

• Each team have to improve the UX and Design of a part of http://ui.telerikacademy.com

  • The parts are as follows:
    • Landing page and User profile page:
      • Home page http://ui.telerikacademy.com/
      • User profile page http://ui.telerikacademy.com/users/DonchoMinkov
        • Both for public users and the users themselves
      • Better UX and design of the Navigation
      • Better and more beautiful way to show urgent messages to users
        • Examples: "Трябва да си изберете група", "Имате нови приятелства"
      • Both for public and authenticated users
    • Courses:
      • Courses list http://ui.telerikacademy.com/Courses/Courses/List
      • Course Details http://ui.telerikacademy.com/Courses/Courses/Details/383]
      • Better UX and design of the Navigation
      • Better and more beautiful way to show urgent messages to users
        • Examples: "Трябва да си изберете група", "Имате нови приятелства"
      • Both for public and authenticated users
    • Forum:
      • Forum home http://ui.telerikacademy.com/Forum/Home
      • Forum post http://ui.telerikacademy.com/Forum/Questions/200668/%D0%98%D0%B7%D0%B1%D0%B8%D1%80%D0%B0%D0%BD%D0%B5-%D0%BD%D0%B0-%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-2016-2017-%D0%BF%D1%80%D0%BE%D0%BB%D0%B5%D1%82%D0%B5%D0%BD-%D0%BF%D1%80%D0%B8%D0%B5%D0%BC
      • Better UX and design of the Navigation
      • Better and more beautiful way to show urgent messages to users
        • Examples: "Трябва да си изберете група", "Имате нови приятелства"
      • Both for public and authenticated users
    • Materials:
      • Each materials page must show demos, slides, videos
      • Example: merge the following pages:
        • Slides page: http://ui.telerikacademy.com/Courses/LectureResources/Presentation/9107
        • Videos page: http://ui.telerikacademy.com/Courses/LectureResources/Video/9113
      • Better UX and design of the Navigation
      • Better and more beautiful way to show urgent messages to users
        • Examples: "Трябва да си изберете група", "Имате нови приятелства"
      • Both for public and authenticated users
    • Initiatives
      • Initiatives page - create a page, where all Telerik Academy initiatives are listed, and there is a brief description of Telerik Academy
        • This is a brand new page
        • Both for public and authenticated users (if it is applicable)

• Bonus tasks

  • You could make any number of additinal pages by your choice

• For each of the tasks you should use the style guide provided in the folder StyleGuide.psd/StyleGuide.png

Task 1: UX

• Improve the user experience of part of http://ui.telerikacademy.com
  • Improve user interaction
  • Improve information architecture
  • Improve the UX for mobile devices

Task 2: Design

• Build a new design based on http://ui.telerikacademy.com
  • You can reuse existing components
  • You must limit to the colors from this palette

Task 3: Prototype

• Create a simple static prototype using HTML & CSS

Criteria

• Whole project
  • A straightforward and understandable user flow.
  • Clear information architecture, visible through the main navigation. Navigation is displayed in a usable way for mobile.
  • Clear labels and microcopy.
  • Consider responsive layout rearrangement for mobile.
  • Clear affordance for the elements – e.g. buttons, links, etc. Displayed interaction states of the elements and screens.
  • Clear primary actions for the pages or page sections.
  • Low interaction cost.
• Photoshop files
  • Correct unit type must be used e.g. pixels
  • Files must be well organized and structured e.g. proper layer names; good use of groups
  • Use layer comps, if applicable
  • Try to use layers based on types e.g. fill of gradient layers instead of raster layer with color overlay / gradient overlay
• Prototypes
  • Not built with tables
  • Built without using absolute position (absolute position can be used, but not for everything)
  • Responsive means having one page that adapts, no several showing different viewports

UX Design

• Requirements
  • Define the goal of the pages you are about to design. List all goals if more than one and order them by priority.
  • Based on the goal in p.1, create a workflow diagram showing the tasks a user must accomplish within the system. Tasks must be in a sequential order, grouped by scenarios if more than one is available. Show conditional logic if available – e.g. if user is logged or not logged.
  • Structure and mock up the main site navigation, including the fly-out menus (if you use ones). Consider a specific layout for the responsive view for mobile.
  • Create low fidelity wireframes for the pages and link them together in a prototype. Consider responsive layout rearrangement for mobile. You can use a prototyping tool of your choice (e.g. Axure, UXPin, InVision, Balsamiq, Justinmind, other; or plain HTML; or even paper prototypes that are scanned and linked together).
  • Your wireframes, and particularly your final project, must comply with the 10 usability heuristics. The more boxes you check - the better. Apply techniques discussed during the lectures for information architecture, interaction design, UI design, mobile design.

UX Task Deliverables

• A short summary of the goal of the designed pages
• A workflow diagram
• Low-fidelity wireframes stitched in a clickable prototype, including the main navigation. Draft the layout for the navigation in mobile too.