Week 9: Cross-Platform Form Design

Objective:

Design a user-friendly form for two different platforms, converting an existing form from one platform to another while adhering to each platform's design guidelines.

Overview:

You are tasked with converting an existing form designed for iOS to an Android platform (or vice versa). This exercise will help you understand the nuances of different platform design guidelines and how to adapt a user interface to maintain usability and consistency across platforms.

Steps to Complete the Assignment:

1. Select an Existing Form:

   • Choose a form from a real application designed for one platform (e.g., an iOS app form for user registration, feedback, or checkout process).

2. Analyze the Original Form:

   • Document the form elements, layout, interactions, and visual design.
   • Take screenshots of the original form and annotate key elements such as input fields, buttons, labels, error messages, etc.

3. Research Platform Guidelines:

   • Review the Human Interface Guidelines (HIG) for iOS and Material Design Guidelines for Android. Links are provides in this week's module.
   • Focus on sections related to forms, input fields, buttons, error handling, and overall visual design.

4. Leverage Figma UI kits available in Resources: Apple and Android recently released UI kits for Figma that can be added to your files and used to ensure compliance with platforms. Make use of this huge asset for your visual designs.

5. Convert the Form Design:

   • Using Figma create a converted version of the form for the target platform.
   • Ensure that you adhere to the target platform’s guidelines regarding typography, color schemes, spacing, and component usage.

6. Annotate and Document Design Decisions:

   • Write a brief explanation (300-500 words) of the design decisions you made during the conversion process.
   • Highlight how you adapted each element to fit the target platform’s guidelines and why you made certain design choices.

Deliverables:

1. Annotated screenshots of the original form.
2. Converted form design in the target platform’s style.
3. Design decisions notes or documentation (300-500 words).

Grading Criteria:

• Adherence to Guidelines(50%): How well does the converted form follow the target platform’s design guidelines?
• Usability & quality of Visual Design(30%): Is the converted form user-friendly and intuitive? Does the converted form maintain a consistent and visually appealing design?
• Documentation(20%): Are the design decisions clearly documented and well-explained?

Submission:

• Following Tuesday by 12pm
• Submit all deliverables in a single Figma file page. Provide a link to your page or section. Make sure your file has your cover.