Skip to content

Latest commit

 

History

History
103 lines (61 loc) · 4.66 KB

UX-DESIGN.md

File metadata and controls

103 lines (61 loc) · 4.66 KB

User Experience Design

Prototype:

App map:

App map

Wireframes:

Login Screen

User will login in on this page or redirect to register for an account. Header includes a logo to go the trending page when not logged in. All footer tabs redirect to login as they are locked except for the trending tab.

Wireframe

Register Screen

User can create an account on this page by supplying a username and matching passwords or cancel and redirect back to login.

Wireframe

Trending Screen When Not Logged In

This page will show the trending posts with a search functionality that replaces the posts on the current page with the results. Profile picture and username will redirect to user profile who posted that post. Comment and like button will redirect to a page showing details of that specific post.

Wireframe

Post Screen When Not Logged In

Displays details about a specific post with description, number of likes, and comments but user will not be able to like or comment. Poster's profile can be redirected to by clicking on the profile or username.

Wireframe

Profile Screen When Not Logged In

Displays a user's profile information with basic informations about the user and a gallary of their posts that redirects on click. When not logged in, the profile tab on the footer will lead to login screen.

Wireframe

Side Menu When Not Logged In

A side menu accessible from the hamburger menu that only contains a login redirect as other functions are locked until logged in.

Wireframe

Home Screen When Logged In

Similar to trending screen except it shows the posts by people you follow without a search function. The side menu and footer are updated with unlocked functionalities now that the user is logged in. Logo will redirect to his page rather than the trending page when logged in.

Wireframe

Trending Screen Screen When Logged In

Similar to homescreen as clicking on posts leads to page with all functionalities.

Wireframe

Create Screen

Contains a form to create a post with a price slider and image input. Successful creation will lead to the post screen displaying information on the newly created post.

Wireframe

Single Post Screen When Logged In

A screen displaying all information and functionalities of a post which is reached by clicking on a post when logged in. User can like and comment as well as view the profile of the user who posted it. Bookmark icon is unlocked to save a post.

Wireframe

Contact Screen

Contact displays all followers who you can message with their profile being accessible.

Wireframe

Chat Screen

Clicking on a contact on the contact screen will lead to a direct messaging chat system between the selected user and the logged in user.

Wireframe

Profile Screen When Logged In

Similar to profile screen when not logged in except the logged in user's profile is now accessible. All functionalities are unlocked: followers and followings can be viewed and specific users can be followed.

Wireframe

Followers Screen

Displays a list of all users that follows the logged in user with a redirect to their profile when their username or profile is clicked on.

Wireframe

Following Screen

Displays a list of all users that the logged in user follows with a redirect to their profile when their username or profile is clicked on.

Wireframe

Bookmarks Screen

Display a list of all posts that the user has bookmarked with a redirect that post's page and a unbookmark function.

Wireframe

Settings Screen

Here, the logged in user can access their profile, log out, or change the light theme of their app.

Wireframe

Side Menu Screen When Logged In

Side menu that allows logged in user to access all functions including bookmark, settings, messaging, trending, and profile.

Wireframe