B2B Portal Web Design
Project Overview
Duration
7 months
Project Brief
Within the B2B Portal, the Partner Operation portal serves as a centralized hub, combining hardware, software, and services into an all-in-one development environment. This empowers businesses with the necessary tools to prototype and develop solutions quickly, enabling faster time-to-market.
Exclusively available to registered partners, the Partner Operation portal enables various functionalities. With the B2B Portal, we strive to simplify partner operations, providing a user-friendly platform that accelerates product readiness and facilitates efficient business growth.
Role
UI designer leading the visual of RWD web design
Challenges & Goals
-
Usability and accessibility of the responsive wed design
Ensuring web usability and accessibility standards, particularly in the context of responsive design, presented a significant challenge during the development of the B2B Portal. Given the complexity of the portal, careful evaluation and design were necessary to address potential usability issues, optimize user flows, and comply with accessibility guidelines.
-
Creating a UI Kit, ensuring consistency, and streamlining design documentation
Designing and delivering a comprehensive UI kit while maintaining consistency across the Engagement Portal (landing page) and Partner Portal (main dashboard website) were critical. Additionally, organizing the visual design documentation in a streamlined manner posed a challenge. Thoughtful planning and structure were essential to ensure clear, concise, and easily accessible documentation for the development team, streamlining the implementation process.
-
Managing Timeline and Deadlines
Meeting project deadlines and effectively managing the timeline proved challenging, especially when coordinating with multiple teams and stakeholders across different time zones, such as San Jose. Prioritizing tasks, managing dependencies, and maintaining effective communication were crucial for successful project execution.
Outcome & Impact
The outcome of these efforts was met with favorable feedback from stakeholders. The organized and streamlined UI design documentation and the UI components' implementation contributed to a more efficient and effective design process, and the design system I had created for the project also be used in other projects.
Target Audience
User Profiles
User Scenarios
Final Design
B2B portal consists three sections::
1. Engagement Portal is for the website general visitors and the IoT hardware buyers
▪ To provide the information of Acer BYOC, Acer Open Platform, AOP Developer Program, AOP Partners, AOP SDK and AOP
IoT devices
▪ To provide the assistance for registering accounts, processing payments to become partners or enroll in the developer
program
2. Partner Portal is for the registered partners
▪ To view and operate their end-user accounts or devices
▪ To create and manage their portal operators
▪ To control and publish their software/firmware
▪ To monitor their storage and bandwidth usages and service expiration
▪ To renew or upgrade their service packages
3. The Acer staffs can sign in for management by Acer Management Portal
▪ To monitor partners’ status and usages
▪ To manage partners’ account activities
▪ To maintain portal contents, SDK and legal documents
▪ To repose partners’ requests
▪ To notify working progress between different teams
Engagement Portal (Landing Page)
The main function of the engagement portal is to serve AOP related information to the website visitors. The primary goal of the front-end portal is to engage the general website visitors and help them enter the partner evaluation/development phase to become AOP developers or AOP partners.
-
Home page
Provides marketing messages to attract website visitors to move toward detailed main content pages.
The sign-in button will take the existing users to the Sign-In page for entering Dashboard Operation Portal.
-
Registration
- Every operator has to sign in to enter Partner Portal.
- Operators have the option to allow the portal to remember their user IDs for the next time sign-in.
- Click “Forgot” button to reset the password.
- When signing in, operators with different roles and privileges will have different accesses/limits to different sections, and will receive different UI components, navigation menu items, page content and action triggers on the same page.
Partner Portal
Through the Account Registration process, the registered user will be the first sign-in operator to the Partner Portal. The default role of the first sign-in operator is the portal administrator. The portal administrator is able to create and assign roles to the other portal operators.
The dashboard contains the latest portal data under sign-in user/partner account, the sign-in operator info, the recent activities and the notification sections. Each section contains links and action triggers for operators to execute tasks or to enter deeper level of the portal. The accesses to the main sections are varied by the operators’ roles and privileges. Links and action triggers on the main section page will take the operator to enter individual item profile pages or to execute further tasks.
We show different section based on different roles:
-
Roles list:
Admin, Partner Manager, KV Manager, KV Viewer, Operator Manager, End-User Manager, End-User Viewer, App Creator,
App Publisher
-
Sections list:
Dashboard, End-Users, Devices, Applications, Resources, Operators, Agreements, Partner Profile, Profile(The current sign
in user)
-
Partner Portal Main Dashboard
The dashboard contains the latest portal data under sign-in user/partner account, the sign-in operator info, the recent activities and the notification sections. Each section contains links and action triggers for operators to execute tasks or to enter deeper level of the portal.
-
Navigation bar
When the user hovers on the navigation, it will expend and the user can access more minor functions.
-
End-Users page
End-Users main page presents the partner’s end-users data to the operators. The end-users data includes: End-Users Locations, Monthly Accumulated End-Users Numbers Chart, Latest Joined End-Users List. End-Users Locations will be presented in Map View. Operators are able to explore the detailed end-users number in each area (city/area/state/country)
-
Devices page
Devices main section page provides the partner’s devices data to the operators. The devices data includes: Devices Locations, Monthly Accumulated Devices Numbers Chart, Top Usage Expanse Devices List. Monthly Accumulated Devices Numbers will be presented in a monthly recap chart. Operators are able to explore the detailed device number in each month.
-
Account Profile
Account Profile displays the Sign-in operator’s account profile information. Except Operator User ID and Roles, the sign-in operator is able to edit the rest of the account profile information.
Acer Management Portal
The Acer Management Portal is for Acer internal staff to monitor partner activities, to manage B2B portal contents, and to respond partner’s requests. Each sign-in user is considered as “Agent” who will be assigned one or more specific roles and obtain corresponding privileges to execute assigned tasks. When signing in, agents with different roles and privileges will have different accesses/limits to different sections, and will receive different UI components, navigation menu items, page content and action triggers on the same page.
-
Dashboard of Acer Management Portal
The dashboard contains the latest portal data under Acer account.
-
Partners
Agents with privilege as the Acer staffs are able to access this section. The Partners list will be listed in the alphabet order of the “Partner Name” by default. Each item in the Partners list will link to that partner’s profile page.
-
Partner Profile
Operators with privilege to view or edit the partner profile are able to access this page. Click on “History” button in the Billing section to evoke the billing/payment history popup layer. There will be the payment edition settings include:
-Change payment credit/debit card
-Enable/Disable auto-payment
-Change payment date
-
Resources
In the Resources Page, the resources can be listed by list view or by card view. The content format of the Resources page is the item list with tabs to separate contents by file types such as App SDK and DevKit. Each list item in the Resources list will link to that resource file profile page. “Add Resources” button will execute new content generation process and add new resources in the list.
Design System & Components
To clarify the design for each section of this project, I made the design system and component guidelines to foster collaboration between designers, engineers, and the stakeholders. The design systems enhance communication and understanding, leading to smoother collaboration and more effective teamwork. Also, it provided a centralized and standardized approach to design, ensuring consistency across all products and experiences.
Final Outcome & Impact
The outcome of these efforts was met with favorable feedback from stakeholders. The organized and streamlined UI design documentation and the UI components' implementation contributed to a more efficient and effective design process, and the design system I had created for the project also be used in other projects.
Learning and Takeaway
Learn to design responsive websites:
Designing responsive websites is essential to ensure an optimal user experience across different devices. Whether users access the website on a desktop, tablet, or smartphone, it should adapt seamlessly to their screen size and offer a consistent interface. In this project, understanding learning HTML5 and CSS3 foundation and the concepts such as fluid layouts, flexible images, and media queries help me create designs that can dynamically adjust to different screen sizes.
Learn to design for different device platforms and maintain consistency:
Designing for different device platforms, such as iOS, Android, and web, presented unique challenges. During this project, I learned to maintain consistency across platforms for a seamless user experience.