Tag Archives: style

Thumbnail

Redesigning A Digital Interior Design Shop (A Case Study)




Redesigning A Digital Interior Design Shop (A Case Study)

Boyan Kostov



Good products are the result of a continual effort in research and design. And, as it usually turns out, our designs don’t solve the problems they were meant to right away. It’s always about constant improvement and iteration.

I have a client called Design Cafe (let’s call it DC). It’s an innovative interior design shop founded by a couple of very talented architects. They produce bespoke designs for the Indian market and sell them online.

DC approached me two years ago to design a few visual mockups for their website. My scope then was limited to visuals, but I didn’t have the proper foundation upon which to base those visuals, and since I didn’t have an ongoing collaboration with the development team, the final website design did not accurately capture the original design intent and did not meet all of the key user needs.

A year and a half passed and DC decided to come back to me. Their website wasn’t providing the anticipated stream of leads. They came back because my process was good, but they wanted to expand the scope to give it space to scale. This time, I was hired to do the research, planning, visual design and prototyping. This would be a makeover of the old design based on user input and data, and prototyping would allow for easy communication with the development team. I assembled a small team of two: me and a fellow designer, Miroslav Kirov, to help run proper research. In less than two weeks, we were ready to start.

Kick-Off

Useful tip: I always kick off a project by talking to the stakeholders. For smaller projects with one or two stakeholders, you can blend the kick-off and the interview into one. Just make sure it’s no longer than an hour.

Stakeholder Interviews

Our two stakeholders are both domain experts. They have a brick-and-mortar store in the center of Bangalore that attracts a lot of people. Once in there, people are delighted by the way the designs look and feel. Our clients wanted to have a website that conveys the same feeling online and that would make its visitors want to go to the store.

Their main pain points:

  • The website wasn’t responsive.

  • There wasn’t a clear distinction between new, returning and potential clients.

  • DC’s selling points weren’t clearly communicated.

They had future plans for transforming the website into a hub for interior design ideas. And, last but not least, DC wanted to attract fresh design talent.

Defining the Goals

We shortlisted all of our goals for the project. Our main goal was to explain in a clear and appealing manner what DC does for existing and potential clients in a way that engages them to contact DC and go to the store. Some secondary goals were:

  • lower the drop-off rate,

  • capture some customer data,

  • clarify the brand’s message,

  • make the website responsive,

  • explain budgets better,

  • provide decision-making assistance and become an information influencer.

Key Metrics

Our number-one key metric was to convert users to leads who visit the store, which measures the main goal. We needed to improve that by at least 5% initially — a realistic number we decided on with our stakeholders. In order to do that, we needed to:

  • shorten the conversion time (time needed for a user to get in touch with DC),

  • increase the form application rate,

  • increase the overall satisfaction users get from the website.

We would track these metrics by setting up Google Analytics Events once the website is online and by talking with leads who come into the store through the website.

Useful tip: Don’t focus on too many metrics. A handful of your most important ones are enough. Measuring too many things will dilute the results.

Discovery

In order for us to gain the best possible insights, our user interviews had to target both previous and potential clients, but we had to go minimal, so we picked two potential and three existing clients. They were mostly from the IT sector — DC’s main target group. Given our pretty tight schedule, we started with desk research while we waited for all five user interviews to be scheduled.

Useful tip: You need to know who you are designing for and what research has been done before. Stakeholders tell you their story, but you need to compare it to data and to users’ opinions, expectations and needs.

Data

We could reference some Google Analytics data from the website:

  • Most users went to the kitchen, then to the bedroom, then to the living room.

  • The high bounce rate of 80%+ was probably due to a misunderstanding of the brand message and unclear flows and calls to action (CTAs).

  • Traffic was mostly mobile.

  • Most users landed on the home page, 70% of them from ads and 16% directly (mostly returning customers), and the rest were equally divided between Facebook and Google Search.

  • 90% of social media traffic came from Facebook. Expanding brand awareness to Instagram and Twitter could be beneficial.

