progress

line-500Project proposals

UX Design Overview

You’ll begin examining products with the critical eye of a UX designer, diving into why some products are more hands-on than others. You’ll also kick-start the project for your portfolio by researching existing task management apps and evaluating key features.


< UX THINKING >

1. What is UX?
• Understand what user experience design (UXD) is
• Describe the responsibilities of a UX designer

2. User-Centered Design
• Understand the importance of user-centered design and describe major phases, steps, and tasks of UX workflow
• Evaluate best method for gathering user data from a variety of user-centered design methods (interviews, questionnaires, etc.) and describe rationale for choice

3. Interaction Design & Heuristics of Usability
• Identify 10 examples of heuristics of usability in practice
• Apply heuristics techniques to interaction design

4. Design Processes & Methods
• Understand the value of design processes and their respective merits and drawbacks.
• Sketch possible improvements based on the previous analysis.

5. Human Needs & Motivations
• Differentiate human needs and motivations
• Analyze competing apps

line-500

User personasUser Personas

As part of your comprehensive UX portfolio, you will create 3 user personas based on real demographics and an elevator pitch of the product targeting the users’ specific needs.


< COMPETITOR ANALYSIS >

1. Competitor Analysis
• Create a competitor analysis list comparing at least two of Taskly’s competitors, breaking down each competitor’s profile, marketing profile, core business, SWOT profile, UI/UX, content, design, and performance quality.
• Based on competitor analysis, determine Taskly’s industry, potential customers, and potential customer needs that are unmet by current competitors

2. Minimum Viable Product (MVP)
• Develop insights in product development from MVPs of other companies
• Define 3-5 core product features for Taskly MVP and identify early adopters to test Taskly’s MVP

3. User Testing: Surveys
• Create a survey to collect quantitative data in order to validate (or invalidate) customer needs and core features of Taskly’s MVP
• Ensure survey results are representative of the target audience

4. User Testing: Interviews
• Gather and analyze qualitative data from customer interviews to validate or invalidate customer problems
• Refine core features of Taskly’s MVP to reflect insights gained from user research (questionnaires and interviews)


< USABILITY ANALYSIS >

5. User Personas
• Condensing insights from user research, create user personas of target customers based on real people, defining their demographics, goals, values, behaviors, challenges, and other details of their personal and professional background
• Develop Taskly features and functionality around the needs of target customers

6. Business / User Goals & Prioritization
• Develop SMART business goals and SMART user goals for Taskly
• Prioritize Taskly features to meet SMART business goals along with insights from competitor analysis, MVP, and customer interviews

7. Task Models & Customer Experience Maps
• Create a task model for Taskly including description of complex evaluation, controlled evaluation, and direct connection.
• Create a customer experience map for one of Taskly’s user personas, communicating an individual customer’s needs, the series of interactions (core tasks) a customer completes to fulfill those needs on Taskly, and the resulting emotional state the customer experiences throughout the process

8. Content Audit
• Conduct a content audit for at least one of Taskly’s competitor websites

9. Principles of Information Architecture
• Draft information hierarchy model for main tasks of Taskly’s users that organizes website content, shows information relationships, and includes navigation between website content
• Choose best information hierarchy design pattern for Taskly’s users to achieve their goals on the website

10. User Personas
As part of your comprehensive UX portfolio, you will create 3 user personas based on real demographics and an elevator pitch of the product targeting the users’ specific needs.

line-500

Information architectureInformation architecture

To successfully illustrate the technical articulation of your product’s information architecture, you will create a visually appealing and portfolio-ready digital site map for a client.


< CONTENT ARCHITECTURE >

1. Card sort & Site map
• Document and analyze results of card sorting activity to define information architecture for Taskly website, organize site navigation, and improve site flow
• Based on results of card sorting activity, create a site map for Taskly that organizes site content, contains site hierarchy with clearly labeled primary and secondary navigation, including main sections and sub-sections

2. Semantics in HTML5
• Create a basic, unstyled HTML5 page in a text editor using semantic tags to contain and organize site content

3. Copywriting
• Write simple, clear, and reader-focused copy for headlines and paragraphs
• Identify examples of effective and ineffective copywriting and improve upon existing copywriting

4. SEO
• Use Google Keyword Planner in Google Adwords to identify at least 20 of the most commonly searched terms for project management apps
• Prepare SEO driven content for Taskly website

5. Review & Create copy for the project
• Write SEO-driven, user-focused copy for Taskly’s landing page, product page, pricing page, about page, and contact page, using Taskly MVP, site map, lean canvas business model, business goals, user goals, and user personas as resources
• Develop unique brand voice by comparing copy from leading competitor websites and using competitor analysis as a guide

6. Information Architecture
To successfully illustrate the technical articulation of your product’s information architecture, you will create a visually appealing and portfolio-ready digital site map for a client.

