Skip to content

Latest commit

 

History

History
81 lines (49 loc) · 3.37 KB

UX-DESIGN.md

File metadata and controls

81 lines (49 loc) · 3.37 KB

User Experience Design

This repository contains instructions and files for two assignments that together comprise the user experience design phase of a web app.

Replace the contents of this file with the completed assignments, as described in:

Prototype

Link to Figma prototype

Site/App Map

App Map

Wireframe

Home Page

Home Page for the RepostBuster Web app. Opening the app will always bring the user here first.

Here the user can either perform a reverse image search or navigate the site via the drop down menu.

Home

When Performing a reverse image search, the user can either upload an image by clicking the "Upload an Image" button or enter the web URL of the image they would like to perform the reverse image search on.

Uploading an Image

This tab pops up when the user selects the "Upload an Image" button. Here the user can select an image on their device to perform a reverse image search on.


Upload Image

Clicking "Next" proceeds the user to the Search Settings page. "Close" closes the current "Upload Image" Tab.

Search Settings

This tab allows the user to select certain search parameters and filters for the reverse image search of the image they chose in the previous tab.


Search Settings

Once the user is ready to perform the reverse image search, they can click the "SEARCH" button at the bottom of the page.

If users want to go back to the previous tab, they can select the "Back" button.

Search Results

Once RepostBuster finishes performing its reverse image search, the web-app will return this results page to the user.

This page will return a naviatable list of all the relevant matches the web-app finds based on the originally uploaded image.

Results

The user will also have the option to download the entire list of results (csv, txt, etc.) or perform another reverse image search.

Menu Navigation

This is the menu navigation drop down that appears when the user selects the menu hamburger on the header. This is the same across the entire site.

Menu Navigation

About Us

About page for RepostBuster.

About Us

Help Center - How it Works

Descibes how RepostBuster works to unfamiliar users in an easy to understand way.

How it Works

Help Center - FAQ

Frequently Asked Questions page for RepostBuster

FAQ

Help Center - Contact

Contact page for RepostBuster

Contact

Our Technology

Describes the Tech-Stack for RepostBuster

Our Technology