Competitors

There’s a lot of local competition in the sector. Here were some repeating patterns:

  • video spots and elaborate galleries showing the completed designs with clients discussing their services;

  • attractive design presentations with high-quality photos;

  • targeting of group’s appropriate messages;

  • quizzes for picking styles;

  • big bold typography, less text and more visuals.


Large preview

Users

DC’s customers are mostly aged between 28 and 40, with a secondary set in the higher bracket of 38 and 55 who come for their second home. They are IT or business professionals with a mid to high budget. They value good customer experience but are price-conscious and very practical. Because they are mostly families, very often the wives are the hidden dominant decision-maker.

We talked with five users (three existing and two potential customers) and sent out a survey to 20 more (mixing existing and potential customers; see Design Cafe Questionnaire).

User Interviews

Useful tip: Be sure to schedule all of your interviews ahead of time, and plan for more people than you need. Include extreme users along with the mainstreams. Chances are that if something works for an extreme user, it will work for the rest as well. Extremes will also give you insight about edge cases that mainstreams just don’t care about.

All users were confused about the main goal of the website. Some of their opinions:

  • “It lacks a proper flow.”

  • “I need more clarity in the process, especially in terms of timelines.”

  • “I need more educational information about interior design.”

Everyone was pretty well informed about the competition. They had tried other companies before DC. All found out about DC by either a reference, Google, ads or by physically passing by the store. And, boy, did they love the store! They treated it like an Apple Store for interior design. Turns out that DC really did a great job with that.

Useful tip: Negative feedback helps us find opportunities for improvement. But positive feedback is also pretty useful because it helps you identify which parts of the product are worth retaining and building upon.

Personal touch, customer service, prices and quality of materials were their main motivations for choosing DC. People insisted on being able to see the price of every element on a page at any time (the previous design didn’t have prices on the accessories).

We made an interesting but somehow expected discovery about device usage. Mobile devices were used mostly for consumption and browsing, but when it came to ordering, most people opened their laptops.

Surveys

The survey results mostly overlapped with the interviews:

  • Users found DC through different channels, but mainly through referrals.

  • They didn’t quite understand the current state of the website. Most of them had searched for or used other services before DC.

  • All of the surveyed users ordered kitchen designs. Almost all had difficulty choosing the right design style.

  • Most users found the process of designing their own interior hard and were interested in features that could make their choice easier.

Useful tip: Writing good survey questions takes time. Work with a researcher to write them, and schedule double the time you think you’ll need.


Large preview

Planning

User Journeys Overview

Talking with customers helped us gain useful insight about which scenarios would be most important to them. We made an affinity diagram with everything we collected and started prioritizing and combining items in chunks.

Useful tip: Use a white board to download all of your team’s knowledge, and saturate the board with it. Group everything until you spot patterns. These patterns will help you establish themes and find out the most important pain points.

The result was seven point-of-view problem statements that we decided to design for:

  1. A new customer needs more information about DC because they need proof of credibility.
  2. A returning customer needs quick access to the designs because they don’t want to waste time.
  3. All customers need to be able to browse the designs at any time.
  4. All customers want to browse designs relevant to their tastes, because that will shorten their search time.
  5. Potential leads need a way to get in touch with DC in order to purchase a design.
  6. All customers, once they’ve ordered, need to stay up to date with their order status, because they need to know what they are paying for and when they will be getting it.
  7. All customers want to read case studies about successful projects, because that will reassure them that DC knows its stuff.

Using this list, we came up with design solutions for every journey.


Large preview

Onboarding

