UX/UI
|
Product design
|
SAAS / Website
|
E-commerce
Brief
Evaluate the performance of the Shopify theme, Flow, and redesign it to enhance its overall popularity within the theme store.
Client
Discover
User research
Through user research I gathered valuable insights to inform the design direction. Shopify themes really have two users to consider: the merchant who will be customising the theme (primary user) and the end user who will be interacting with the store (secondary user).
User interview with experienced Shopify developer.
Primary user
👩💻 What I did:
-
Interviewed Flow users and competitor's users.
-
Interviewed developers who use the Shopify platform.
-
Reviewed Flow support tickets.
📍 What I discovered:
-
Users were heavily influenced by the look of theme demo stores.
-
People often buy themes without really trying them out.
-
Flow was lacking in features.
-
Users had difficulty getting Flow to look how they wanted. The settings were too complicated.
-
Industry experts preferred themes which looked slick and worked well out of the box.
Secondary user
👩💻 What I did:
Used the Baymard Institute as a trusted source for e-commerce UX research. It is widely recognised in the field and has conducted thousands of studies to understand what works in e-commerce.
📍What I discovered:
-
Don’t exceed 10 autocomplete suggestions in the search results.
-
Don’t display promotions multiple times on the product page.
-
Ensure all colour swatches are available in list items for visually driven product types on mobile devices.
-
Consider providing intermediary category pages.
Competitor research
👩💻 What I did:
-
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.
📍 What I discovered:
Competitor themes…
-
Used much more consistent language.
-
Simplified their settings as much as possible.
-
Features were easier to set up and had more of an aesthetic flair.
-
Had additional key features eg advanced search functionality.
Market research
👩💻 What I did:
-
Researched best (and worst) e-commerce UX by reading industry publications such as https://baymard.com/.
-
Looked at industry giants in e-commerce e.g. Adidas, Gucci, Wayfair etc.
📍 What I discovered:
-
Quick shop buttons are getting popular and can be great for UX.
-
Our product cards were too cluttered and hard to read.
-
Large product page images and cleaner layouts were in.
Stakeholder interviews
Throughout the whole project, but particularly in the early research stages, I had regular conversations with stakeholders involved to better understand the project's objectives...
-
The CEO helped me to understand the main business goals and long-term vision.
-
Front-end developer input was valuable in providing technical advice.
-
The project and product managers helped me understand timelines, which features to prioritise, and what users needed.
-
The marketing team shared useful information about the target audience and promotional strategies.
Define
User personas
An important first step for establishing clarity and focus, these representations of the target audience provided an understanding among stakeholders, guiding decision-making and creating empathy. They also helped prioritise features based on identified user needs, ensuring a user-centric design approach.
Empathy map
This helped me understand what users say, think, feel, and do. The empathy map was a useful guide to understand user needs and motivations. This led to more effective and user-focused solutions throughout the project.
Customer journey map
This visual representation provided an overview of key touchpoints, emotions, and pain points experienced by users. By mapping out their journeys, I identified important moments of engagement, potential challenges, and areas for improvement.
Flow was facing challenges in navigation, usability, and visual appeal, making it less competitive than other top themes.
To address this, we aimed to simplify theme settings, improve intuitiveness, and elevate the visual design. My goal was to make design improvements that would elevate Flow into the top page of paid themes in the Shopify theme store.
Project goal
Develop : Low fidelity
Concept generation
At this stage, my focus was on…
-
Using techniques like mind mapping, mood boards, and sketching to explore design possibilities.
-
Taking inspiration from leading e-commerce stores.
-
Remembering needs and preferences of users.
-
Scoring and ranking concepts based on how well they matched the design goals.
-
Collaborative decision-making sessions with other stakeholders, especially front end developers and the product manager.
-
Considering input from different perspectives and expertise to choose the most promising design concepts.
Wireframes
At this stage, my focus was on…
-
Establishing a clear visual order, focusing on element arrangement and content placement.
-
Layout exploration and functionality testing.
-
Gathering feedback from stakeholders and users, leading to adjustments based on real-world insights.
-
Collaboration among team members, sparking discussions on layout and functionality.
-
Exploring user experience without visual distractions, refining flow, navigation, and usability.
-
Saving time and resources, allowing for quick tests and problem identification before moving on to high fidelity designs.
Iterations & feedback
Engaging stakeholders for feedback throughout the design process was crucial in ensuring that Flow met user needs and business objectives as well as ensuring that designs were feasible.
This feedback loop helped me improve the designs based on valuable insights resulting in a cohesive and well-informed design.
The iterative process not only ensured that the final design resonated with stakeholders but also laid the foundation for a strong design system.
Deliver
Spec writing
To simplify the specification and handover process, I used Figma to document the visual designs. I created a library of components like buttons, forms, and icons. Each component had details like font styles, colors, spacing, sizing, and layout.
The ‘dev inspector’ tool in Figma gave developers detailed information about each component. They could inspect and extract details like fonts, colors, spacing, and sizing. This made implementation accurate and eliminated the need for extensive documentation.
User testing
We had real users try out the theme and see how well it worked and how easy it was to use.
We used Hey Carson, a platform for users to give us their comments, suggestions, and report any problems they found.
I also did surveys and interviews to get more detailed feedback from users.
Future recommendations
1. Implement designs
Due to time constraints, at the time of writing, not all recommended designs were implemented. Adding these in will push Flow even higher up the rankings.
2. Ongoing user testing
Conducting ongoing user testing with the live theme will provide insights into any areas for improvement and allow for refinement.
3. Performance optimization
Regularly assess and optimize the theme's performance, ensuring fast loading times and smooth interactions across various devices.
4. Accessibility audits
Conduct accessibility audits to ensure the theme adheres to the latest accessibility standards.
5. Adapt to trends
Stay abreast of evolving e-commerce and design trends and update the theme to reflect these.
6. Documentation
Maintain design system documentation, make sure these stay useful for devs and designers.
Develop : High fidelity
Design system
This system included visual and interaction patterns to ensure consistency and efficiency across the theme.
By using repeating elements, consistent spacing, defined widths and colour schemes, fonts, and icons, the design system ensured a harmonious and cohesive user experience.
This system not only enhanced the aesthetic appeal of Flow but also streamlined the development process by offering a set of reusable components and rules to follow.
Responsive design
The addition of a structured grid system provided a framework for organising layouts and ensuring responsiveness.
Through careful attention to responsive design principles, fluid layouts, and flexible components, I made sure Flow delivered an equally impressive presentation regardless of the device.
Accessibility
Following WCAG standards, I ensured the theme provided an accessible user experience for people with diverse abilities.
The designs accounted for features such as high colour contrast, scalable fonts, keyboard navigation, and focus states.
Edge cases & stress tests
As merchant-generated content can be unpredictable, I did thorough edge case and stress testing. This involved testing various scenarios, such as long texts, different colours, multiple languages, and various image sizes to ensure these wouldn’t break the designs.
Microinteractions
I incorporated microinteractions to provide subtle feedback and guide users through their interactions.
Feedback indicators were also added for actions like adding items to the cart.
To enhance the navigation experience, I used dynamic interaction states such as animations when transitioning between pages or sections within the theme.
Design method
I used the Double Diamond design thinking method to guide the project through distinct stages of divergence and convergence, allowing for exploration of problem spaces and ideation before narrowing down to focused solutions.
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.
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.
'This theme is as mediocre as they come'
-Flow customer, Sept 02, 2020
Overview
Feedback
‘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
‘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
‘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
‘Favorite theme I've ever worked with. Highly customizable and erases the need for several paid third-party app integrations.’
Orion Trading & Design