CASE STUDY

Local Line’s storefront refresh project.

ROLE

Lead Designer

TOOLS

Figma, Jira

TIMELINE

September 2020 - March 2021

OVERVIEW

Local Line is an e-commerce platform that empowers local farms, food hubs, and farmers markets to sell online. Starting in early 2015, Local Line started out as a matchmaking service for small farms and chefs, and evolved into a "Shopify" for online local food commerce where farmers can track their inventory, sell online, and manage their orders. I joined in early 2019 as the sole designer to improve the user experience. For this particular deliverable, we wanted to bring an up to date e-commerce experience to our merchants' storefront.

MAIN PROBLEMS TO ADDRESS

Merchants said their storefront felt "outdated."

Customers had issues adding to cart, and checking out.

Customers gave up on trying to shop on mobile.

Refreshed Look & Feel

Through gaining feedback from our existing customers, we knew many wanted an update to the look of their online storefront. Not only did it look outdated, cluttered, and un-inviting, it performed "clunky" as well.

ISSUES

Outdated

Cluttered

Clunky

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

OLD STOREFRONT

Updating aesthetics

ISSUE

Merchants said their storefront felt "outdated", leading to them having feeling because of their brand being mis-represented.

CAUSES

Lifeless feeling greys
System font with lack of character

SOLUTIONS

Replace neutral hues with greys saturated with blues to improve “lifeless” or dull feeling greys
Replace ‘Roboto’ with ‘Lato’, a font with semi-rounded features giving a feeling of warmth without sacrificing feeling of stability and structure that ‘Roboto’ gives.

De-creasing clutter

ISSUE

Merchants said it felt cluttered, leading to frustrated customers due to information overload and unclear way finding.

CAUSES

Overuse of borders
Tight spacing
Unclear visual hierarchy

SOLUTIONS

Eliminate or de-emphasize unneccessary borders
Utilise spacing instead of borders to visually group related elements
Use gradient of neutral colours, as well as set font hierarchy to emphasize prioritized information, or de-emphasize supplementary information

OLD

NEW

OLD

NEW

Cleaning up friction

ISSUE

Our merchants’ customers raised issues that the shopping experience felt a bit clunky.

CAUSES

Product categories were sometimes hidden from default view, and were tiresome to click through to find
After flipping to the next page of products, the user would remain at the bottom of the page and would need to manually scroll up to see the top of the list of the new page.

SOLUTIONS

Utilize vertical screen real estate to showcase all product categories without having to click or scroll through horizontally
Have users automatically jump to top of listing when changing page

OLD CATEGORY NAVIGATION

NEW CATEGORY NAVIGATION

Refreshed look & feel.

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

ISSUE

An outdated look.

Merchants said their storefront felt "outdated", leading to them having unsatisfactory feelings because of their brand being mis-represented to their customers.

SOlution

A more personable, less robotic font.

Replace ‘Roboto’ with ‘Lato’, a font with semi-rounded features giving a feeling of warmth without sacrificing feeling of stability and structure that ‘Roboto’ gives.

Solution

Updated colour swatch.

Replace neutral hues with greys saturated with blues to improve “lifeless” or dull feeling greys.

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

ISSUE

Cluttered & busy.

Merchants said it felt cluttered, leading to frustrated customers due to information overload and unclear way finding.

Solution

Minimize borders, use spacing, & set visual hierarchy.

Eliminate unnecessary borders. Use spacing instead of borders to visually group related elements. Use font colour, weight, and size to emphasize prioritized information.

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

ISSUE

Clunky navigation.

Our merchants’ customers raised issues that the shopping experience felt a bit clunky. Product categories were sometimes hidden from default view, and were tiresome to click through to find. Also, after flipping to the next page of products, the user would remain at the bottom of the page and would need to manually scroll up to see the top of the list of the new page.

Note how the Specialty Meats and Vegetables categories are hidden. This resulted in lower sales to categories further down the navigation.

Solution