The previous home page of Design Cafe was confusing. It needed to present more information about the business. The lack of information caused confusion and people were unsure what DC is about. We divided the home page into several sections and designed it so that every section could satisfy the needs of one of our target groups:

  1. For new visitors (the purple flow), we included a short trip through the main unique selling points (USPs) of the service, the way it works, some success stories and an option to start the style quiz.

  2. For returning visitors (the blue flow), who will most likely skip the home page or use it as a waypoint, the hero section and the navigation pointed a way out to browsing designs.

  3. We left a small part at the end of the page (the orange flow) for potential employees, describing what there is to love about DC and a CTA that goes to the careers page.


Large preview

The whole point of the onboarding process was to capture the customer’s attention so that they could continue forward, either directly to the design catalog or through a feature we called the style quiz.

Browsing designs

We made the style quiz to help users narrow down their results.

DC previously had a feature called a 3D builder that we decided to remove. It allowed you to set your room size and then drag-and-drop furniture, windows and doors into the mix. In theory, this sounds good, but in reality people treated it much like a game and expected it to function like a minified version of The Sims’ Build Mode.


The Sims’ Build Mode, by Electronic Arts. (Large preview)

Everything made with the 3D builder was ending up completely modified by the designers. The tool was giving people a lot of design power and too many choices. On top of that, supporting it was a huge technical endeavor because it was a whole product on its own.

Compared to it, the style quiz was a relatively simple feature:

  1. It starts out by asking about colors, textures and designs you like.

  2. It continues to ask about room type.

  3. Eventually, it displays a curated list of designs based on your answers.


Large preview

The whole quiz wizard extends to only four steps and takes less than a minute to complete. But it makes people invest a tad bit of their time, thus creating engagement. The result: We’re improving conversion time and overall satisfaction.

Alternatively, users can skip the style quiz and go directly to the design catalog, then use the filters to fine-tune the results. The page automatically shows kitchen designs, what most people are looking for. And for the price-conscious, we made a small feature that allows them to input their room’s size, and all prices are recalculated.


Large preview

If people don’t like anything from the catalog, chances are they are not DC’s target customer and there’s not much we can do to keep them on the website. But if they do like a design, they could decide to go forward and get in touch with DC, which brings us to the next step in the process.

Getting in Touch

Contacting DC needed to be as simple as possible. We implemented three ways to do that:

  • through the chat, shown on every page — the quickest way;

  • by opening the contact page and filling out the form or by just calling DC on the phone;

  • by clicking “Book a consultation” in the header, which asks for basic information and requests an appointment (upon submission, the next steps are shown to let users know what exactly is going to happen).


Large preview

The rest of this journey continues offline: Potential customers meet a DC designer and, after some discussions and planning, place an order. DC notifies them of any progress via email and sends them a link to the progress tracker.

Order Status

The progress tracker is in a user menu in the top-right corner of the design. Its goal is to show a timeline of the order. Upon an update, an “unread” notification pops out. Most users, however, will usually find out about order updates through email, so the entry point for the whole flow will be external.


Large preview

Once the interior design order is installed and ready, users will have the completed order on the website for future reference. Their project could be featured on the home page and become part of the case studies.

Case Studies

One of DC’s long-term goals is for its website to become an influencer hub for interior design, filled with case studies, advice and tips. It’s part of a commitment to providing quality content. But DC doesn’t have that content yet. So, we decided to start that section with minimal effort and introduce it as a blog. The client would gradually fill it up with content and detailed process walkthroughs. These would be later expanded and featured on the home page. Case studies are a feature that could significantly increase brand awareness, though they would take time.


Large preview

Preparing for Visual Design

With the critical user journeys all figured out and wireframed, we were ready to delve into visual design.

Data showed that most people open the website on their phones, but interviews proved that most of them were more willing to buy through a computer, rather than a mobile device. Also, desktop and laptop users were more engaged and loyal. So, we decided to design for desktop-first and work down to the smaller (mobile) resolutions from it in code.

Visual Design

We started collecting visual ideas, words and images. Initially, we had a simple word sequence based on our conversations with the client and a mood board with relevant designs and ideas. The main visual features we were after were simplicity, bold typography, nice photos and clean icons.

