Design a UI for the User and User Flow (Mobile Only)

Redesign and improve the UI and the user flow and improve three screens from these established startup companies using the company's existing assets (artwork, graphics, logo). Please note this is not a branding exercise. for the following screens: 1) The home screen 2) The products and or services screen 3) About us

MOBILE VERSION ONLY

List of 5 sites Choose one site only, and it must be from this list only:

MyChopChop

Click Here To Visit

Dana Shortt Gourmet

Click Here To Visit

ApplyBoard

Click Here To Visit

SkyNed Consult Click Here to Visit Grand River Transit

Click Here To Visit

START with the initial Deliverable 1 of this assignment

Deliverable 1 - Topic Pre-Approval to justify your selection - and upload the text document for pre-approval to the correct assignment folder (non-graded).

Using MS Word or a text document, state the topic pick, and define in two sentences what you plan to do to improve the user interface (UI) and the user flow (UX).

Upload your document to the assignments A1 "approval non-graded folder," email me at the same document for approval, and include this in the subject line: DSGN8290-# A1 Approval Request.

Remember, A1 must be approved first and submitted in the designated A1 approval assignment folder before starting your project - A1 approval is submitted due date on the Instructional Plan.

Deliverable 1 - 1 Page - Text Word Pre-approval document - must be approved by your professor before (as per the above statement) starting assignment 1

Before starting Deliverables 2 and 3, see Deliverable 4 about recording yourself - designing your work and explaining your processes.

Deliverable 2 - Wireframe Sketch by Hand of each screen, then scan or take a cell phone photo of the sketch for submission. Name properly - A1 YourName-Hand Sketch.jpg.

Check out these hand-sketching wireframe videos below.

Deliverable 3 -

Three screens in Hi-Fi Prototype mode and created in XD of your Final Design (MOBILE ONLY) in 1 XD file, which contains the three linked artboards. (Change the titles of the artboards to Home and Products/Services and so on)

In XD, link/wire the named artboards in Prototype mode. Using an activated artboard, click on the blue dot on the right-hand side and click, hold, and drag the wire over the second artboard. Link/wire the logo to go back to the homepage using the properties panel >ACTION> Designation > Home In XD, go to file>export the 1 XD file as .pdf, including all artboards. SIZE: Mobile Only iPhone 13, 12 Pro Max in 1 XD file 2X screen depths of both screens. 428px Height X 1852px Depth (the depth can be longer)

Using a UI Kit is allowed; however... it must be fully customized and pass the criteria below

Deliverable 4 - You must Video record to document your design thinking and work processes for both types of wireframes, Lo-Fi and Hi-Fi.

Provide video links to the recordings (record using Teams or Zoom). Record yourself in action - while you are working and designing. Explain the changes/design improvements for the user while working and going through the design process. Record your screen while designing your Wireframe Hand Sketch and the Final Design High Fidelity UI designed in XD. Helpful links Designing with XD Prototyping with XD Jumpstart Kits

Design/Thinking Process Diagram Design Thinking Process Graphic

Topic Pre-Approval: Before you begin working on your assignment, you must get your selected topic approved by your instructor. In 1 to 2 sentences, please identify your intended topic for this assignment, and submit it to the PRE-APPROVAL FOLDER found in the Assignments tool.

Please note: You must submit your topic for approval by the date identified in the Instructional Plan. Assignments submitted without prior topic approval will not be graded, and you will receive an automatic zero (0) on this grade item.

Grading Criteria Assignment 1 will be graded on the following criteria:

Colour Contrast (Accessibility) Ensure your foreground(text) colours contrast against your background colours Use the WebAIM colour checker to verify your colours meet accessibility standards http://webaim.org/resources/contrastchecker/ Tip: If the background has more than one colour, use the Photoshop colour picker to sample the darkest area to make sure the text is legible against all background shades Layout Design Your text and graphical elements should 'work' together to create a unified message (e.g., colour, imagery, and font should work together and not confuse the message)no Filler Text, Lorem Ipsum text, use actual text from the topic, use high-resolution photos and graphics for the Hi-Fi Prototype. Make sure not to bunch your elements together; use spacing and alignment appropriately. Good visual hierarchy - by laying out elements, typography and images, and buttons logically and strategically to influence users' perception and guide them to desired actions. Technical Elements Use Adobe XD to create a subtle yet eye-catching user-friendly UI/UX design. Do not use PC/MS fonts; use Creative Cloud Adobe Fonts

Requirements : Have the named project final files uploaded to the Assignments tool by the due date Review the client requirements to make sure you have included all aspects Overall Appeal and Originality Use your creative skills to create a unique and compelling design Keep in mind your target audience while trying to appeal to the greater audience Tip: Have a family/friend/colleague/classmate give you an honest critique!