The Challenge:

Residing in Japan, LocalFolio is an Advertiser Portal for small to large businesses. Connecting with modern data sources through a complex web of integrations, Advertisers are able to track how their money is spent through monitoring a range of metrics offered via the platform.

The project entailed heavy user flow architecture that allowed us to explore the various user types, wireframing to detail the page content and layout but also user interface design to bring the metrics to life.

Taking the technology detailed in the briefing, our focus moved to considering the various user types and collaborating with the client to establish individual flows. Each flow would help us consider the various actions and scenarios we would need to design for during the UX and UI stages. Through detailing each step, this allowed us to explore the functionality at length and provide an overview to the project deliverables.

Establishing the type of metrics to be included in the content of each Order was key in the initial stages of the project. This allowed us to explore how we can present each data set through the strongest method of visualisation. For example, Clicks are regularly shown within a line graph across common data set software, therefore we introduced this with the relevant measurements in collaboration with the client.

The Orders page is separated into four tabs, allowing each order to be drilled into further to show individual campaigns and their performance, invoicing and general account management.

A largely table based design, the Campaign view showcases detailed analytics based on campaigns the user has live via LocalFolio. With the ability to select a campaign from top level, this view deep dives into a singular campaign’s live data sets.

Working with specific data sets allowed us to explore the visualisations further. For example, the client required the ability to measure the customer’s progress through their total cost high up the page - we therefore added this as the first available visualisation in the top left of the data content. Through using data visualisations at the UX level, this secured our approach to each available metric prior to the UI design, saving us valuable time in the styling process.

A key technology in the product is the ability to track phone recordings in regards to saving the conversation and the functionality to write up notes based on individual calls. It was important for the page to be clear and informative whilst providing easily discoverable filter options to segment the recordings.

Users can also have multiple phone lines - as is common with Advertisers; we’ve added a dropdown so users can view all recordings attached to a specific phone number within their system.

The invoicing is a crucial part of the overall management of the customer’s account. Through easy access via the tab at the top, each user type (be it an admin user or an Ad agency representative) can access this view. With the ability to view and download each invoice, there’s also a clear area for account overview information at the top. 

Keeping this page clutter-free and using the same modular system as the phone recordings screen, this allows us to retain focus on the key elements. 

The Management tab includes a variety of features for the various user types. From assigning roles to the account through invitiations and edits, to contacting a LocalFolio representative and detailed Logs. 

To help navigate the page quicker we’ve added anchor links (shown in lozenge shapes) beneath the main page tabs. This helps drop the user down to the relevant area to help effectively complete their action without too much scrolling.

First impressions on a platform of this size are everything. We looked at a modern solution for the Login screen, taking into account the metric and data focused purpose of the platform for the imagery. Splitting the design 60/40 towards the dashboard imagery, we also injected key brand colours including the blue to overlay the imagery and pink for the primary call to action.

Establishing a clean and modern aesthetic, the Order Overview brings the metrics into the key focus on the page, with the dashboard styling kept in white and grey. Light blue shadowing has been applied to differentiate dashboard sections, but all visualisations remain the prominent features. Using different tones of blue and gradients we’ve introduced different sectioning to the chart based designs.

Bringing each visualisation across to mobile was an interesting challenge. We needed to consider how interactive design could help engage the user into revealing more data and accessing the full data sets where required. Within modals, the user can drag the line graph design to see the full range of data outside of the default area. The user can also change the month through arrows at the bottom.

As the UI developed through the project, we introduced a new feature into the sidebar - an expandable area to view the various sections to the tabs. This new feature gives the user the ability to navigate the longer screens effectively and find what they need quicker. Upon scrolling the page, the filtering and report export features become sticky, allowing the user to dynamically change the page content at any point. We’ve also added the total ad cost indicator into a larger module that sits central to other key metrics (shown right).

During our collaboration with the client, we provided multiple UI directions for the dashboard, including the above coloured sidebar approach. This design helped separate the main page content and the navigation, also allowing us to explore the various levels of navigation through clear styling (deeper blue on top level, lighter blue for selected). This continued experimentation allowed us to provide strong options for the client to consider whilst keeping us on top of key dashboard trends such as an expandable/collapsable navigation (right).