project showcase

Chat App website

Role

Web Designer

Project type

Concept Project

Project duration

February 2022

Project summary

This is a homepage design and build for a concept project – a chat application. I designed the page on Figma first and then built a responsive web page using Webflow.

see it here→

Some details about this project:

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.

Live Link TBD: The link to the live site will be added when the product is launched.

THE PROBLEM

The User

The Design Process

No items found.

the outcome

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.

Filter buttons with typical pet finding characteristics

Pet listings have an image and major characteristics such as age, size, breed and activity level.

Personality traits, key information, breed details.

Detailed information with pet's
background and history

Adoption process and pricing

Similar matches

Conclusion