Useful tip: Don’t follow a certain trend just because everybody else is doing it. Create a thorough mood board of relevant reference designs that approximate the look and feel you’re going after. This look should be in line with your goals and target audience.

Simple, elegant, easy, modern, hip, edgy, brave, quality, understanding, fresh, experience, classy.


Mood board. (Large preview)

Our client had already started working on a photo shoot, and the results were great. Stock photography would have ruined everything personal about this website. The resulting photos blended with the big type pretty well and helped with that simple language we were after.

Typography

Initially, we went with a combination of Raleway and Roboto for the typography. Raleway is a great font but a bit overused. The second iteration was Abril Fatface and Raleway for the copy. Abril Fatface resembles the splendor of Didot and made the whole page a lot more heavy and pretentious. It was an interesting direction to explore, but it didn’t resonate with the modern techy feel of DC. The last iteration was Nexa for the titles, which turned out to be the best choice due to its modern and edgy feel, with Lato — both a great fit.

Useful tip: Play around with type variations. List them side by side to see how they compare. Go to Typewolf, MyFonts or a similar website to get inspired. Look for typefaces that make sense for your product. Consider readability and accessibility. Don’t go overboard with your type scale; keep it as minimal as possible. Check out Butterick’s summary of key rules if in doubt.


Large preview

Colors

DC already had a color scheme, but they gave us the freedom to experiment. The main colors were tints of cyan, golden and plum (or, rather, a strange kind of bordeaux), but the original hues were too faded and didn’t blend with each other well enough.

Useful tip: If the brand already has colors, test slight variations to see how they fit the overall design. Or remove some of the colors and use only one or two. Try designing your layout in monochrome and then test different color combinations on an already mocked-up design. Check out some other great tips by Wojciech Zieliński in his article “How to Use Colors in UI Design: Practical Tips and Tools”.

Here’s what we decided on in the end:


Large preview

The way we presented all of those type variants and colors was through iterations on the home page.

Initial Mockups

We focused the first visual iteration on getting the main information clearly visible and squeezing the most out of the testimonials and style quiz sections. After some discussion, we figured it was too plain and needed improvement. We made changes to the fonts and icons and modified some sections, shown in iterations 2 and 3 in the image below.

We didn’t have the time to design custom icons, but the NounProject came to the rescue. With the SVG file format, it’s very simple to change whatever you need and mix it with something else. This sped up our work immensely, and with visual iteration number 4, we signed off on the design of the home page. This allowed us to focus on components and use them as LEGO blocks to build the templates.


Large preview

Components System

I listed most components (see PDF) in a Sketch artboard to keep them accessible. Whenever the design needed a new pattern, we’d come back to this page and look for ways to reuse elements. Having a visual system in place, even for a small project like this, kept things consistent and simple.

Useful tip: Components, atoms, blocks — no matter what you call them, they are all part of systematic thinking about your design. Design systems help you gain a deeper understanding of your product by urging you to focus on patterns, design principles and design language. If you’re new to this approach, check out Brad Frost’s Atomic Design or Alla Kholmatova’s Design Systems.


Part of the pattern library. (Large preview)

Prototyping With Code

Useful tip: Work on a prototype first. You can make a prototype using basic HTML, CSS and JavaScript. Or you can use InVision, Marvel, Adobe XD or even the Sketch app, or your favorite prototyping tool. It doesn’t really matter. The important thing is to realize that only when you prototype will you see how your design will function.

For our prototype, we decided to use code and set up a simple build process to speed up our work.

Picking tools and processes

Gulp automated everything. If you haven’t heard of it, check out Callum Macrae’s awesome guide. Gulp enabled us to handle all of the styles, scripts and templates, and it outputs a ready-to-use minified production version of the code.

