Figma Web Application Design Challenge

Figma Web Application Design Challenge
Project Overview
A personal Wishlist manager website for users to watch products they like on websites and
buy when they are on sale/promotion.
Please note that all designs must be created in Figma. The pages and all designs must be
responsive for the following screen sizes:
§ Desktop
§ Tablet
§ Mobile
Branding Guide
The website must only use the colours in the branding guide found here:
https://www.dropbox.com/s/hr0kfzjevmwv7gh/Branding%20Guidelines.jpg?dl=0
The image represents the look and feels

and colour combinations we would like
to have for our website.
This is based on the colours in our

branding guide.
Logo (long version): https://www.dropbox.com/s/1zaohbwvpncoy16/1.png?dl=0

Logo (short version): https://www.dropbox.com/s/x02e8xdo2mz29zu/2.png?dl=0
Site Components
Site Header
The site header must have the following items:
§ Logo (use the short version of the logo here)
§ Overview
§ Products
§ + (plus sign to add new product)
§ Profile Icon
The profile icon, when clicked, must display the following additional options as menu items:
§ Settings
§ Help
§ Logout
Overview
https://<some-url>/overview
The page must have the following:

§ Search box to search for products
§ Banner slideshow (up to 5 slides) where we can display promotions/deals.
§ Section to show recent notifications (promotions, price drop, account alerts, etc.).
§ Section to display recently viewed products with a link to view all that will take the
user to the Products page.
Products
https://<some-url>/products
Search box to search for products
Display up to 48 products in grid format, with pagination to display more products.

Below is one of the layouts we like:
At the top, we will need the ability for users to select one or more categories. The category,
when set, must be highlighted with the colours defined by the user (see profile section for
more details). For example, in the above screenshot, the category “All Baby, Pre-School &
Soft Toys” was selected, hence displayed in colour.
Users may filter based on the following parameters:

§ Store (displayed as a checkbox list)
§ Brand (displayed as a checkbox list)
§ Price (displayed as a slider)
§ Discount (displayed as a slider)
Users may sort the results based on the following parameters:

§ Recommended
§ $High to Low
§ $Low to High
§ A-Z
§ Z-A
§ Discount High to Low (%)
§ Discount Low to High (%)
§ Newly Added
§ Recently Updated
There may be many categories that will not fit in the default view, so needs to have the
ability to scroll through and select one or more categories.
For each product displayed in the grid, we must show the following:
§ Image
§ Title
§ Price
§ Up Red Arrow or Down Green Arrow (optional as some will not have it)
§ Heart icon on the image (as displayed on the above photo) to like the product, when
selected, will turn to a read heart
§ A text label displayed over the image (something like below “ZALORA”)
The page will need a Section to display recently viewed products
Products (locked view)

https://<some-url>/explore
Display the Products view with a layer blurring the entire products section with a text that
the feature needs to be unlocked. Switch to professional plan and display a button to pay.
Product Details
https://<some-url>/product?pid=<unique-product-id>
Section to display the following details:

§ Product Image
§ Title
§ Description
§ Price Now
§ Price Before
§ Price Trend indicator (down green vs up red)
§ Heart icon to like the product, when selected, will turn to a read heart
§ Text label (in the previous sample image “ZALORA”) displayed as a clickable link
§ Categories assigned to this product. Users must be able to add new categories or
remove category association (see sample below)
§ Display price trend as a graph (something like below)
§ Display the product ID

§ Display created DateTime
§ Displayed updated DateTime
§ Notification on/off button
§ Ability to delete the product (as for confirmation and delete). Once deleted, display a
toast message that the product has been successfully deleted.
§ Ability to report an issue (display few checkboxes for the user to select a pre-defined
issue type or choose others and enter the details).
§ Ability to share the product with someone
Section to display similar products

Section to display recently viewed products
+ (Add New Product)

The button on the menu bar, when pressed, must display a small popup just below the +
sign with a text box to enter the product URL and button to Add.
Once added, display a toast message stating the product has been added successfully.
Settings
https://<some-url>/settings
The page must have the following options:

§ Display Username
§ Option to upgrade to professional plan that takes the user to the payment page.
§ Display email address with an icon to represent verified/pending verification. Also,
must have a link to update it
§ Display phone number with an icon to represent verified/pending verification. Also,
must have a link to update it
§ Link to change password
§ Notifications
o Push Notification (On/Off)
o Email Notification (Daily/Weekly/Off)
§ Social Logins (Facebook/Google) ON/OFF
§ Category Management
§ Delete Account
Category Management
https://<some-url>/categories
The category management screen must display all categories maintained by the user and
must have the ability to add/edit/delete/set colour. Something like below:
Login
https://<some-url>/login
Login page with the following:

§ Section to display an image/banner
§ Email Address
§ Password
§ Forgot Password
§ Sign up link
§ Or continue with Google/Facebook links
Registration
https://<some-url>/signup
A page for users to sign-up using the email address, password and reconfirm password.
Once submitted, display a message to activate the account with the code we sent and
provide a control for the user to enter the code and activate it.
Reset Password
https://<some-url>/forgotpassword
A page for users to enter their email address and send instructions to reset the password.
Update Password
https://<some-url>/updatepassword
A page for the user to enter current password, new password and reconfirm new password.
Update Email
https://<some-url>/updateemail
A page for users to enter a new email and activate with an activation code.
Update Phone Number

https://<some-url>/updatephone
A page for the user to enter the phone number and activate with an activation code.

Figma Web Application Design Challenge

Uploaded by

Copyright:

Available Formats

Figma Web Application Design Challenge

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Figma Web Application Design Challenge

Uploaded by

Copyright:

Available Formats

Figma Web Application Design Challenge

The image represents the look and feels

This is based on the colours in our

Logo (long version): https://www.dropbox.com/s/1zaohbwvpncoy16/1.png?dl=0

The page must have the following:

Search box to search for products

Display up to 48 products in grid format, with pagination to display more products.

Users may filter based on the following parameters:

Users may sort the results based on the following parameters:

The page will need a Section to display recently viewed products

Products (locked view)

Section to display the following details:

§ Display the product ID

Section to display similar products

+ (Add New Product)

The page must have the following options:

Login page with the following:

Update Phone Number

You might also like