How I designed a webpage to showcase Shopify Plus use cases for Flits

Preview of the Shopify Plus Use Case webpage. Now Live on getflits.com (Click on the image)

When I joined Flits as a product design intern, I was excited to work on a project that would showcase the amazing work that Flits does for Shopify Plus brands.

Flits is a customer account app that helps Shopify Plus merchants create personalised and engaging experiences for their customers. Flits has worked with some of the most successful and innovative brands in the e-commerce space, such as Snitch, Borosil, The Man Company and Synergee.

I had to create a webpage that would highlight the value proposition of Flits for Shopify Plus merchants and showcase the features and customisations that Flits has done for each brand. I also wanted to make the webpage interactive and responsive so that it would appeal to different audiences and devices.

The problem

The challenge was to design a webpage that would:

• Clearly highlight the Shopify Plus brands that are clients of Flits
• Show a before-and-after slider showing the features and customisations done by Flits
• Provide details about each brand, such as industry, how long they have been a client of Flits, and what challenges they faced
• List the requirements of customisation and features by each brand, and the solutions provided by Flits
• Include an interactive gallery of customisations done by Flits

The solution

I followed a user-centered design process to design the webpage, which involved:

• Researching the target audience, competitors, and best practices
• Sketching and wireframing different layout options

• Creating high-fidelity mockups using Figma
• Testing and iterating on the design based on feedback

Here are some of the key design decisions and solutions that I came up with:

A carousel of logos to highlight the Shopify Plus brands

I decided to use a carousel of logos at the top of the webpage to showcase the Shopify Plus brands that are clients of Flits. This would create a strong visual impact and establish credibility for Flits.

A before-and-after slider to show the features and customizations done by Flits

I wanted to show how Flits transforms the customer account page for each brand, and how it adds features and customizations that enhance the user experience. I used a before-and-after slider that allows the user to compare the default Shopify customer account page with the Flits customer account page. I also added labels and icons to highlight the main features and customizations, such as loyalty points, wishlists, social login, reorder, etc.

A layout to provide details about each brand

I used a layout to provide more details about each brand, such as their industry, how long they have been a client of Flits, and what challenges they faced. I also used different background colors for each card to represent each brand’s identity.

A list of requirements and solutions to show how Flits solved each brand’s challenges

I wanted to show how Flits understood each brand’s needs and provided solutions that met their requirements. I used a list format to show the requirements of customization and features by each brand, and the solutions provided by Flits.

An interactive gallery of customizations done by Flits

I wanted to showcase more examples of customizations done by Flits for different brands. I used an interactive gallery that allows the user to filter by feature or industry, and see how Flits customized the customer account page for different brands. I also added captions and links to provide more information about each customization.

The results

The webpage was well-received by both internal and external stakeholders. It helped Flits demonstrate their expertise and value proposition for Shopify Plus merchants, and attract more leads and conversions. Some of the results achieved by the webpage were:

• Increased traffic and engagement on the webpage
• Increased inquiries and sign-ups from Shopify Plus merchants
• Increased retention and satisfaction from existing clients
• Increased brand awareness and recognition for Flits

UX Laws associated with actions and design decisions

Some of the UX laws that I applied in my design process were:

• Hick’s Law: This law states that the time it takes to make a decision increases with the number and complexity of choices. I reduced the cognitive load for the user by limiting the number of choices on each screen, using clear labels and icons.
• Fitts’ Law: This law states that the time required to move to a target area is a function of the distance to and size of the target. I made sure that the interactive elements on the webpage were large enough and easy to reach, especially on mobile devices.
• Aesthetic-Usability Effect: This law states that users tend to perceive more aesthetically pleasing designs as easier to use than less aesthetically pleasing designs. I used a consistent and appealing visual style for the webpage, using colors, fonts, and images that matched each brand’s identity and Flits’ brand guidelines.
• Serial Position Effect: This law states that users have a propensity to best remember the first and last items in a series. I used this effect to place the most important and relevant information at the beginning and end of the webpage, such as the carousel of logos, the tagline, and the call to action.

Thanks a lot for reading till the end. If you have any questions, suggestions or feedback, please do share them in comments.

Signing off,

Adi