Some of the more important Gulp plugins we used were:

  • gulp-postcss
    This allows you to use PostCSS. You can bundle it with plugins like cssnext to get a pretty robust and versatile setup.
  • browser-sync
    This sets up a server and automatically updates the view on every change. You can set it to fire up upon starting “gulp watch”, and everything will be synced up on hitting “Save”.
  • gulp-compile-handlebars
    This is a Handlebars implementation for Gulp. It’s a quick way to create templates and reuse them. Imagine you have a button that stays the same throughout the whole design. It would be a symbol in Sketch. It’s basically the same concept but wrapped in HTML. Whenever you want to use that button, you just include the button template. If you change something in the master template, it propagates the changes to every other button in the design. You do that for everything in the design system, and thus you’re using the same paradigm for both visual design and code. No more static page mockups!
Components and templates

We had to mix atomic CSS with module-based CSS to get the most of both worlds. Atomic CSS handled all of the general styles, while the CSS modules handled edge cases.

In atomic CSS, atoms are immutable CSS classes that do just one thing. We used Tachyons, an atomic toolkit. In Tachyons, every class you apply is a single CSS property. For instance, .b stands for font-weight: bold, and .ttu stands for text-transform: uppercase. A paragraph with bold uppercase text would look like this:

<p class="b ttu">Paragraph</p>

Useful tip: Once you get familiar with atomic CSS, it becomes a blazingly fast way to prototype stuff — and a very systematic one, because it urges you to constantly think about reusability and optimization.

A major benefit of prototyping with code is that you can demo complex interactions. We coded most of our critical journeys this way.

Designing micro-interactions in the browser

Our prototype was so high-fidelity that it became the front-end basis for the actual product — DC used our code and integrated it in their workflow. You can check out the prototype on http://beta.boyankostov.com/2017/designcafe/html (or live on http://designcafe.com).

Useful tip: With HTML prototypes, you will have to decide the level of fidelity you want to achieve. That might get pretty time-consuming if you go too deep. But you can’t really go wrong with that either because as you go deeper and deeper into the code and fine-tune every possible detail, at some point you’ll start delivering the actual product.

Sign-off

Clients, especially small B2C companies, love when you deliver a design solution that they can use immediately. We shipped just that.

Unfortunately, you can’t always predict a project’s pace, and it took several months for our code to be integrated in DC’s workflow. In its current state, this code is ready for testing, and what’s better is that it’s pretty easy to modify. So, if DC decides to conduct some user tests in the future, any changes will be easy to make.

Takeaways

  • Collaborate with other designers whenever possible. When two people are thinking about the same problem, they will deliver better ideas. Take turns in taking notes during interviews, and brainstorm goals, ideas and visuals together.

  • Having a developer on the team is beneficial because everyone gets to do what they are best at. A good developer will spend as little as a few minutes on a JavaScript issue that I would probably need hours to resolve.

  • We shipped a working version of the website, and the client was able to use it right away. If you aren’t able to sign off on the code, try to get as close to the final product as possible, and communicate that visually to your client’s team. Document your design — it’s a deliverable that will be used and abused by everyone, from developers to marketers to in-house designers. Set aside some time to make sure all of your ideas are properly understood by everyone.

  • Scheduling interviews and writing good surveys can be time-consuming. You have to plan ahead and recruit more people than you think you will need. Hire an experienced researcher to work with you on these tasks, and spend some time with your team to identify your goals. Be careful when sourcing participants. Your client can help you find the right people, but you’ll need to stick to participants who meet the right demographics.

  • Schedule enough time for planning. Project goals, processes, and responsibilities should be clear to everyone on your team. You need time to allow for multiple iterations on prototypes, because prototypes improve products quickly. If you don’t want to mess with code, there are various ways to prototype. But even if you do, you don’t need to write flawless code — just write designer’s code. Or, as Alan Cooper once said, “Sometimes the best way for a designer to communicate their vision is to code something up so that their colleagues can interact with the proposed behavior, rather than just see still images. The goal of such code is not the same as the goal of the code that coders write. The code isn’t for deployment, but for design [and] its purpose is different.”

  • Don’t focus on a unique design per se, unless that’s the main feature of your product. Better to spend time on things that matter more. Use frameworks, icons and visual assets where possible, or outsource them to another designer and focus on your core product goals and metrics.