line-500

Paper prototypesPaper Prototypes

To effectively exercise your creative and technical skills, you will sketch and refine wireframes with a consistent and user-friendly layout.


< PROTOTYPES >

1. UX Design Principles
• Create thumbnail sketches for communicating user flow for one main feature, as defined by Taskly MVP, such as creating a new task or a new project
• Refine sketches to create pen and paper wireframes for one main product feature that includes description of how users navigate between pages and any interactions or other calls to action (buttons, forms, etc.)
• Design for efficiency by reducing number of steps, reloads, and unnecessary content

2. UX Best Practices 1: Interaction & Usability
• Create pen and paper wireframe that communicate user flow for an additional product feature by applying best UX design practices of accessibility and affordance
• Apply interaction design best practices, including designing for usability, error prevention, touch interaction, and more

3. UX Best Practices 2: Accessibility & Consistency
• Create pen and paper wireframe that communicates user flow for an additional product feature
• Design for clarity, consistency, and accessibility, following best UX design practices for movement, navigation, and more

4. UX Best Practices 3: Content, Copy & Layout
• Create pen and paper wireframes that communicate user flow for an additional product feature by adding copy, considering typography, and providing user feedback
• Apply best design practices for content structure, copy, typography, and user feedback

5. UX best practices 4: Visual Information
• Apply best UX design practices of visual aids to pen and paper wireframes
• Finalize pen and paper desktop prototypes to ensure the same consistency, style, and flow

6. Paper Prototypes
To effectively exercise your creative and technical skills, you will sketch and refine wireframes with a consistent and user-friendly layout.

line-500

WireframesWireframes

With the articulation of user flow in mind, you will create and enhance 10+ digital wireframes and incorporate them in a professional and attractive presentation for a potential client.


< WIREFRAMES >

1. Responsive Design
• Design responsive website for ideal user experience on a variety of screens by applying grid system to desktop, tablet, and mobile sizes

2. Mobile-First Design
• Create mobile version of Taskly using UXPin by applying best mobile-first design practices

3. Tablet Design
• Adapt mobile version of Taskly to tablet version, applying best practices for table design, including horizontal orientation, tapability or “tappiness,” and other common tablet conventions, by using a grid system

4. Desktop Design
• Adapt tablet version of Taskly to desktop version by applying best practices for interaction design on desktop, including additional functionality and external input
• Add whitespace to your layout and improve use of negative space to allow for easier readability, scannability, and prioritization of the most important areas of the site
• Design desktop layout to increase user engagement by applying principles of eye tracking behavior, axis of interaction, and interlaced browsing

5. Front End Frameworks
• Use a front end framework such as Bootstrap or Foundation to layout grids, typography, navigation bars, tables, and other page elements to design responsive web application


< USER FLOWS >

6. Graceful degradation / progressive enhancement
• Describe two different approaches for design in the browser (graceful degradation vs. progressive enhancement) and pro’s and con’s of each approach
• Consider browser types and accessibility in design

7. User flows
• Create user flow that informs users and guides them to complete specified task (i.e. sign up or make a purchase) with InvisionApp
• Design engaging user flows that provide immediate feedback, allow for user discovery, and display clear and attractive calls to action

8. Usability Testing 1: User Processes
• Prepare usability tests by refining wireframes and setting up tests with real and virtual users
• Create detailed user process, based on your user persona, for your users to test

9. Usability Testing 2: Non-Interactive Prototype
Conduct usability tests of non-interactive paper prototypes with users in person, who represent members of target audience or act as your user persona
Synthesize and apply findings from user tests to revise interactive prototype

10. Usability Testing 3: Interactive Prototype
• Test for usability issues in your prototype with real or virtual users
• Identify and improve usability issues and pain points in prototype, based on feedback from user testing

11. Wireframes
With the articulation of user flow in mind, you will create and enhance 10+ digital wireframes and incorporate them in a professional and attractive presentation for a potential client.

line-500

User testingUser testing

In a short and professional presentation, you will share the test data you collected and compare the goal or hypothesis of the test with the results.


< LEAN UX >

1. Lean UX 1
• Apply principes of Lean UX to Taskly project

2. Lean UX 2
• Apply principes of Lean UX to Taskly project

3. Illustrator vs Photoshop
• Become familiar with industry standard design software and understand the difference between vector-based and pixel-based images
• Create basic images, icons, and other UI elements for Taskly website

4. Emotional Design
• Strategize design to help users connect to product in an emotional way on three different levels: the visceral level, behavioral level, and reflective level
• Collect inspiration for visual elements of Taskly to engage users

5. Review
• Make final iterations to digital prototypes, reviewing UX design principles from previous lessons
• Develop visual design board for Taskly including forms, buttons, fonts, colors, and other UI elements based on design inspiration

