Shopify theme | Flow

UX Designer

UI Designer

Shopify Designer

Figma

Shopify

Eight

Design of Shopify Theme, Flow

The problem

When I began this project, Flow had already been in the theme store for several years but it was not competing effectively with other paid themes. Some customers had provided negative feedback regarding its usability and outdated aesthetics.

Challenges

Accounting for the needs of both the merchant, who will be customising the theme and the end user who will be interacting with the store itself.

Achieving simplicity in theme settings while offering flexibility and customisation options.

Balancing the needs of multiple stakeholders within the company.

Variability in merchant-generated content; designs must work with long texts, various languages, currencies and imagery.

Flow in its empty state. The content can be customised by merchants.

Research

Interviewed Flow users and competitor's users.

Interviewed developers who use the Shopify platform.

Reviewed Flow support tickets.

Used the Baymard Institute as a trusted source for e-commerce UX research.

Reviewed top 10 Shopify themes.

Usability tests on these themes.

Analysed the features offered by each theme compared to their popularity.

Evaluated competitor themes demo stores.

Checked competitor marketing strategies.

Competitor research findings

Design

Concept generation

Mind mapping

Mood boards

Sketching

Wireframes

Establishing a clear visual order

Focus on element arrangement and content placement.

Layout exploration and functionality testing.

Interactive prototypes

Brought the design concepts to life

Allowed for a dynamic exploration of the interface.

Validated user interactions, navigation flows, and functionalities.

Design system

Visual and interaction patterns to ensure consistency and efficiency across the theme.

Ensured a harmonious and cohesive user experience.

Enhanced the aesthetic appeal of Flow.

Streamlined the development process.

Responsive design

Careful attention to responsive design principles, fluid layouts, and flexible components

Ensured Flow delivered an equally impressive presentation regardless of the device

Accessibility

Following WCAG standards

Ensured the theme provided an accessible user experience for people with diverse abilities.

Edge cases & stress tests

As merchant-generated content can be unpredictable, thorough edge case and stress testing was needed.

Eg long texts, different colours, multiple languages, and various image sizes.

Micro interactions

Provided subtle feedback and guided users through their interactions.

Feedback indicators were added for actions like adding items to the cart.

To enhance the navigation experience animations when transitioning between pages or sections within the theme were added.

Demo stores

Created three different demo stores to showcase the theme and all of its amazing features

Flow demo store: Luxe

Flow demo store: Crafted

Flow demo store: Nourish

Feedback

I'm currently using the theme "Flow" by Eight and it's perfect for all my needs. I hold preorder t-shirt sales and love that I can use the countdown timer for them. The color swatches are a huge plus too! I'm very happy with how professional my online store looks now!

Elle Elle 1980

Favorite theme I've ever worked with. Highly customizable and erases the need for several paid third-party app integrations.

Orion Trading & Design

Just perfect! The theme really suits our vintage furniture shop and was easy to adapt and to implement….We are not experienced designers or developers but it was absolutely do-able.

LOUI.STORE

We've only been using Flow on two different client sites but have been very happy with the theme and support. It's the right balance between easy to set up and still customisable.

Freaky Fanatics