Smashing Editorial
(mb, ra, al,yk, il)


Link:  

Redesigning A Digital Interior Design Shop (A Case Study)

Beyond Tools: How Building A Design System Can Improve How You Work

When high potential projects fall apart, it’s often a failure of collaboration and alignment. The tools, the assumptions, the opportunity, and the intentions may line up, but if people don’t communicate or don’t have a clear map to help them move in the same direction, even the best projects falter.
Communication failures are human problems, so they’re messy and hard to solve. They involve feelings and a willingness to have uncomfortable conversations.

Original source:

Beyond Tools: How Building A Design System Can Improve How You Work

A Comprehensive Guide To User Experience Design

(This is a sponsored article.) Having undertaken initial user research and analyzed your research findings, the next phase of the design process is to apply what you’ve learned by developing a series of designs to test your assumptions. In the fourth article in my series for Adobe XD, I’ll be focusing on the initial phase of the design process.
Within this overall series of ten articles, this is the first of three that tie together the design process.

Link to article: 

A Comprehensive Guide To User Experience Design

Why Spending $1,000 on Instagram Influencer Marketing is Worth It

instagram influencers

You might have noticed that influential Instagrammers are doing a lot of promotions for brands relevant to their niche. Being such a visual platform, Instagram may be the best platform for you to run your influencer marketing campaign. Maybe you’re tempted to try it out, but you’re not too keen on investing in a platform that you’re not sure would deliver results. So let’s take a look at some of the reasons why it’s worth it to spend your marketing dollars on Instagram influencer marketing. You’ll Reach a Massive Audience While Facebook still dominates social media usage, Instagram is the…

The post Why Spending $1,000 on Instagram Influencer Marketing is Worth It appeared first on The Daily Egg.

Continue reading – 

Why Spending $1,000 on Instagram Influencer Marketing is Worth It

Minimalistic Design With Large Impact: Functional Minimalism For Web Design

(This is a sponsored post). As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions.
In this article, I will discuss some examples of minimalism in web design, things to consider when designing minimalist interfaces, and explain why sometimes “less is more”.

View post: 

Minimalistic Design With Large Impact: Functional Minimalism For Web Design

Glossary: Guerilla Marketing

guerilla marketing

Guerrilla marketing is a form of marketing that utilizes unconventional tactics to get maximum results when promoting a business or service. As the name suggests, this style of marketing relies heavily upon surprise, creativity and shock and awe tactics. Thus, large quantities of money are not necessarily required to perform guerrilla marketing — making it an ideal strategy for startups, small businesses and enterprises alike. It’s a much more personal form of marketing and tends to humanize even the largest of brands. Regardless of the size of your company, a little excitement and buzz surrounding your brand can always be…

The post Glossary: Guerilla Marketing appeared first on The Daily Egg.

Source article: 

Glossary: Guerilla Marketing

Web Development Reading List #185: Safari 11, New Edge Build, Chrome 59, And CSS Optimization Insights

This week was full of great browser vendor news: Safari 11 was announced with long-awaited features such as WebRTC and tracking protection, and a new Edge build with new CSS features is now available, too. But the past few days also had some valuable articles up their sleeves: about implementing HTTP/2 push, using datetime-local, and slimming down your CSS, for example. I collected everything in this reading list for you, so you don’t miss out on anything.

See original article: 

Web Development Reading List #185: Safari 11, New Edge Build, Chrome 59, And CSS Optimization Insights

Thumbnail

A/B Test Ideas for Fashion Ecommerce Websites