6. User Testing
In a short and professional presentation, you will share the test data you collected and compare the goal or hypothesis of the test with the results.

line-500

Visual designVisual Design

Using your completed wireframe, you will design every page of a web app and create the user interface of the app.


< VISUAL DESIGN BASICS >

1. Color Palette
• Select the most suitable chromatic palette to effectively communicate your message
• Create brand awareness and strengthen the idea of a unique entity for your website/web application

2. Fonts & Typography
• Choose fonts that are legible, readable, and designed for specific display purpose (i.e. title, sub-title, etc.) to improve user experience
• Choose typefaces to create hierarchy of text, taking into consideration kerning, tracking, line height, font weight, web-safe vs. web fonts, and serif vs. sans-serif fonts

3. Style Tiles
• Create a style tile, a collection of design elements to inform the UI of your website, including fonts, colors, patterns, images, and words that represent the goals of your product
• Professional Level: Present multiple styles tiles to your client and iterate on design based on feedback from your users

4. UI Kit
• Using your style tile as a guide, create a UI kit with a variety of UI elements, such as input labels, forms, navigation elements, icons, and buttons, for all the elements in your web application using Photoshop, Illustrator, or other design software

5. Patterns in design: MAYA
• Apply MAYA patterns to design, balancing users’ expectations of the familiar with new innovations


< UI DESIGN >

6. Visual Hierarchy in web design
• Create visual hierarchy with size, color, density, value, and whitespace to reinforce Taskly’s central message and guide users through user interface of website

7. Art direction in design
• Develop art direction through the use of imagery, colors, photography, and composition to communicate Taskly’s creative concept

8. Design principles 1
• Understand principles for effective user interface design for the web, such as giving precedence to the logo and other important webpage elements, adding appropriate spacing, and designing with development considerations

9. Design principles 2
• Design user interface for user expectations, usability, clarity, and consistency

10. Design Principles 3
• Chunk information so it is easier to remember, use closure to reduce complexity, and consider users’ depth of processing in the user interface design of your web application

11. Visual Design
Using your completed wireframe, you will design every page of a web app and create the user interface of the app.

line-500

A b testing and analyticsA/B Testing and Analytics

Referring to the test results and user feedback you have gathered so far, you will extensively review your design and discuss your findings with your mentor.


< GOOGLE ANALYTICS >

1. User Testing: A/B Testing
• Develop single hypothesis to test using A/B Testing and create variable (i.e. alternate design)
• Conduct A/B testing on website design to determine whether control or variable design is more effective at achieving website goals
• Make data-driven design decisions based on results of user testing

2. User Testing: Click Testing and More
• Run click test, memory test, yes/no test, and other user tests to improve user experience design
• Collect and analyze user data from A/B Test and other tests with statistical confidence based on valid sample size and statistical significance
• Make data-driven design decisions based on results of user testing

3. Google Analytics
• Track and analyze key website and business metrics for an eCommerce site, such as total visits, conversion rates and bounce rates, with Google Analytics
• Gather, analyze, and synthesize user data from Google Experiments (A/B Testing) to improve user experience and workflow of product feature

4. Advanced Analytics
• Create and analyze reports of web analytics from custom dashboards in Google Analytics
• Make data-driven decisions based on website metrics and dimensions to better fulfill business goals and improve user experience

5. Data AARRR
• Apply Acquisition, Activation, Retention, Referral, and Revenue (AARRR) growth model to user experience
• Improve website design to better meet business goals based on website analytics

6. A/B Testing and Analytics
Referring to the test results and user feedback you have gathered so far, you will extensively review your design and discuss your findings with your mentor.

line-500

Production ready productProduction Ready Product

To summarize your final and polished portfolio, you will prepare a short document detailing the design process as well as major milestones of building the app.


< PORTFOLIO AND CV >

1. Polishing your design 1
• Prepare final project with correct specifications, deliverable requirements, actual content, and documentation for designers and developers to begin building your product
• Follow best practices for project documentation, organization, file types, file names, and other conventions for maintaining clear and consistent workflow

2. Polishing your design 2
• Polish your design by adding subtle details, such as one pixel highlights, shadows, gradients, hover and active states, and other effects, and describe rationale for design decisions

3. Portfolio
• Create an interview-ready portfolio on Behance and/or Dribble with selected works and engage with professional design community to get feedback on work

4. Resumé
• Design interview-ready resume including contact information, work experience, and education that promotes your unique brand and showcases your design abilities

5. Marketing Yourself Online
• Use a variety of online marketing practices to gain visibility, convert customers, and gain new clients

6. Production Ready Product
To summarize your final and polished portfolio, you will prepare a short document detailing the design process as well as major milestones of building the app.

line-500

 

Original Article From Here

+ There are no comments

Add yours