Use vertical screen real estate to unhide categories. Eliminate unnecessary clicks.

Utilize vertical screen real estate to showcase all product categories without having to click or scroll through horizontally to reveal them. Have users automatically jump to top of listing when changing page.

An updated checkout flow.

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

ISSUE

Shopping cart fixed to certain location on certain page.

After adding items to your shopping cart, you can see the cart update under the Products tab on the right of the page. But, if you're scrolled further down, or are browsing a different page, you do not have quick access to view your cart or proceed to checkout.

SOlution

Place shopping cart in a universally accessible location.

Placing the shopping cart in a fixed header allows users to quickly see feedback when they've added something to the cart, and they can also easily and quickly access it wherever they are in the shop. This shopping cart placed in the top right of a fixed header follows many e-commerce shopping experiences, and can foster familiarity.

ISSUE

Checkout overwhelmed customers.

As the features of Local Line grew, the checkout flow had become a bit overwhelming. The check out flow contained many options that the user needed to specify, and users would often skip over defaulted inputs causing manual corrections to be done by merchants. Furthermore, the dense form with identical looking inputs made it hard for users to read and digest in a simple manner.

SOlution

Simplify checkout flow into focused steps.

By grouping the related checkout specifications into main steps, and giving them a focused attention, users have a simple and easy linear path to reach their end goal of placing an order. This proved to ensure users specify the best pickup/delivery options and dates, and payment options that's right for them and helps to avoid manual corrections from merchants.

Improving usability on varying devices.

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

ISSUE

Mobile responsiveness was an afterthought.

Many of our merchants expressed the frustration their customers had when navigating their shops on mobile. On mobile, layouts would get jumbled, texts sometimes became too small, and small tap targets for toggles caused annoyances.

SOlution

Legible font sizes, easily tappable targets, responsive layouts.

We took all of our existing pages, and ensured each component responded well to varying screen widths. We wanted to ensure the user had no problems with navigating the shop, easily digesting clean information, and avoiding finicky and problematic tap targets. To do this, we'd decided on a fixed headers, slide out menus, larger buttons and input fields, and clean visual hierarchy.

The Impact

Increased retention of key accounts.

A number of our merchants had long standing requests for improvements to their storefronts. By delivering a newly redesigned storefront, we were able to satisfy the wants and needs of many accounts, which in turn reduced turnover.

Increased number of merchants willing to recommend Local Line.

The farming community is tight knit, and rely heavily on recommendations within their communities. By delivering on promises, this built trust that Local Line is the right tool for them to run their business. Our customers include YouTube and Podcast influencers, and so delivering well received product improvements gives us multiplicative impact.

Increased number of orders processed to more categories.

By "unburying" categories hidden by the old horizontal category component, it became more frictionless to discover and browse more categories in our merchants' storefronts, leading to higher sales in more categories.

Decreased number of reported manual adjustments to mistakes made on orders.

By giving a focused step by step checkout flow, users felt it was more straightforward, and ensured they were specifying the right pickup / delivery / payment options. This made a more seamless experience for our merchants when fulfilling their orders on pickup or delivery day.

Increased amount of orders processed on mobile.

By giving thought to how the shop responds to varying widths, customers felt more at ease when shopping on mobile, and thus we saw an increase in the amount of orders processed on mobile.

Note: specific numbers left out for privacy reasons.

CONTACT

Like what you see?

E-mail me at ryanctabula@gmail.com to schedule a chat or video call.
Or, continue on with this case and dive deeper into the details.

The Process

Uncovering the Issues

Crafting the Solution

Execution

Learnings and Takeaways

Uncovering The Issues

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

How did we determine what to work on?

Uncovering THE issues

Feedback from merchants.

Over the course of Local Line’s existence, we were always open ears to feedback from our merchants. Sales and Customer Success spearheaded the conversations, and recorded and documented feedback in our project management tool Jira. Relevant storefront feedback was tagged with ‘Storefront’, and was consulted during the kickoff discussions of the project.

