Starr Portal

Observation

To really get an idea of how the works and flow, I did a critique of all the visual and Ui aspects of what has been built out with the portal. Since there are 3 different types of users, there are 3 different logins. Although each user login has a different functionality and displays different pieces of information, the information has been displayed in a way that they can still follow a consistent layout.

Account Information

Within each user login, they will all have the first home section show the profile information of the user. The layout would be consistent through out all of the logins. The only difference is within the Merchant portal login where it show security information under the profile information. One of the big UI rules that I would like to enforce within this design was to reduce the amount of vertical scrolling that the user needs to do. I felt that with the user profile information, it could be laid out better to highlight the categories of information.

Merchant Portal

Within the Merchant Portal, there is a section where the user can go through there transaction history with their business. There are keys that I felt could be have greater emphasize in terms of visual hierarchy comparing to the other elements.

The portal also always the user to connect to other 3rd party accounting resources. Regarding the layout, I felt that there was no need to layout each integration where they have one row to themselves.

If the merchant has multiple businesses or franchises, this is where they can see if the POS devices that were ordered were approved or declined. For a majority of the sections of all user logins, they have followed this kind of chart layout. In this screen, I also feel that there is no need to layout the information in a way where the user needs to scroll.

Partner Portal

Within the Partner Portal, there is a section where the user can go through there transaction history with their business. There were key pieces of information that  could have a greater emphasize in terms of visual hierarchy comparing to the other elements.

Admin Portal

Within the Admin user portal, it would have the most amount of sections. This made me question if there are certain sections/tabs that could be combined together. When I came across the filter within the transaction tab, I felt as though it took up too much space where the information that needed to be displayed would lose its focus to the user.

On the sidebar, the Accounts section has a dropdown with the 3 sub sections where I feel that they can be laid out differently within the UI. The “hardware Request and the Franchisor Request also are 2 sections that can be put together in one section. Regarding the the Reports section, there will be charts and graphs that will display the information.

Wireframing

After doing a heuristic evaluation of the portal that the developers created, my designer colleague and I began wireframing new kinds of UI layouts. We were trying to design the portal layouts in a way where they can all be applied to each of the different user portal logins.

What are we trying to communicate with the STARR brand?

The branding for STARR was key factor in determining the overall visual aesthetic of the portal. When my colleague and I were interviewing the president of CPOS about STARR, he wanted it to have a strong representation of Ontario since this portal would be used mainly in Ontario businesses. We thought of taking combination a maple leaf which is a Canadian national symbol, a star and a bear to create the STARR portal logo. The Combination of having the star and the bear were fitting because it takes inspiration from the star constellation, Usra Minor which takes the form of a bear and also polar bears are one of Canada’s national animals.

Typography

The type was chosen to accommodate to be seen in a digital and print medium.

UI Exploration

Taking the colour palette and the typography that we decided on, we began to explore designing some of the UI elements that will be implemented in the portal.

Login

When the user first goes to the STARR portal, they will meet a login screen with the new STARR logo and have the option to sign in with google, LinkedIn, Microsoft or Apple. In the User sign-up pages for Merchant and Partner users, the fields were laid out in a way where the user does not require any scrolling.

Profile Information & Side Taskbar

One of the keys changes that we made from the first ideation of the portal was the amount of sections tabs within the left side taskbar. We reduced it within all the different portal types by grouping some of the data together. In the “Home”  tab  the Profile information, privacy settings and the passcode were put it into one section. Within the section, they were organized into sub tabs.

Training Modules

In the training module, we put the course and exam together and organized them into sub tabs as well.  Before the merchant can fully use the portal, they need to take a Tax registry course and pass the exam. The user would need to purchase the course which contains training videos and practice questions.

Integration

In the Integration tab, we laid out the 3rd party integration software's in one row. If there are multiple accounts for one of the integration software's, they would be layered on top of each other and can be changed by the arrows.

Transactions

In the transaction tab, we arranged the elements where the date filter and the 3 modules indicating overall values are all placed at the very top. This gives a greater focus to the 3 values but also does not completely disregard the importance of the transaction chart information.

Account Management

In the Account management, we made the decision to group the “Manage Business” and “Manage Taxes” section together into one tab.

Merchant Portal

Partner Portal

Admin Portal