Explore my latest portfolio of web development projects
covering a wide range of areas from HTML , CSS, JavaScript,
Visual Studio Code, UI/UX animation to WordPress and React.

October shopping app design laptop Mockup

October shopping app design

Figma Logo Photoshop Logo Illustrator Logo
October shopping app

October is an original Accessories company, In this project need to design App for they and create wireframe and interaction model using Figma and finally user testing using Maze. Modify the model based on the test results
October shopping app designsite Mockup
Brainstorm -
Information Architecture:

October their main audience is 16-35 years old, I created a complete user personal, user scene, empathy map and journey map for their company, to understand their user's thoughts, actions, moods, and their opportunities, in addition to creating a flow chart.


Design - Style Guide:

This time I used Figma from the first version of the wireframe. I designed a total of 21 pages of wireframes including home page, product overview page, product categories, single page product page, shopping cart, checkout flow page, personal information page, and also created wish lists, coupons page, online customer service, browse history of orders, and other pages, which are based on the user's journey map and the use of the flowchart to add, implement the app functionality required by the user to provide a better user experience. After that, I started searching and adding product images and content, aligning them with Grid features, changing my wireframes to high quality, adding interactive features to make all the buttons work, changing pages, adding animations, and etc.

Design - Wireframe:

After completing the Brainstorm information architecture, before developing the website. We need to design a Style Guide for the company, which includes designing the logo, colors, fonts, buttons, wireframes, and mockups.

Testing and modification:

For this project, I asked for a user test using "Maze", and I prepared 6 tasks which included, browsing products, finding online customer service, opening a wish list, deleting items from the shopping bag, completing the checkout process, viewing the order history and finally giving me feedback!

Other Project

Lumina online shopping Website

Lumina online shopping Website

View
Whac-A-Mole Website Game

Whac-A-Mole Website Game

View
Little Fish Cares Website

Little Fish Cares Website

View