Did you have experience when designing a whole new product and looking for a reference for the BackOffice website including the sitemap and the layout of pages? Designers can get ideas for the website layout via a survey of competitors, but eventually, the Backoffice website only can be accessed by internal users which means we are not able to check the look-and-feel of competitors' operational functions behind the website facing online customers.
This project proposed a general framework for BackOffice layout design which provided extensibility and maintainability for adding new functions or purging out-of-date features.
BackOffice is a standard internal web application that provided functions for daily operations of marketing, accounting, IT and management teams in eCommerce products.
The ideal design of the BackOffice layout is a container for popular functional pages requested by different operation teams. Designers can focus on function pages on their task list and merge them to the product of BackOffice once done.
Section 1: Analyze What Types of Function Page We Have
The elements of the Backoffice can be breakdown as followings:
Section 2: Make an Area Plan for 1st Layer
There are different architectural designs for 1st layer, I suggest to divide into 3 areas: The left panel for the menu, the top for the information header and the right-central for the function pages.
Section 3: Arrange Elements in Top Panel
Switch: to collapse or expand the menu panel.
Page routes: a hierarchical indicator of the current function page.
Announcement: display marquee messages to BackOffice users.
Indicators: important numbers of product services like real-time online customers.
Account info: display the current logon operator name and available to expand menus after clicking on the user name. For example Logout, Preference.
Section 4: Make an Area Plan for 2nd Layer of Main Working Area
Based on the area plan of 1st layer in the main working area, there is a dashboard(Left-Top), report enquiry(Left-Bottom), single item view(Right-Top) and a value list(Right-Bottom.
The report enquiry area needs one more step to complete in the next section. But we already can put sample data on the single item view and value list like below.
Section 5: Make an Area Plan for 3rd Layer of Sub Working Area of report enquiry
There are 2 sections in the control area of the report enquiry area, the left side to arrange filters and the right side for the search button and the button to create the new item if necessary.
There are 3 kinds of enquiry results in the sub-working area like below:
A whole Picture of This Template Design
You could check the Axure wireframe (https://6glkx1.axshare.com/) of the above design or the below video to see how it works.
Comments