-
Create an issue on the Github repository and assign it to yourself or inform the admin on the contributors group telegram to help you with the process
-
Clone the repository and checkout to a new branch
-
Click this figma link and request for edit access
-
add your design contribution to the figma file, please create a new page on the figma file if your design requires one
-
Add your name and contribution description below, save and push to your new branch
-
Create a pull request to develop branch.
-
When you create your pull request ensure you indicate the issue number your pull request is closing
-In this section, these are the following: The corrct and up-to-date section which is clickable has been merged into one click to contain pop up info on why it is necessary to keep to correct product description and the cons of failing to do so. The up-to-date section would also remind users of the need to constantly flag products as unavailable or sold inorder to improve consistent trust and reliability of the platform. Failure of sticking to the company policy of trust would lead to getting products flagged by users and suspension/deletion by admin from the platform also attached a scroll bar to remind the developers of a screen being scrollable with a fixed side navigation. -----Main Goal -- Improved UX
-In this section, these are the following: The View and Edit page has a primary button highlighted which has a delete action and also found at the buttom of the screen Using a mobile first approach users who make changes to their profile are required to always scroll to the top of the screen before exiting the page and this affects the user experience The key primary button on the page might also lead to users having mislead interactions with the delete button as based on UX laws of similarity they would automatically group the button at the end of the form to the form The button also being the only highlighted button seems to encourage an action which doesn’t aid the core functionality of the screen -----Main Goal -- Improved UX
- I researched and came up with the overall userflow using FigJam for the open source project, which is an e-commerce platform for techies. -----Main Goal -- Userflow
- Using the research result and the design brief, Ayomide and I came up with a design style guide which included Logo, Colors, Typography, Iconography, Form fields, Buttons and Alerts for desktop, tablet and mobile screens.
- The importance of the style guide is to ensure consistency throughout the design. -----Main Goal -- Design Style Guide
- Using the style guide, userflow and design brief, Ayomide and I designed a fully responsive landing page for the platform.
- The landing page consists of the following sections:
- A hero section that tell users what the platform is about in a sentence.
- A section that tells users the benefits of using the platform.
- A section that breaks down the process of purchasing a product.
- A similar section that explains the process of selling a product.
- A section that shows popular products available on the platform.
- A client reviews section
- Lastly the footer section
-----Main Goal -- Landing Page Design
- Using the agreed brand tone and voice, I worked on the improving the UX writing of the landing page.
- Improved the UX writing for the navbar.
- Improved the UX writing for the 'create an account' button.
- Improved the UX writing for the heading.
- Improved the UX writing for the sub-heading.
- Improved the UX writing for the 'buy an item now' button.
- Improved the UX writing for the 'sell an item now' button.
- Improved the UX writing for the 'why techmart' section.
- Improved the UX writing for the 'why techmart' sub-heading.
- Improved the UX writing for the best quality card.
- Improved the UX writing for the 'buy items' sub-heading.
- Improved the UX writing for the create an account card.
- Improved the UX writing for the 'list & sell items' section.
- Improved the UX writing for the 'list & sell items' sub-heading.
- Improved the UX writing for the create an account card.
- Improved the UX writing for the 'Stay up to date' section.
- Improved the UX writing for the 'Stay up to date' sub-heading.
- Improved the UX writing for the 'Client reviews' section.
- Improved the UX writing for the 'Client reviews' sub-heading.
- Improved the UX writing for each review card.
- Replacement of Logo with correct brand logo(footer)
-----Main Goal -- Landing Page UX Writing
- I worked on the alignment and hierarchy of the landing page
- Improved the Create an account button placement within the margin and the navigation content was center aligned.
- Improved the arrow in the text button in was changed from a decimal to a whole number, because decimals are not advised in designs to ease the work of developers when implementing the design.
- Improved The arrow underneath the text from decimal to a whole, and made to have consistent height and width.
- Improved the user flow, there is meant to be a “wishlist icon” not “an add to cart icon” because this a P2P platform where there is no form of payment to be done on the app.
- Improved the contents in the footer were changed to be properly aligned with the margin.
- Improved the logo in the footer from “Martz” to “techmart”
-----Main Goal -- Landing Page Alignment and Visual Hierachy
- I and Nora designed the responsive authentication screen for the platform comprising of create account, email verification, KYC form and Phone number verification.
- I and Nora made sure the design complied with the style guide.
- I and Nora changed the old brand logo (Martz) with the new logo (techmart) to ensure consistency with other screens.
- I and Nora worked on the alignment of the screens to ensure it complied with the grid.
-----Main Goal -- Responsive Authentication screen design.
- Ayomide and I designed the responsive authentication screen for the platform comprising of Sign In, forgotten password and Recover Password flows.
- Ayomide and I made sure the design complied with the style guide.
- Ayomide and I changed the old brand logo (Martz) with the new logo (techmart) to ensure consistency with other screens.
- Ayomide and Iworked on the alignment of the screens to ensure it complied with the grid.
-----Main Goal -- Responsive Authentication screen design (Sign In, forgotten password and Recover Password flow)
- I improved the UX Writing for the Authentication screens working with the brand tone.
- I improved the UX Writing for the Sign up screens.
- I improved the UX Writing for the Know Your Customer (KYC) screens.
- I reviewed the changes I made with my team and iterated accordingly.
-----Main Goal -- Seamless User Experience using effective UX Copy
- Ayomide and I designed the side navigation for the user dashboard to allow for easy navigation through the whole interface.
- Ayomide and I designed the user dashboard that shows the available products for sale.
- Ayomide and I made the user dashboard: home design fully responsive that is, the desktop, tablet and mobile views was created.
- Ayomide and I used the colors and typography on the style guide to ensure consistency.
-----Main Goal -- Design of Side Navigation and Home Page of User Dashboard
Description: I Improved The UX Writing On The Authentication screens(login, Forgot Password screens)
- I improved the UX writting for the login screen
- I improved the UX writting for the forgot password
- I worked hand in hand with Latefaat Salaami to improve the overall UX writting on the authentication screens.
-----Main Goal -- Easy to understand UX writting.
- I created the layout of the Terms of use screen and made it fully responsive
- I created the layout of the Privacy policy screen and made it fully responsive
-----Main Goal -- Responsive Terms of use and Privacy policy screen design
- I designed the pop up to view details of a product and made it fully responsive
- This was to give the user more information about a product they are interested in.
-----Main Goal -- Responsive and simple Product description Pop up for User dashboard
- I wrote a well drafted and well researched privacy policy statement in line with the project's goals and intended scope of operation.
- I concisely defined the concept of "cookies" to further aid the users' understanding.
-----Main Goal -- explanatory and easy to understand privacy policy statement.
- This screen enables users to be able to see the products they have uploaded for sale.
- On this page, users can mark products as unavailable and permanently delete uploaded products
- Nora and I designed an empty state page - a page that indicates that the user has not uploaded any product and a button to prompt the user to add a new product
- Nora and I designed a filled state page - a page that shows the list of uploaded products by the user.
- We added a more option button with two options: "edit details" and "mark as unavailable"
- Nora and I made the design fully responsive (desktop, tablet and mobile views were created).
- Nora and I used the colors and typography on the style guide to ensure consistency.
—— Main Goal — Fully Responsive Design for View Uploaded Products Screen on User Dashboard
- I designed a responsive product upload screen for both empty state and filled state.
- The product upload screen comprised of;
- Input field with a drop down menu for product category
- Input field for product name
- Input field for product price
- Input field with a drop down menu, if a product is available for swapping
- Input field with a drop down menu for product condition
- Input field for product description
- A plus icon to upload a maximum of 3 product images
- An upload now CTA (Primary button)
- Also design a product update successful pop screen, which will comprise of;
—— Main Goal — Responsive Design for the User dashboard (Product upload page)
- This screen provides help and support to the users.
- I designed a Frequently Asked Questions Accordion that comprised of possible questions users may have and the answers to every question.
- I designed a section that provides extra support incase the user still has more questions.
- My design was fully responsive (desktop, tablet and mobile views must be created).
- I used the colors and typography on the style guide to ensure consistency.
—— Main Goal — Responsive Design for the User dashboard (Help & Support)
Observation/Changes: The message feature ordinarily facilitates the sending and receiving of messages between users and between admin and users.
- I designed the message screens that allow users to send a message to the seller of a product they want to purchase.
- I designed the message screens that allow users to send a message to the the admin in deserving circumstances.
- I designed an empty state page to indicate to a user that they have not sent or received any messages.
- I designed a filled state page to show t the user all the messages they have sent and received so far.
- The designs were made with responsiveness in mind- there are desktop, tablet and mobile screen designs.
- To ensure conaiatency, I made use of the colors, typography and icons on the style guide.
—— Main Goal — To enable users interact with themselves and enable users interact with the admin.
Description: Improve UX writing of Help and Support and Frequently Asked Questions on the User dashboard.
- I brainstormed and came up with frequently asked questions with respect to the particular services to be rendered by the platform.
- I came up with relevant answers to the frequently asked questions, in line with UX writing principles and standards.
- I ensured that the questions and answers are straight to the point and sufficient to meet the needs of any user.
—— Main Goal — To enable users seek quick answers to frequently asked questions they may have at any point in time.
- I drafted and formulated the legal policy statement of the brand in line with applicable legal standards.
—— Main Goal —To enable users know their rights, obligations and the legal poicies that guide them as they make use of the platform.
- I designed the search result not found screen and made it fully responsive
- This was to give the user feedback about a product that is not available on the site
-----Main Goal -- Responsive Search Result not Found Page for the User dashboard
- I designed the search result screen and made it fully responsive
- This was to show the user results of products being searched
-----Main Goal -- Responsive Search Result Screen for the User dashboard
- I designed the wishlist pages for the responsive screens of the platform
- I designed the empty states of each screens across the platform responsively
-----Main Goal -- Improved User interface Responsively.
- I designed the select and delete product pages for the responsive screens of the platform
- I designed the dropdown for the select/delete state.
-----Main Goal -- Improved User interface Responsively.
- I designed the notification popup screen of each of the screens responsively
- I designed the empty state of the screen across the platform responsively.
-----Main Goal -- Improved User interface Responsively.
- I designed the profile page of the user and this has to do with designing display name, display picture, account details, reset password, delete account popup e.t.c.
- This design was doe responsively across the platform starting from the desktop, tablet and mobile screens .
-----Main Goal -- Improved User interface Responsively.
- I made sure that every color used in the design screen was accurate and applied consistently throughout the entire design.
-----Main Goal -- Improved UI Color Consistency
- I made sure that every component and element used in the design of the User Dashboard screens was accurate and applied consistently throughout.
- I corrected elements where there were mistakes and errors in the design of the User Dashboard Screens.
-----Main Goal -- Improved UI Visual Balance and Consistency
- I replaced the logo of the user dashboard screens (mobile view) to the correct logo.
- I improved balance on the user dashboard screens (mobile view) by ensuring all elements were used according to the style guide and aligned properly.
-----Main Goal -- Improved UI Balance and Consistency
- I designed the pop up for product upload failed to let users know that the product they tried to upload failed
-----Main Goal -- Improved UX, UI Design
- I made corrections to some design elements: the dropdown arrow, the color of the delete button and also the text in the alert in the User Dashboard - Wishlist screen
- I also made adjustments and alignments to some elements.
-----Main Goal -- Improved UX Writing, UI Design
- I made corrections to the elements on side navigation of the tablet view cause all were in the same color which makes it difficult to know the screen you are on.
-----Main Goal -- Improved UI Design
#Description: Admin user flow
- We designed the admin user flow on Figjam after we've conducted our research.
-----Main Goal -- Creation of Admin user flow for improved user experience.
#Description: Addition of Side Navigation for User Dashboard - Mobile
- I designed the side navigation for the mobile screens on the user dashboard to ease navigation for users.
-----Main Goal -- Improved User Experience, UI Design
#Description: Addition of Search Input Fields on User Dashboard - Tablet and Mobile View
- I added search input fields for the tablet and mobile screens on the user dashboard to make the user journey shorter when they need to search for anything
-----Main Goal -- Improved User Experience, UI Design
#Description: Design of Side Navigation for Admin Dashboard - Desktop
- I designed the side navigation for the desktop screens for the admin dashboard to ease navigation for the admins
-----Main Goal -- Improved User Experience, UI Design
#Description: Design of Side Navigation for Admin Dashboard - Tablet
- I designed the side navigation for the tablet screens for the admin dashboard to ease navigation for the admin
-----Main Goal -- Improved User Experience, UI Design
#Description: Design of Admin User groups- Desktop
- I designed the admin user groups for Desktop view
-----Main Goal -- Improve the Admin Experience while navigating through the dashboard
#Description: Design of Admin User groups- Tablet
- I designed the admin user groups for Tablet view
-----Main Goal -- Improve the Admin Experience by designing a responsive screen for the tablet view
#Description: Design of Admin User groups- Mobile
- I designed the admin user groups for mobile view
-----Main Goal -- Improve the Admin Experience by designing a responsive screen for the mobile view
- I designed the desktop view of the admin dashboard
- The dashboard comprises of the analytics chart, the statistics section( which includes the total user of the platform and the total products uploaded on the platform), the top user section and also the recent uploaded product section
-----Main Goal -- Simplify the informations that is being reviewed on the admin dashboard for easy processing
- I designed the mobile view of the admin dashboard
- The dashboard comprises of the analytics chart, the statistics section( which includes the total user of the platform and the total products uploaded on the platform), the top user section and also the recent uploaded product section
-----Main Goal -- Simplify the informations that is being reviewed on the admin dashboard for easy processing
- I designed the mobile view of the search results of admin dashboard
- I designed the empty states and filled states of the search results for the admin dashboard
-----Main Goal -- Present admins with a quick overview of products and users
- I designed the mobile view of the delete products of admin dashboard
- I designed the first screen, which is a pop up screen displaying the following details:
- a write up that confirms the action
- a "yes, proceed" button
- a "no, cancel action" button I designed a second screen which is an alert screen that confirms that the deletion process is successful
-----Main Goal -- Design a responsive and easy to navigate delete product flow for the admin
- I designed the first screen which is a pop up that displayed the following details:
- a write up that confirms the action
- a "yes, proceed" button
- a "no, cancel action" button I designed a second screen which is an alert screen that confirms that the deletion process is successful
-----Main Goal -- Build a responsive and easy to navigate the make product available flow for the admin
I observed some Ux writing inconsistencies towards reaching the target audience of the product and also observed issues relating to product tone and worked on a rewrite of the following screens:
- Users' Dashboard - Home
- Users' Dashboard - Messages
- Users' Dashboard - Product Description Pop Up
- Users' Dashboard - Product Wishlist Alert
- Users' Dashboard - Edit Product Details
- Users' Dashboard - View Uploaded Product Alert
- Users' Dashboard - Notifications
- Users' Dashboard - Profile -----Main Goal -- Improving user experience and interaction with the product
- I designed the Desktop view of the search results of admin dashboard
- I designed the empty states and filled states of the search results for the admin dashboard whereby the admin can navigate easily between "users" and "products" results
-----Main Goal -- Present admins with a quick overview of products and users results that was searched
- I designed the desktop view of the delete products of admin dashboard
- I designed the first screen, which is a pop up screen displaying the following details:
- a write up that confirms the action
- a "yes, proceed" button
- a "no, cancel action" button I designed a second screen which is an alert screen that confirms that the deletion process is successful
-----Main Goal -- Design a responsive and easy to navigate delete product flow for the admin
- I designed the first screen which is a pop up that displayed the following details:
- a write up that confirms the action
- a "yes, proceed" button
- a "no, cancel action" button I designed a second screen which is an alert screen that confirms that the deletion process is successful
-----Main Goal -- Build a responsive and easy to navigate the make product available flow for the admin
- I designed the admin product page (desktop view)
- Admin can sort products based on name, category and latest
- I created the empty state for the products page and search page
- I created the search page for the products page
- I designed more option button with three options: "view details" , "mark as unavailable" and "delete product"
-----Main Goal -- To make viewing and searching for uploaded products easy and to give admin access to to "delete" or "make products unavailable/available"
- I designed the admin authentication screen (desktop view)
- Admin can login or reset password
- I ensured that the design followed the design style guide provided by the design lead
- I rearranged the authentication screens after going through the design flow
-----Main Goal -- To design a responsive and easy to navigate the authentication screens flow for the admin
- I created the admin authentication screen (Tablet view)
- I designed the 6 screens of the login flow using the style guide
- Admin can login or reset password
- I ensured that the design followed the design style guide provided by the design lead
- I made sure the ipad screen followed the design flow from login to reset password, to password reset succesful
- Admin can receive reset pin email when admin forgets password
- I rearranged the screens and rename so such that it can be easily accessed
-----Main Goal -- To design a responsive and easy to navigate the authentication screens flow of the ipad screen for the admin
- I created the admin authentication screen (mobile view)
- I designed the 6 screens of the login flow using the style guide
- Admin can login or reset password
- I ensured that the design followed the design style guide provided by the design lead
- I made sure the mobile screen followed the design flow from login to reset password, to password reset succesful
- Admin can receive reset pin email when admin forgets password
- I rearranged the screens and rename so such that it can be easily accessed
-----Main Goal -- To design a responsive and easy to navigate the authentication screens flow of the mobile screen for the admin
- I created the admin authentication email notification screen (desktop view)
- I designed the 2 screens of the email notification flow using the style guide
- Admin can receive email pop up notification
- I ensured that the design followed the design style guide provided by the design lead
- Admin can receive reset pin email when admin forgets password
- I rearranged the screens and rename so such that it can be easily accessed
-----Main Goal -- To design a responsive and easy to navigate the authentication email notification screens of the desktop screen for the admin
-I observed some Ux writing inconsistencies on the product details and also observed issues relating to product tone and worked on a rewrite.
- Improved ux writing
- Users' Dashboard - Product Description Pop Up
-----Main Goal -- Improving user experience and interaction with the product
-I observed some Ux writing inconsistencies on the delete product screens and also observed issues relating to product tone and worked on a rewrite.
- Improved ux writing
- Users' Dashboard - Delete Product Flow Screens
-----Main Goal -- Improving user experience and interaction with the product
- I observed some Ux writing inconsistencies on the delete product screens and also observed issues relating to product tone and worked on a rewrite.
- I improved UX writing on the "make product unavailable product" flow screens.
- I ensured the improvement was done on all screens (desktop, tablet and mobile)
- I ensured the use the colors and typography on the style guide to ensure consistency
-----Main Goal -- Improving user experience and interaction with the product
- Created a popup to show product details from admin product page
- Product details include: name, category, price, seller, seller's email, product availability tag and product description
-----Main Goal -- Allow admins view product details at a glance
- Created the search page for products on the platform.
- Created the empty search page for no result on a particular item or faulty internet connection.
-----Main Goal -- Allow admins to search for products with ease
- Designed the popup to make products unavailable/available or "delete product permanently"
- Designed the confirmation popup for the actions described above
- Designed the alert screens for the actions taken above
-----Main Goal -- Allow admins to make products available/unavailable or delete a product permanently
- Following the style guide created by Nora and Ayomide, I designed the Admin Nav Bar for Moblie device using the flow chart.
- The Nav Bar consists of the following sections:
- A search field.
- Dashboard.
- Messages.
- Peoducts.
- Users.
- Profile.
- Notification.
- Log Out button.
-----Main Goal -- Mobile Navigtion Bar for Admin.
- Created buttons for the Admin to suspend or delete a users account.
- The Admin can see the user details on this page.
-----Main Goal -- Allow Admin to keep track of the users on the platform
- Designed Pop Up page for Admin for Desktop view, for the following messages;
- Delete Account Permanently
- Account Deletion Successful
- Account Deletion Unsuccessful
-----Main Goal -- Pop Up Messages for Admin.
- Designed Pop Up page for Admin for Tablet view, for the following messages;
- Delete Account Permanently
- Account Deletion Successful
- Account Deletion Unsuccessful
-----Main Goal -- Pop Up Messages for Admin for Tablet.
- Improved the UX Writing for the Admin authentication screens.
- Improved UX Writing for Login screens.
-----Main Goal -- Improved User experience of Admin Authentication screens.
- Improved the UX Writing for the Admin authentication screens.
- Improved UX Writing for Email notification.
-----Main Goal -- Improved User experience of Admin Authentication screens
- Improved the UX Writing for the Admin authentication screens.
- Improved UX Writing for Reset password.
-----Main Goal -- Improved User experience of Admin Authentication screens
Observations/Changes: I researched and came up with a design for the mobile , tablet and desktop view
- Improved the UX Writing for the side navigation
-----Main Goal -- Improved UX writing on Side Navigation
- Improved the UX Writing for the Admin Dashboard
-----Main Goal -- Admin Design - Improved UX writing on Admin Dashboard
- Improved the UX Writing for the Admin Dashboard: Messages -----Main Goal -- Admin Design - Improved UX writing on Admin Dashboard: Messages
- I designed the tablet view that enables the admin to be able to see the products uploaded for sale by the users pf the platform.
- I designed an empty state page - a page that indicates that no user have uploaded any product.
- I designed a filled state page - a page that shows the list of uploaded products by users of the platform.
-----Main Goal -- Admin Design - I created an easily accessible flow for the admin design page.
- I designed the tablet view of the product description pop-up screen.
- The product details pop up screen comprised of; Product name Product category Seller details Product price A description of the product Available and Unavailable tag feature
-----Main Goal -- Admin Design - I created a functional product description page for the admin screen.
- I designed the tablet view of the product search results page.
- I designed an empty state screen - when the search input cannot be found or the internet connection is faulty
- I designed a filled state screen - showing the search result
- I made sure to use the colors, typography, icons and side navigation on the style guide to ensure consistency
-----Main Goal -- Admin Design - I created an intuitive search page that covers for a range of results.
- I designed the tablet view of the "make product unavailable" flow on the admin home dashboard.
- I designed a first screen which is a pop up and it should display the following details: a write up that confirms the action a "yes, proceed" button a "no, cancel action" button
- I designed a second screen which is an alert screen that confirms that the deletion process is successful.
- I ensured you use the colors, typography, icons and side navigation on the style guide to ensure consistency
-----Main Goal -- Admin Design - I created a user friendly page that makes it easy to navigate the tasks of making a product unavailable or deleting a product.
#Description: Admin Design - Profile - Desktop
- I designed the admin profile page for editing Admin information.
-----Main Goal -- Improve the Admin Experience for editing their information.
#Description: Admin Design - Profile - Tablet
- I designed the admin profile page for editing Admin information.
-----Main Goal -- Improve the Admin Experience for editing their information.
#Description: Admin Design - Profile - Mobile
- I designed the admin profile page for editing Admin information.
-----Main Goal -- Improve the Admin Experience for editing their information.
#Description: User Design - Profile - Desktop
- I designed the user profile page for editing user information.
-----Main Goal -- Improve the User Experience for editing their information and saving it easily.
- I designed the screen for the list of suspended accounts screen (desktop view).
- I ensured that the design followed the design style guide provided.
-----Main Goal -- To design a screen the admin can access accounts that are suspended.
- I designed the screen for the list of suspended accounts screen (tablet view).
- I ensured that the design followed the design style guide provided.
-----Main Goal -- To design a screen the admin can access accounts that are suspended.
- I designed the screen for the list of suspended accounts screen (mobile view).
- I ensured that the design followed the design style guide provided.
-----Main Goal -- To design a screen the admin can access accounts that are suspended.
- I designed the screen for the sub-admin profile page (tablet view).
- I ensured that the design followed the design style guide provided.
-----Main Goal -- To design the profile page for sub-admin accounts.
- I designed the admin login page and forget password.
- I ensured that the design followed the design style guide provided.
-----Main Goal -- To design the Login page for admin and forget password.
- I designed the admin reset password page.
-----Main Goal -- To design the reset password page for admin.
- I designed the admin reset password page.
-----Main Goal -- To design the reset password page for admin.
- I designed the admin reset password page for mobile view.
-----Main Goal -- To design the reset password page for admin mobile view.
- I designed the 404 error landing page for the desktop view, mobile view and tablet view.
-----Main Goal -- To design the 404 error landing page for all views.
- I designed the 404 error landing page for the user dashboard.
-----Main Goal -- To design the 404 error for user dashboard.
- I designed the Admin Design - User Search Result (Tablet View).
-----Main Goal -- To design the Admin Design - User Search Result (Tablet View).
- I designed the Admin Design - User Search Result (Mobile View).
-----Main Goal -- To design the Admin Design - User Search Result (Mobile View).