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.

User flows

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.

Wireframing - Orders

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.

Wireframing - Campaign Overview

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.

Wireframing - Phone Recordings

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.

Wireframing - Invoices

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. 

Wireframing - Management

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.

Commencing UI

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.

Order Overview UI

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.

Optimising the data UI

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.

Campaign UI

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).

Trial and error

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).

Ready to start a project?




Wonderful team to work with, they are incredibly skilled, dedicated and work exactly to deadlines. All communication was very clear and the aims were laid out and they went above and beyond. Was a real pleasure working with the guys and I look forward to working with them again in the future!

Andy Croft

Moken are a brilliant agency to work with. They took the time to understand our requirements and worked very quickly to ensure we could deliver this project on time. The whole execution was great from the designs to supplying the HTML & CSS. The Travis Perkins team were really impressed once it was live.

Mollie McGrath
Digital Content Executive
Travis Perkins

Moken were great to work with. The team understood the requirements and took true ownership of the project adding invaluable advice. I would recommend Moken as their services and delivery was second to none.

Amit Patel

We approached Moken to help create a fresh and engaging user experience for our fishing app. As a result, our original dark interface has been adapted into a light and delightful user interface which has been rolled out across the app. Our continued collaboration has seen an overall increase in user engagement for new users and our existing angler activation rates.

Chris Atkinson

It’s a pleasure for me to endorse Moken. They delivered above and beyond our expectations. Providing a thoroughly professional and consultative level of service throughout the project as well as round the clock communications and proactive ideation for me and my team. They produced a top-notch platform on time and more importantly within budget, Well done guys!

John Murphy

Very professional, timely and high-quality work, helping us execute on sophisticated Optimizely experiments.

Ralph Chochlac
VP of Product

The team were straight to the point and understood our needs right away. The final product exceeded our expectation and we will be definitely using Barry and team in the future.

Jake Bartlett