Scenario

You work as a freelance UX/UI Designer to offer clients wireframe designs that are based on UX/UI fundamentals and both Android and Apple UI guidelines. This allows you to finalize the vision for clients before the development cycle of their product begins. Your services also include gathering customer data and providing documentation that communicates your design choices. The latter allows clients to understand why specific choices were made along with how the design supports customer needs. You were previously approached with three user stories from different client mobile app design requests:

1. As a grower, I want to view a dashboard that informs me of the moisture content and nitrogen levels in the soil at each of my trees so that I can easily target water use and track nitrogen levels.

You have already selected one of these clients’ proposals and begun the preliminary work that will enable you to complete the design. Previously you identified the purpose and goals of the project, conducted a round of interviews, assessed the target audience, developed user personas, and created the paper prototype.

The client is now ready for you to move forward with work on the digital wireframe design. You will also be writing an explanation of your design to help communicate with your client. Part of this communication will involve an assessment of how the design could be tailored to fit a digital watch or kiosk because your client is considering alternate methods to expand the product.

Directions

You will be working in Lucidchart to create a mobile app wireframe design for the client request you selected. Reference the tutorial on the use of Lucidchart, linked in the Supporting Materials section, for guidance. Remember, at this stage in the project you will also want to consider edits and improvements based on feedback you received from previous milestone work.

Digital Wireframe

1. Develop a layout of different screens for your digital wireframe that addresses the goals of the project. 3-4 screens will be needed for your complete mobile app. These screens must seamlessly work together to allow customers to accomplish their desired tasks. Your wireframe will need to maintain a consistent theme that addresses your client’s goals while also demonstrating an understanding of functional customer priorities. Your design should make intuitive sense for those using the product.

1. Create navigational elements and value-added features in your wirefame. Your wireframe design should include the following:
   • Identifiable navigation buttons to move between screens. Be sure to indicate which elements are clickable and which are not.
   • Descriptors, or labels, for the features that are readable and understandable by the target audience(s)

1. Apply design best practices to your digital wireframe. Refer to the resources linked in the Supporting Materials section to ensure you are considering UX/UI fundamentals, Android UI guidelines, and Apple UI guidelines. Be sure to do following:
   • Use a simple and consistent design in terms of fonts, spacing, colors, and so on.
   • Adhere to Android and Apple UI guidelines for visual design and user interaction, including standard design, navigation, and notifications.
   • Use appropriate symbols, labeling, and spacing.
   • Be error-free in spelling.

Client Communication and Recommendations

1. Explain the rationale behind your design decisions. In this phase of the mobile app design, you will document the justifications for your design choices in order to communicate to your client how your design was strategic and consistent. Your client may not immediately understand your wireframe by only looking at the screen visuals. You will also need to describe the idea behind each of your screens and your design choices. As you write, consider the following questions:
   • What is the purpose and function of each screen in the wireframe?
   • How does your design benefit the customer?
   • What kind of innovative solutions did you develop to adapt to challenges?
   • How did previous research support your decisions?

1. Discuss how your wireframe could be adapted to a digital watch. Select the changes you believe would be most appropriate and explain to your client how the mobile app wireframe design could be adapted for customer interaction on a digital watch. Consider the user personas you developed so you can make more tailored recommendations based on UX/UI. Be sure to reference the Wear OS Overview linked in the Supporting Materials section. You may also consider the following questions while you make your decisions:
   • Does your adaptation offer priority content with a logical series of actions?
   • Does your adaptation make sense for the device? The features should offer added value and match the user’s goals and experience for the device.
   • How will you adhere to design best practices for wearables? For instance, is your design holistic, glanceable, easy to interact with, and time-saving?

1. Discuss how your wireframe could be adapted to a touch-based kiosk. Your process and the questions you ask yourself when designing for an interactive touch-based kiosk, with a large stand-alone display, will be similar to the work you just completed for the digital watch. Refer to the Design for Android and Apple Human Interface Guidelines, linked in the Supporting Materials section, and use these to recommend how you could adapt your mobile app design for customer interaction on a large kiosk display. Even if your kiosk is not specifically an Android or Apple product, the best practices guides have been standardized in a way that makes your continued use of them very valuable regardless of the system. When designing, you should also think about your user personas so you can be certain their goals are supported by your designs. Ask yourself the following questions as you make your decisions:
   • Does your adaptation offer priority content with a logical series of actions?
   • Does your adaptation make sense for the device? The features should offer added value and match the user’s goals and experience for the device. Consider the implications of screen orientation.
   • How will you use design best practices? For instance, does your design follow the guidelines for large screens in terms of navigation, focus selection, and touch screen?

What to Submit

To complete this project, you must submit the following:

Digital Wireframe
Complete your digital wireframe design in Lucidchart and then download and submit it to the Learning Management System. Your design should be comprised of 3-4 screens.

Client Communication and Recommendations
Your submission should include all of your explanations in a Microsoft Word document that is 2-3 double-spaced pages.

Supporting Materials

The following resource(s) may help support your work on the project:

CS Lucidchart Tutorial
This tutorial will show you how to create a Lucidchart account, as well as how to create different types of documents and diagrams.

Design for Android
This website details the material design guidelines for visual and navigation patterns and details the quality guidelines for compatibility, performance, security, and more.

Android User Interface and Navigation
Your app’s user interface is everything that the user can see and interact with. Android provides a variety of pre-built UI components such as structured layout objects and UI controls that allow you to build the graphical user interface for your app. Android also provides other UI modules for special interfaces such as dialogs, notifications, and menus.

Apple Human Interface Guidelines
This resource contains information and UI resources for designing apps that integrate seamlessly with Apple platforms, including the Apple watch.

Apple UI Design Dos and Don’ts
Consider these common design concepts to enhance the usability and appeal of your app, including contrast, text size, touch controls, format of content, and more.

Wear OS Overview
Designing apps for wearables is substantially different than designing for phones or tablets. There are different strengths and weaknesses, different use cases, and different ergonomics to take into consideration. Use this resource when considering best practices for wearables.