Poor Item Discoverability

One of the main feedback for merchants, was that sales of some of their products were unexpectedly low, simply for the fact that it takes some digging to reach and find those products.

Uncovering THE issues

Feedback from customers.

Customers would provide feedback both directly with Local Line, and indirectly through the merchants they shop with.

Slow, clunky, and unsure if items were loading or the site was frozen.

Customers would provide feedback both directly with Local Line, and indirectly through the merchants they shop with.

Checkout could be easier.

Some customers felt intimidated by the checkout process, and would rather order the “old” way through telephone with their merchant.

Uncovering THE issues

Design audits.

In criticising and going through our own storefront, we were able to pinpoint areas of improvement. We consulted UX principles and best practices to see if there were any violations we can correct.

Aesthetic-Usability Effect

Users often perceive aesthetically pleasing design as design that’s more usable. Our storefront looked dated, and only amplified any issues that our users felt.

Jakob’s Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Our storefront’s checkout cart differed from the majority of e-commerce sites, in that it was place in a fixed spot on a specific page.

System Feedback

The visible response that one gets from performing any interaction (i.e. the confirmation that an action was performed). During page load, there lacked feedback that items were loading. During that time, users questioned whether the items were loading, if they had clicked the button or not, or if the site was frozen.

Crafting the Solution

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

How did we determine the correct solutions using the uncovered insights?

CRAFTING THE SOLUTION

Inspiration finding.

Knowing we’re not re-inventing the wheel, I find a good practice is to see how others are approaching the problem. And ask: What is working for them? Why may it work for us? Why wouldn’t it work for us? For example, I browsed and took screenshots and notes from the below e-commerce sites to gain some inspiration on product listings and discoverability.

Amazon

Shopify templates

Instacart

CRAFTING THE SOLUTION

Applying guidance from education on UX and visual design principles.

Scale & Visual Hierarchy

We wanted to ensure feeling of clarity, and simpleness. By setting relevant scale and visual hierarchy to our components, we made important information take centre stage, and supporting information more muted but still present. For example, here in our shopping cart dropdown, we wanted to place priority on product name, quantity, cost, and the CTA to move to checkout.

System Feedback

We improved the loading state of products, such that users received communication and confirmation that products were indeed being loaded. Rather than a simple circular loading animation, we used an animated skeleton of our product listings in order to not only communicate that the site is loading, but also hint at what is loading.

Visibility

The more visible an element is, the more likely users will know about them and use them. Our shopping cart was previously located on a certain page, in a certain location, and so may sometimes be troublesome to locate and proceed with checking out. By placing the shopping cart in the top right fixed header, this shopping cart will be accessible and visible at all times, reducing friction to checkout. Also, this plays on Jakob’s Law, as it is a common placement on other online shopping websites.

CRAFTING THE SOLUTION

Concept exploration and iterations.

Infinite scrolling vs. traditional pagination

Inspired by popular apps such as Twitter and Instagram, I was intrigued by the idea of the infinite scroll, where you can continually scroll content as new content loads in once you reach the bottom of a page. I prototyped the concept and flow, and pinned the two against eachother.

Through prototyping, I learned that it would be difficult to reach the storefront’s footer section. The concept evolved to a Load More button.

Through further research, I learned that infinite scrolling or load more buttons are popular on social media sites because users are browsing without necessarily looking for something specific. Infinite scrolling is not an ideal solution for site visitors who want to achieve goal-oriented activities.

For our purposes, shoppers are often looking for certain products, or certain categories of products. By sticking with pagination, this allows them to quickly jump to or back to products they wish to take action on. Furthermore, users have more control over how many products they can see per page, choosing a setting that fits their wants/needs with their internet speed connection (load times was a big sticking point for our users).

Infinite scrolling, or Load More button. Upon reaching the bottom (or pressing button), the product list will load more products to view (if any).

Traditional pagination. User can jump to next or previous pages, or jump directly to a certain page.

