Portfolio - Remastered product design
Project introduction
This is a part of the project to remaster the product design that I did before. The main focus is converting that to the one fully based on Google Material Design guidelines by Figma.
Dealer Lounge
Dealer Lounge is a financial product that includes legacy system interfaces like banking products and external system interfaces like checking the degree of credit, accident history of the car.
About Dealer Lounge
Dealer Lounge is a product to provide loan service when the user buys a car, and secured loan for the car owner or the car rental company as well. It consists of an admin website and user website, and it supports desktop and mobile environments.
Color
Color theme
Basic color variants, dark and light, are used by the Material color palette tool.
Typography
Typeface: Roboto
Roboto is the basic typeface in the product.
Typescale
Typeface: Spectral SC
Spectral SC typeface is used to express brand logos.
Typescale
Layout
Dealer Lounge desktop sites use the top app bar navigation layout. Basically, the bottom navigation or bottom app bar doesn’t support the desktop product from Material Design guidelines so far.
Layout grid: Desktop administrators
Tight layout grid is used for the admin site. Administrators should have managed contents more than general users, and they are skilled and know what to do based on their experiences.
Admin can manage detailed codes for the product from the parents pages.
When they want to add or edit the contents dialogs will show the detail.
Normally, elevation is not used for desktop sites, but I use it to emphasize the special section, search filter. Search filter is one of the main features to find out something from the big data table.
Layout grid: Desktop general users
Layout grid for general users has more space than administrator’s one because they are not used to find what they want in the product.
Users can sign up or sign in with Single Sign On as well. It looks there is unnecessary space in the component, but those are for the validation checks when users fail to do that.
Layout grid: Mobile common
Dealer Lounge mobile sites use the bottom app bar navigation layout. That doesn’t consider productivity to make the design consistency between desktop and mobile.
Somehow the top app bar has no optimal layout structure on mobile with one hand use because many devices have bigger screens now, so I tried to apply it in a different way.
Layout grid for mobile is the same for both administrator and general user. Administrators are also limited when they work with mobile environments. Some tasks are also limited to use on mobile, so I make the grid more common for both of them.
Here are the examples for admin pages, and I especially considered the dynamic changes from the bottom app bar on the navigation context.
You can see the Floating Action Button, “Back”, is moved to the right when it needs to show.
This is very important to apply to the bottom app bar. If not, the navigation sequence and contextual menu will be messed up easily.
I applied a special navigation drawer which has a different color edge for the mobile version, and also used a variant special scrim color.
This product is a kind of classic, so I tried to give a little more variation to the product with the color.
Here are examples for general users. Most of the concepts are the same with admin pages.
Moreover, I used a slightly different round stroke to give components more design variations. You can see the design from the first block in the My page as below.
Bloid
Bloid is a trendy content application that helps users follow the trend. The app is targeted to sit on another main application, so it is sectionally designed.
About Bloid
Bloid is a product to introduce something trendy or stylish in life. This is targeting someone who wants to catch the trend, but they don’t know that so much.
These users may not want to keep watching sources like SNS all the time. Particularly, it is targeted only at mobile.
Color
Color theme
Basic color variants from the picked primary color, dark and light, are used by the Material color palette tool. Two different color themes are picked for the section in the product.
Typography
Typeface: Saira
Saira is a sans serif type typography, and it gives a clear and balanced text legibility over the pages.
Typescale
Layout
Bloid uses the bottom navigation layout, but basically it refers to the top app bar structure.
Menu drawer icon is merged in the search bar to minimize the use of space in the page.
It is designed so that users still access navigation hierarchy without a menu drawer icon in the top app bar.
By the way, bottom navigation is not the same as the bottom app bar. Bottom app bar considers the back key navigation in the app bar, but the bottom navigation layout structure doesn’t consider that in the navigation layout.
That means this layout structure may be very limited to iOS which doesn’t have a back key system at the bottom area of the device.
I mean it may be limited for one-hand use even if you consider the layout to access the menu easily with one-hand.
If you don’t design the page hierarchy properly and users can’t swipe the screen to go back or forward, they still need to access the top app bar area to touch the back button.
Be sure the bottom navigation layout is not that easy to design the navigation even though that looks fabulous to you.
Layout grid
The 4 columns standard layout grid for mobile is used for Bloid. Layout is focused on showing the images as much as possible.
Here are examples of one of the sections in the product. In the hot deal section, users can find out the trendy items.
Here are examples of the other section in the product. In the style section, trendy style is recommended, and analyze the detail styles and extract keywords to search the detail styles.
For example, the keywords show what the item is called or what the color is.
댓글
댓글 쓰기