Designed wireframe and mockup, built website on Webflow
This is a website I designed on Figma and built on Webflow. The client recently opened a flower farm in West Virginia and needed a website to attract customers, create events and sell products. This involved creating a CMS, and eCommerce functionality through Webflow.
see it here→
After the client, Supermassic, found my portfolio by chance, I was sent an email to join the Supermassiv team as a freelance designer. I was happy to work on their interesting project! The client wishes to make music NFTs accessible to people who know all about NFTs , those who have no experience with them (like myself), and anyone in between.
I was given the task to design a "drop page" which is where music artists would share a link to their followers to follow and purchase their music NFT. I was given a list of goals and objectives, as well as their prior style guide which they wanted to simplify. I made several screens for the drop page which included a: screen with a launch countdown, purchase page, page to view current collectors and responsive versions of these screens for tablet and mobile.
After my designs were approved, a developer worked on the coding using my designs on Figma. I coordinated with the client and developer on any changes needed during the development process and refined my designs based on any coding issues that were brought up. My second task with Supermassiv was to create their landing page. I sent over wireframes based on their requirements and worked on final designs when those were approved. I sourced and edited illustrations on Adobe Illustrator and was able to transform their previous style into a cleaner, simpler aesthetic that they requested.
I will continue to add more details about this project soon.
User avatar clicks to profile
Search bar for users who know what they want
Categories for users who have some idea of the type of item they want or want to browse.
Popular items featured for users who have no prior preference for items
Bottom bar contains home, browse, favorites and cart buttons.
Scroll bar with menu categories fixed to the top
Filter button for more
specific needs
Item card with name, image, price, and a short description
Favorite button
Item description with
more detailed information.
Large add to cart button with price
Allergen information with illustrated icons
Toggle between pickup or delivery
Shortened item summary with option to add quantities
Tip option has set amounts with an additional option to remove tip or input a custom amount
Recent payment option is saved with an arrow to toggle options to change payment method
Order status changes based on stage of preparation
Timer with estimated
time order will be ready
A QR code makes it quick and easy for bakery staff to locate a customer’s order
Button to notify bakery of customer’s arrival
Points for rewards would encourage customers to order again in the future
Address with a button to link
to phone’s default map app
User avatar clicks to profile
Search bar for users
looking for a specific book
Easy-to-find toggle between dark and light modes
Recommended books
based on previous loans
Bottom bar contains frequently used pages such as: Home, Search, Loans, Favorites and Profile
Current loans front and center
Share button to send book link to others and a bookmark to read the book later
Book cover image with title and author
Tabs with book description and reviews
Buttons to borrow or preview book
Number of available loans
Tags with book categories and genre
Loan expiration timer with oldest loans at the top
Renew button to start process of extending the loan time
Return button to end loan early
Navigation bar with relevant pages
Hero image to set the tone of the overall website experience.
Large buttons with the top CTA buttons users are assumed to use.
Articles for users browsing the website.
Featured story to show adopters how
successful the shelter has been at matching
humans to animals.
Bottom bar contains home, browse,
favorites and cart buttons.
%402x.png)
Filter buttons with typical pet finding characteristics
Pet listings have an image and major characteristics such as age, size, breed and activity level.
%20%E2%80%93%202.png)
Personality traits, key information, breed details.
Detailed information with pet's
background and history
Adoption process and pricing
Similar matches
I have a passion for design and I cannot wait for my next project. You can email me directly at mcheco.tung@gmail.com or find me on one of the sites below.
