{"id":165,"date":"2024-07-17T05:30:23","date_gmt":"2024-07-17T05:30:23","guid":{"rendered":"http:\/\/katelane.com\/ux\/?page_id=165"},"modified":"2024-07-17T05:30:23","modified_gmt":"2024-07-17T05:30:23","slug":"case-study-mobile-storebuilder-streamlining","status":"publish","type":"page","link":"http:\/\/katelane.com\/ux\/case-study-mobile-storebuilder-streamlining\/","title":{"rendered":"Case Study: Mobile Storebuilder Streamlining"},"content":{"rendered":"\n

Project:<\/strong> SquadLocker Mobile
Summary:<\/strong> SquadLocker dealt with online apparel. Users representing a team or a larger sports organization would build a custom store for themselves and then shop for gear and uniforms. When I started, the desktop storebuilder had evolved to be decently functional, but the mobile builder hadn’t been touched in several years. Users were thrown right into the mobile storebuilder from an ad, without any education or product awareness. The mobile builder was buggy and often completely broken \u2014 unusable to the point where they’d slapped a warning on it saying TURN BACK NOW AND GO TO THE
DESKTOP. So I streamlined it and made it usable. This was a huge endeavor that increased adoption rates, which was great, but for me the triumph came in evolving a 3yo flow that had been nothing but pain for the user.<\/strong>
We completely reevaluated the flow and the users \u2014 the original design work predated the implementation (by years in some cases) and it just wasn’t representative of what the app was even doing at this point. For example, in the beginning, the goal had apparently been to aggressively target parents and get them to create an account so we could then bombard them with marketing. It wasn’t related to a building a shopping experience at all. So it was time to take a better look at how our userbase and business goals had changed, and to improve the interface with those things in mind.
My Responsibilities:<\/strong> UX Evaluation, Mockups, UX QA during the build phase
Worked With:<\/strong> CTO, Product Manager, Dev team, QA<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Clearer Choices<\/strong><\/p>\n\n\n\n

    \n
  • designated clear first step. Under the hood, it didn’t matter what the user did first \u2014 they could either upload a logo or add products. But this resulted in confusion and an incoherent interface, so we removed the neutrality and implemented the illusion of a stepped process that eliminated the cognitive noise of an unnecessary choice and offered a clear path forward<\/li>\n\n\n\n
  • cleaned up language, more productively introducing the user to product terminology. Before this, they had never seen the word “store” and suddenly we’re aggressively talking to them about their store, resulting in nothing but confusion. We asked them to “name their design” and then used that as the name of their store without explanation or option to change<\/li>\n\n\n\n
  • offered the user the ability to choose their products. Before, the app auto-populated a new user’s inventory with 100 randomly selected products (often completely irrelevant to their sport or the apparel they wanted) that they then had to manually remove one by one, which was hours of work<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    2. Improved Logo and Image Handling<\/strong><\/p>\n\n\n\n

    We made the user and their logo choices a clear second step.<\/p>\n\n\n\n

      \n
    • cleaned up confusing language \u2014 for example, previously the button had said EDIT YOUR LOGO (instead of upload) regardless of whether you’d added a logo yet<\/li>\n\n\n\n
    • added a logobank of existing images for users that had already uploaded logos. This was incredibly helpful for organizations and admins making multiple stores<\/li>\n\n\n\n
    • cleaned up some of the third party choices. We’d previously blasted users with TrustPilot reviews within the builder, but eliminated that distraction (clickbait of limited value at this stage of engagement). We improved what we were using for color detection and image manipulation (ex. removing white backgrounds from logos), and attempted to better explain
      these tools to the user<\/li>\n<\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      <\/div>\n\n\n\n

      3. Making Things Generally Easier<\/strong><\/p>\n\n\n\n

      The third and final step before store launch was a simple save. Before streamlining, we’d often lost users at this point due to confusion and commitment wariness about what they were doing (and if it was going to cost them time and\/or money). The new flow resulted in admin users that felt much more confident about launching. Additionally, we:
      \u2022 made it possible for admins to work with their store branding and change their settings (this hadn’t existed previously). I re-used the logobank functionality here
      \u2022 cleaned up forms, and integrated them so that they fed Salesforce for the Sales department, who had a goal of getting organizations to expand within our system and level up to multiple stores
      \u2022 made it easier for users to edit, to add and remove products within Store Edit mode, and for them to highlight certain products as essential (ex. core components of a uniform)<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      <\/div>\n\n\n\n

      4. A Storefront that Made Sense<\/strong><\/p>\n\n\n\n

      We streamlined everything and gave the user a storefront that didn’t confuse them.<\/p>\n\n\n\n

        \n
      • made prices and colors more clearly visible<\/li>\n\n\n\n
      • improved existing filtering and expanded filtering options<\/li>\n\n\n\n
      • added functionality so that the user could navigate within the storefront more effectively \u2014 BACK TO STORE hadn’t existed previously, and there had been no way to exit certain subflows or cancel actions.<\/li>\n\n\n\n
      • added better forms, clear statuses, and error messaging<\/li>\n\n\n\n
      • removed confusing icons that hadn’t communicated effectively<\/li>\n<\/ul>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        <\/div>\n\n\n\n

        In summary,<\/strong> we cleaned this up to the point where users were able to build their stores without pain, add customized products, and successfully open up their stores so teams could buy their uniforms. Basic functionality, but much, much more than we had before!<\/p>\n","protected":false},"excerpt":{"rendered":"

        Project: SquadLocker MobileSummary: SquadLocker dealt with online apparel. Users representing a team or a larger sports organization would build a custom store for themselves and then shop for gear and uniforms. When I started, the desktop storebuilder had evolved to be decently functional, but the mobile builder hadn’t been touched in several years. Users were […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-165","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/pages\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":1,"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/pages\/165\/revisions"}],"predecessor-version":[{"id":170,"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/pages\/165\/revisions\/170"}],"wp:attachment":[{"href":"http:\/\/katelane.com\/ux\/wp-json\/wp\/v2\/media?parent=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}