The face of fashion ecommerce is undergoing a change. The transition from a brick-and-mortar store to an online one is accompanied by perennial problems, leading to a high return rate of ordered items.

However, the online fashion and apparel industry continues to adapt to this change through use of new technologies and strategies. Other than adhering to prevalent industry best practices, you can also come up with innovative ideas that can help you attract, engage, and retain more visitors on your website.

Here are 6 ideas on how you can grow your online apparel business while maintaining your brand esthetics. Based on these ideas, you can create variations and run A/B tests on your website.

Cross-Selling Style-Based Combinations

Cross-sell an entire set based on season, style, festival, and others, while providing a stand-out description.

Cross-selling idea for fashion ecommerce
Source: Zalando

You plan to add sneakers with a new design, an offbeat color, and a slightly higher price compared to your current best-seller in the same category. On your website, it would show up in the Shoes and New Launches categories. Other than this, what can you do to have your visitors go for it?

Don’t leave the sneakers alone. Showcase those along with items from other categories with which these can go along well.

Look at what Zalando, UK does. Within each category such as Men, Women, and others, it has a subcategory Inspiration, which includes the Looks of the Week section.

This section showcases a new item with additional items to complete the suggested outfit. Over and above this is the vivid description, which can attract visitors to go for more than they are looking for.

The updates ensure freshness through new themes every week.

The above idea is primarily used for new launches during a particular season; but you can also A/B test and apply it for upcoming festivals, events, and other special days.

What to measure:

  • Increase in % of sales through clicks to the new upselling category link
  • Average order value (because of the new category)
  • Increase in clicks to the upselling category link
  • Increase in the revenue (with this category also contributing to the increase)

Resolving Customer Concerns through Additional Filters

Add sale discount percent and cloth material as filters along with size and other filters within a category/subcategory.

Filters for easy search on fashion ecommerce websites
Source: Lyst

At times, it becomes tricky for your customers when they find the desired apparel item, but not the desired price. The reverse is also a common sight. How do you save them from an endless search on your website pages?

Lyst has addressed this problem to an extent. There are additional, unique filters for its customers to fine-tune their search. In the above screenshot, two of these filters—sales discount and material—are used to narrow down the available options.

What to measure:

  • Pages/session
  • Average session duration
  • Number of visits to the product page as a result of these clicks
  • Total transactions
  • Total revenue due to this A/B test
  • Revenue per visit

Adding Variety to Navigation Options

Add color and designer name as filters along with size and price.

Displaying only red-colored and blue-colored apparel items
Source: Otte NY

While adding size and price filters helps your visitors shortlist and display what’s available for them, having colors as a filter helps them personalize their choices. If this, along with other filters, still leaves the visitors with a high number of displayed options, you can provide more filters, such as designers.

In the screenshot from Otte New York, selecting 2 colors and 3 designers in the New category narrows down the comprehensive product listing to a more manageable 10 products on the screen.

What to measure:

  • Increase in the number of visits to the product page as a result of clicks on new search filters
  • Increase in the number of purchases as a result of the number of visits

Interaction Analytics: Use heatmaps to see if new options are resulting in increased activity on the filters.

Offering Customer Choices through Sale

Allow products to be earmarked by visitors for a sales reminder.

Tagging specific products on a fashion website
Source: Lyst

Do you see the message between two products on the Lyst category page? While it’s good to have increased visitor engagement on your website pages, this message tells the visitors that if price is a bottleneck, then they have the option to “wait and get” what they are looking for. This can encourage them to not only indicate their choices, but also bookmark the website for a future revisit.

While you can go ahead with this idea and A/B test it; on the same lines, you can also go for similar triggers checking with the customers softly if they need any help while finalizing their current purchase.

Note: You should not test similar ideas together. It may make it difficult to attribute your results with the correct idea. Also, excessive triggers and interruptions can lead to unpredictable visitor behavior.

