UI/UX design and development

User Generated

Wbfrcu9710

Computer Science

Southern New Hampshire

Description


Scenario

Kiva is very pleased with the way you have gotten to know their needs and customer base; now they are ready for you to take the next steps! They need you to create a digital wireframe for the Kiva borrower’s interface, explain your design decisions, and make a plan for development of a cloud-based system in service of Kiva’s lenders. Recall that Kiva crowdfunds loans and unlocked capital for the underserved, improving the quality and cost of financial services and addressing the underlying barriers to financial access around the world, so your understanding of work in this space is very valuable.

Previously, you explored Kiva’s Data Snapshots page and analyzed the data found in the Kiva Snapshots CSV file that was provided. This allowed you to start considering how you would address the following two user stories:

  1. As a Kiva borrower, I want to access information about Kiva and about borrowing from Kiva with my flip-phone (which is an embedded device), so that I can stay informed, request loans, and track my loan payback process.
  1. As a Kiva lender, I want to explore borrower requests, analyze my and others’ lending data, and follow borrower loan payments (in a cloud application) so that I can forecast how I will loan funds and plan the recycling of previous paid funds.

You will continually reference these user stories, along with the work you have already completed, as you develop the wireframe for the UI design of the embedded system and a plan to build the cloud application using UI and UX best practices.

Directions

Your wireframe should be completed in Lucidchart. You may reference the CS Lucidchart Tutorial, linked in the Supporting Materials section, while you are creating your designs.

As you work, keep in mind that the Kiva website only has general information that allows borrowers to fill out an application and lenders to explore options for individuals they can lend to. However, the design you create is going to be informed by your own data and user story analysis. This means it will be more detailed in the way it displays Kiva’s provided information and will be organized to serve your specific users. The research you already completed will have opened up new options for functionality, such as ways for users to monitor projects, share projects with friends, or use any number of other features you might decide are important for your application.

Borrower Embedded Digital Wireframe

  1. Create appropriate features for your digital wireframe to address the goals of the project. Design a wireframe for the entry page of your embedded system and one secondary page that addresses borrower priorities and goals. Your design should be expressive, accessible, and intuitive, with suitable interactions given the user stories and system limitation considerations. Your wireframe should accomplish the following:
    • Identify all necessary features.
    • Include realistic content.
    • Present information in a visually appealing way that is consistent.
    • Enhance the user’s comprehension of the data that is accessed.
  1. Create clear navigation and actions for users of your wireframe. Your wireframe design should indicate clear actions and flows that apply to the needs of the customer. Ask yourself the following as you design:
    • How should users move through interactions with an individual screen in the design?
    • Is user navigation between screens intuitive?
    • Is it clear which elements are “clickable” and which are not?
    • Have you considered the impacts of screen orientation?
  1. Apply design best practices to your digital wireframe. Think about the many best practices in design principles for UX/UI that you could employ as you complete your design. The references linked in the Supporting Materials section can provide useful, comprehensive guidance on these best practices. Be sure to pay particular attention to accomplishing the following:
    • Adhere to Android and Apple UI guidelines for visual design and user interaction.
    • Use consistent elements in typography, color, spacing, and so on.
    • Be error-free in spelling, symbol use, labeling, and spacing.

Explanation and Lender Cloud-Based System Recommendation

  1. Explain the rationale behind your design choices. Clients may not immediately understand the utility and intent behind your wireframe design when looking only at the visuals you provide. You will also need to be able to discuss the design choices you made and the concept behind each element and screen. Use the following questions for guidance as you justify your choices.
    • What is the purpose and function of each element and screen in the wireframe?
    • How does your design benefit the borrower?
    • How does your design benefit the customer (Kiva)?
    • What kind of innovative solutions did you develop to adapt to challenges?
    • How did previous research support your decisions?
  1. Recommend how your design could be adapted for a cloud-based system. Now it is time to transition from thinking about the borrower persona to thinking about the lender persona. Consider their different needs, but also where there is overlap in the kinds of content they might want to access. Describe what next steps you recommend for planning and building your lender cloud application. Note that you will not actually be building a cloud application. Consider the following in your recommendation:
    • How can you ensure your design will align with the Kiva business vision and mission?
    • What kind of communication between application components is necessary, based on the priorities that you have previously assessed?
    • How can you optimize communication among the different components?
    • What are the varied goals that different kinds of lenders might have?

What to Submit

To complete this project, you must submit the following:

Borrower Embedded Digital Wireframe
Complete your digital wireframe design in Lucidchart and then download and submit it to the Learning Management System. Your submission should include a Lucidchart wireframe of the entry page and secondary page for your embedded system.

Explanation and Lender Cloud-Based System Recommendation
Your submission should be formatted as a Microsoft Word document that is 2–3 double-spaced pages in length. Include your explanation of the digital wireframe you created along with a recommendation for the cloud-based system.

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.

User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

View attached explanation and answer. Let me know if you have any questions.

kiva Lending App Wireframe Diagram
|

Carrier

11:27 AM

Carrier

11:27 AM

Carrier

11:27 AM

Back

Next

Carrier

Back

Back

First name

KIVA Lending App

11:27 AM

Loan Status

clickable
Middle Name

Last Name

Social Security No.

Gender

Apply Loan

Enter Phone no.

+XXX

Clickable

Reason for Application
Exit

Payment Plan
Next

Location

Give Loans

Clickable

Carrier
Carrier

11:27 AM

Carrier

11:27 AM

11:27 AM

Back
Back

Back

Loan Application Status
Applicant Bio

Applicants Name

Location

Applied Amount

Interest Rate
Lender Number

Confirmation Number
Payment Plan
Clickable

Proceed

Exit
Reject

Authorize

Clickable

Clickable

View attached explanation and answer. Let me know if you have any questions.

Outline:Explanation and Lender Cloud-based System Recommendation
Rationale behind the design
❖ The wireframe design is based on the SF
❖ The icons are used as intended to avoid confusing the users.
❖ When a borrower is using the app, he or she would enter the phone number which is
unique to every user and click next icon.
❖ He enters the details of the personal profile such as the name, the ge...


Anonymous
Really great stuff, couldn't ask for more.

Studypool
4.7
Indeed
4.5
Sitejabber
4.4

Similar Content

Related Tags