Tile & Row View Toggle

In the heart of improving discoverability, and seeing how other sites handle the display of their products, we explored the idea of allowing users to view products in a “tile” layout (i.e. multiple products per row), or “row” layout (i.e. one product per row). This would allow users to see more products more quickly, or view more of the description of products.

We loved this idea. But, it did not get implemented. Why? When scoping out the project’s dev resources and timeline communicated to our merchants, it got cutoff. We hired an external agency to handle the front-end development, and in order to meet deadlines (alongside concurrently running projects), we planned for our in-house devs to touch the back-end logic as little as possible.

But the plan was for this storefront refresh to be a kickoff v1.0 of many iterations to come. We made sure to table this new feature for future implementation!

Featured Categories

Again, in the spirit of improving discoverability, we explored the idea of implementing categories that would automatically be generated based on certain parameters (i.e. recently added, sale). Current information architecture did not allow for products to be placed in more than one category, and this was something much requested from our users.

This was another feature that got left off the table for this go around of the project due to resource and time constraints.

Execution

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

How did we go about bringing the designs to life?

EXECUTION

Working within project constraints.

When scoping out the project, we had communicated a timeline to merchants (Q1 of 2021). Though we had explore and conceptualized many new features, we knew to deliver a quality product and on time, we needed to table some features initially planned to ship.

This required pairing some designs back, and ensuring the flows within the new storefront still works harmoniously with eachother.

EXECUTION

Communicating designs to engineering.

During multiple meetings with the engineering team, I handed off Figma files, assets, and walked through flows to ensure designs were well understood.

I attended their ‘story point estimation’ meetings, and made sure I was an available resource for any questions or clarifications.

EXECUTION

Testing for QA, and catching bugs.

The team and I agreed the best person to perform QA for this project was me! I worked tirelessly with the engineering team to catch any bugs, or ensure flows performed as intended. There were many bug tickets made (as is expected), and I’m sure they were annoyed with me at times, but ultimately we were able to deliver a polished product. Hats off to the devs for their incredible work!!

EXECUTION

Launch day! 🚀

This project was surely all hands on deck. Product manager ensured we were tracking along our roadmap, customer success and sales communicated with our merchants every step of the way, marketing built out a launch campaign, and the engineering team worked tirelessly to get this across the finish line.

Takeaways

✨ Aesthetic-Usability Effect

People perceive designs with great aesthetics as easier to use.

What are some things I learned from this project?

TAKEAWAYS

Prototype with real data.

When prototyping, I often use placeholder imaginary data. But with Local Line, it’s unique in that a lot of content is user generated. Our users used certain fields in a variety of ways. For example, sometimes our users use the product description field to put recipes using that product. When making mockups, I failed to see showcase what a product listing should look like if there was a long description! So during testing, we’d see product listings that unnecessarily took large amounts of space on the screen. I had to go back, re-think what are the implications of this, and adjust designs accordingly. Had I took samples of real data during the design phase, this would have saved a lot of time.

TAKEAWAYS

Sometimes designs will need to be cut back.

My engineers always told me to dream my dream, but reality is is that some things will need to get cut due to resource constraints.

Ensure the ability to still document concept explorations such that they can be revisited in the future.

TAKEAWAYS

What may work for others, may not work for you.

During my inspiration finding exploration, I’ve learned that just because the big dogs are doing it (i.e. Twitter and Instagram infinite scroll), doesn’t necessarily mean it will work in all situations. Figure out the unique aspects of your product, and be sure to have sound design rationale other than “others are doing it”.

TAKEAWAYS

Don’t let big projects scare you!

In the beginning, the task felt overwhelming. A million different routes we can take, a million screens, states, and flows to flesh out.

Chunk the project into manageable chunks, use checklists to break those down to even smaller chunks. This way, you can have a clearer path of action, and have documentable and shareable progress.

CONTACT

Let's chat!

E-mail me at ryanctabula@gmail.com to schedule a chat or video call.

Back to Home