What to measure:

  • Change in the purchase frequency of repeat customers
  • Change in the repeat purchase rate
  • Change in the revenue for specific durations (when the earmarked products go on sale)

Providing Cross-Selling Offers on the Product Page

Share cross-selling offers on the apparel product page.

Cross-selling on a fashion product page
Source: Farfetch

Use heatmaps and past data while planning such promotions. In the screenshot from Farfetch, UK, note the brevity and clarity in the cross-sell message, and the optimum position in which it is placed, as opposed to a “Recommended products” carousel after the product details. Your offer details should not mix with the product description.

Offer similar or complementary products together. Such offers should not distract visitors away from the product page they are on. Instead, the combined value of the products should attract them to go for it.

Note: Amazon makes about 35% of its revenue from cross-selling.

What to measure:

  • Number of products purchased per order
  • Increase in the average order value

Personalizing Visitor Experience on Product Pages

1) Provide the option to view close-ups of items on fashion product pages.

Close-up of a linen coat on a fashion product page
Source: Ralph Lauren

Remember those models on your television screen posing with the latest designer suits, followed by close-ups of the suits from different angles. This idea goes on to mirror the same experience for your customers. The above image from Ralph Lauren shows how visitors on your site can get to see a zoomed-in view when they select a particular section of the product.

What to measure:

  • Pages per session and session duration for product pages providing this option
  • Add-to-cart numbers from products with the new option

Interaction Analytics: Use session replays to see engagement with the feature.

There may not be a direct correlating impact on the revenue as a result of this change. However, increased engagement could mean a better customer experience.

2) Target Categories for Specific Situations

Targeting unique categories in fashion ecommerce
Source: Old Navy

Segmentation based on multiple requirements would just make it so easy for your customers. Here, Old Navy comes up with a standout idea. On the home page itself, size comes into picture right after the gender. For example, Women and Women’s Plus are two categories differentiated on the basis of size. Maternity comes out as another unique category.

In addition, the visitors can also specify their body types to narrow down their search. For example, the Boys category has Husky and Slim as two differentiators.

The category pages continue with the practice, as they ease your search further. For example, the tagline for Women’s Petite says “Specially designer for Women 5’4” & Under.”

What to measure:

  • Time to purchase should go down, as the visitors should be able to quickly self-select.
  • Conversion rate should go up.

Interaction analytics: Engagement should be higher.

Your Turn

By now, these ideas would have created a chain reaction of sorts for you, helping you come up with more ideas to A/B test. So if there’s something that you would want to add or suggest, please share your responses in the Comments section below.

Free-trial CTA

4

1 ratings

How will you rate this content?

Please choose a rating

The post A/B Test Ideas for Fashion Ecommerce Websites appeared first on VWO Blog.

See original article here: 

A/B Test Ideas for Fashion Ecommerce Websites

Styled-Components: Enforcing Best Practices In Component-Based Systems

Building user interfaces on the web is hard, because the web and, thus, CSS were inherently made for documents. Some smart developers invented methodologies and conventions such as BEM, ITCSS, SMACSS and many more, which make building user interfaces easier and more maintainable by working with components.

Styled-Components: Enforcing Best Practices In Component-Based Systems

After this shift in mindset towards building component-based user interfaces, we are now in what we like to call the “component age.” The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution.

The post Styled-Components: Enforcing Best Practices In Component-Based Systems appeared first on Smashing Magazine.

Read More: 

Styled-Components: Enforcing Best Practices In Component-Based Systems

React Native For Web: A Glimpse Into The Future

One of the hardest decisions to make when starting a new app is which platforms to target. A mobile app gives you more control and better performance but isn’t as universal as the web. If you’re making a mobile app, can you afford to support both iOS and Android? What about trying to build a mobile app and a responsive web app? Ultimately, the best experience for your customers is for your app to work everywhere, but the development and maintenance costs of that can be prohibitive.

Link: 

React Native For Web: A Glimpse Into The Future