herbariasoap.com
Herbaria
Natural cosmetics online store · USA
13 desktop screens · 7 mobile · 2024
Mobile app design · 2023
Garage AAC
A marketplace for car audio, amplifiers and accessories. We fully redesigned the standard CS-Cart mobile app: the customer journey from the home page to a CDEK pickup point, sign-in, the account and five color schemes to choose from.
- Client
- Garage AAC, car audio marketplace
- Task
- New mobile app design
- Platform
- CS-Cart mobile app
- Mockups
- 28 screens, 5 color schemes
- Year
- 2023
Task
The store ran on the standard CS-Cart mobile app, and the client was not happy with its interface. They needed a new design based on the store’s website: attractive, but without extra complexity.
First we showed the client five color schemes. Then we designed the home page, catalog, product page and the other screens. Our developers rebuilt the standard CS-Cart app from these mockups.
Customer journey
Home, catalog, product page, cart and order confirmation. At the bottom of every screen there is a four-button menu: home, catalog, cart and account.
Checkout
Three steps with tabs at the top: profile, delivery and payment. A completed step turns green.
Step 1. Profile
First name, last name, phone and email, plus a checkbox for orders from a company.
Step 2. Delivery
CDEK delivery with price and terms, or free pickup. The selected pickup point appears under CDEK.
Pickup point
A CDEK point on the map: delivery days, storage period, opening hours, directions and payment options.
Step 3. Payment
Card or order by phone, a comment field and the total next to the “Place order” button.
Sign-in and account
Users sign in with email or through Google and VK. The account holds the wishlist, orders and profile settings.
Sign-in
Logo on a dark background, email sign-in, account creation and social sign-in.
Account
Wishlist, orders and profile at the top. Below them: contacts, store information and free returns.
Orders
The card color shows the status: white for open, green for completed, gray for canceled.
Wishlist
Products with prices and a delete icon on each, plus one more delete icon in the header.
Color schemes
Before the mockups we showed the client five schemes: base colors, buttons in three states on light and dark backgrounds, and an illustration to set the mood. The app uses the palette of the first scheme. During approval we made the red brighter.
Icon and UI kit
We designed an app icon with a speaker and a splash screen in red and white versions. Buttons, toggles and icons went into the first part of a UI kit, in default and pressed states.
Mockup colors
- #E01D24Header and buy buttons
- #090E14Bottom menu and dark screens
- #FFFFFFProduct cards
- #EF8D90“New” badge
- #00A046“In stock” and completed orders
More
More projects
All design projects
Previous
Next
We will find solutions for everyone!
Share your idea and we’ll offer an optimal solution
