Nima Web & Ecommerce Design

For context, Nima, with its portable food tester and community data, empowers people with food sensitivities to take the risk out of dining out. As the only Designer at Nima, I lead the design of Nima's products and overall experience: Leadership | Web | Mobile.

I’m a human centered designer who (1) empathises with the user experience, (2) defines user needs and product  scope, (3) ideates with the entire business in mind (4) tests prototypes to maximise learning (5) measures results and continues to improve. 

Below, you'll find case studies about how I've designed Nima's web experience to achieve major improvements in conversion and engagement.

  1. Purchase Flow Redesign
  2. Landing Pages Redesign
  3. Navigation Redesign
  4. Purchase Flow (Continued Improvements)
  5. Blog & Email Sign-up Design
  6. Checkout Experience Redesign (In Development)
 

Purchase Flow Redesign

  • Opportunity
    • When I joined Nima, purchasing the Gluten Sensor felt confusing and appeared untrustworthy. Even worse, in order to have a successful first month using Nima, users had to purchase two products (the Gluten Sensor and a 12-Pack of Test Capsules). The poor first-month experience led to high churn. 
    • With such an opportunity to improve conversions, I took full ownership over a comprehensive redesign of the purchase experience. In addition to leading Design, I also Product Managed the project.  
  • Design Process (V1): 
    1. To empathise with the user experience, I simply bought a Nima for myself. I documented each step of the way.
    2. I shared my design audit with the executive team to expose the holes in the existing experience and suggest opportunities for improvement, prioritised by Effort x Impact in a 2x2 matrix. 
    3. I prototyped wireframes of the purchase flow with 2 potential Nima users and 2 existing Nima users. Through two rounds of qualitative user testing, I found: 
      1. A progress bar at the top of the page gave a user transparency towards what was coming next. It allowed them to navigate around anxiety-free and understand a complex product (i.e. "What are capsules?") on their own terms. In contrast, users felt boxed-in without a progress bar. 
      2. Generous amounts of information on each page like What's included and FAQ helped a customer understand what they were purchasing. Social norms of usage ("Most people test 12 times a month") reduced first-time purchase anxiety around capsules. 
      3. Existing Nima users who return to the website only to buy Capsules often navigated through the Sensor page first. Allowing them to skip to Capsules from Sensor was essential. 
    4. I worked with our web engineer, Bryant, as I designed to ensure responsiveness on all screen sizes, choosing re-usable breakpoints and text styles.
    5. After launch, I closely monitored Click Data through CrazyEgg and Behaviour Flow data through Google Analytics. The results, below, were impressive! We still found room for improvement (see next section). 
  • Results: 
    • Live website: https://shop.nimasensor.com/products/nima-starter-kit 
    • Our conversion rate increased 27%. This design change drove our business; it made the largest impact on our ecommerce conversion rate for the whole quarter. 
    • Click through increased 200% from Sensor (Step 1) to Capsules (Step 2)! This was huge for our business, because one of our a primary goals was to make buyers understand that Nima was not only a single-purchase of a Sensor but also needed recurring-purchases of Capsules. 
    • Drop-off from the Sensor page was reduced by 20% and from the Capsule page by 15%
     

    Landing Pages Redesign

    • Opportunity
      • Nima's Gluten Sensor was on the market and the release of the Peanut Sensor was approaching.
        • I saw the opportunity to dramatically improve the professionalism and trustworthiness of Nima's Brand along with our key conversion and engagement metrics. 
        • I also hypothesised that a more intuitive, educational, and enjoyable consideration and purchase first-time user experience would improve user retention.
        • Over 1-2 months, I led the research, design, and product management of a comprehensive redesign of Nima's landing pages.
    • Design Process: 
      1. To achieve the maximum impact with the most efficient use of design and engineering time, I recommended to the Nima executive team that we not only redesign the landing pages but also the navigation (see below slideshow) and also Nima's Brand (on other portfolio page) and messaging.
      2. I usually design Mobile and Desktop at the same time. However, I found that focusing on Mobile in the first two iterations saved me loads of design time I would have wasted on premature "What should go on the left or the right?"-type decisions. 
      3. I began my user research with 2 existing Nima users and 2 potential Nima users over screenshare.
        1. I asked them to talk aloud while they tried to achieve key goals in my Invision prototypes. 
        2. To set a baseline, users tapped through the existing website. I organised their feedback into low priority and high priority fixes. Then users tapped through my new Wireframes 1.
        3. I employed quotes and insights from those users' testing sessions as provocative brainstorming questions in a followup meeting with all stakeholders. 
      4. In wireframe 2, I tested the content of each section in detail with 2 gluten-sensitive Nima users and 2 peanut-sensitive potential Nima users. 
        1. By asking users what they were expecting next, I determined a successful ordering of content.
          1. First, show me what the product is. 
          2. Then, show me how to use the product. 
          3. Last, inspire me about the new lifestyle I might live. 
        2. By paying attention to the specific words users used and the scenes they described, I found the right messaging and photography to use.
        3. I also found several l differences in needs between gluten and peanut users, which led me to art-direct different peanut photography (read the case study) and refine messaging differently. 
      5. In my third design iteration, I focused on visual and language polish, sourcing feedback from other team-members in quick 2-minute critiques. With our web engineer, Bryant, I embraced flexbox and designed a re-usable responsive style system. We finished implementation well in advance of our January 8th CES launch. 
      6. One week after launch, I noticed that clicks on the landing page's videos was low. With the feedback of team-members, I diagnosed the problem to be the non-eye-catching appearance of the video buttons. I quickly redesigned the buttons and our web engineer deployed them that day. 
    • Results: 
      • Live website: nimasensor.com/gluten and nimasensor.com/peanut
      • Bounce rate decreased by 16%, due to the new content, photography, and ordering.
      • Click-through increased 41% from our landing to product pages  (Due in part to Redesigned Navigation, below
      • Email sign-ups increased 90% on the new landing pages, thanks to a more compelling call to action.
      • Our Peanut Sensor Pre-order campaign was a success. Our web engineer and I worked closely with our Support team to distill peanut sensor questions into actionable small design changes, which we regularly implemented during the 3 months of pre-order. 
      • The brand and messaging I found in the process of designing our landing pages continues to serve the entire team well, especially the marketing team when writing copy. 
      • According to our click-data, elements within the landing pages such as video buttons, customer photos, customer reviews, and how-to-use steps all received high levels of interaction. 
     

    Navigation Redesign

    • Opportunity
      • In order for Nima to grow from a single-product company synonymous with its Gluten Sensor into a multi-product company that also sold a Peanut Sensor, I needed to reflect that new information architecture by redesigning our website navigation and footer. 
    • Design Process: 
      1. I brought together all stakeholders to discuss our web strategy and to create visibility across the company into a project that would have a large impact on where our users' attention was drawn.
        1. I prepared Google Analytics data in advance so we could compare the current most popular pages to the pages we wanted to make more popular. 
        2. By studying the best practices of other multi-product companies (Nest, Apple, Fitbit, etc), I also prepared Desktop and Mobile wireframes for us critique and improve.  
        3. We decided our business priorities were the Gluten Sensor, the Peanut Sensor, and the thought leadership in our Blog. The functional actions that supported these were Support/FAQ, Login/Account, and Shop/All Products. I designed these into the Top-level Nav. 
      2. Over a few days, gathering feedback from the right team-member at the right time, I refined the navigation design.
        1. Based on user feedback from prototyping the Gluten Landing Page (see above project), I designed a Secondary Nav that would product-specific. When testing, users loved being able to jump to the Capsules page or to the Nima-Tested Map. 
        2. Based on best practices, I designed mobile versions of all navigations. 
        3. Based on click data, I dramatically simplified our Footer into only the links that users actually used. 
        4. I product managed its implementation the following sprint. I identified bugs in Internet Explorer and helped our web engineer ensure our release was robust across all browsers. 
    • Results: 
      • Live website: nimasensor.com/gluten 
      • Google Analytics data confirmed a successful release
        • Click-through increased 41% from the landing page to the product page. This was huge towards our primary business objective of increasing sales. 
        • Bounce rate decreased by 16%. (Both Due in part to Redesigned Landing Pages, above ^) 
        • Click-through to our blog increased 25%, supporting our company objective of thought leadership. 
        • Nearly 5x more people visited the Peanut page from the Gluten page, dramatically improving users' awareness of our other new product. This is important, given that people with different food sensitivities often share discoveries with each other. 
      • Click data (see above slideshow)
        • I learned that the Nima-Tested Map was surprisingly popular. Consequently, I've prioritised it in our 2018 web strategy.
        • I also learned that in the Discovery/Consideration phase that most web visitors are in, learning about and downloading the Nima App isn't nearly as important as understanding the Nima Sensor. Consequently, we've emphasised the app later in the onboarding experience of Nima Sensor owners.
        • Mobile users understood the "v" more menu icon and used it to successfully browse the gluten sub-nav.  
         

        Purchase Flow (Continued Improvements)

        • Opportunity
          • We shipped a first version of the new Purchase Flow in September 2017 and have continued to make one major improvement to it per month since.
        • Design Process (V2 - VX): 
          • Based on our ex-Director of Product's data analysis and survey results, many customers used Nima regularly but were reluctant to subscribe to regular capsule shipments because their usage was irregular, such as when travelling. 
            • I facilitated a strategy meeting between all stakeholders. We decided to prototype a Premium Membership model, where members would have anytime access to lower capsule prices. 
            • I coordinated Premium benefits with the Marketing team and Support team to maximise engagement. To support their work, I designed templates for Nima-tested Foods Reports and a re-usble logo for the Premium program. 
            • I designed a product page for Premium and incorporated it into the Purchase Flow. 
          • From qualitative feedback, we knew users needed more social proof and user stories when making a Nima purchase decision. So, a Marketing team-member and I set up a Customer Reviews system.
            • We prototyped the system by emailing a subset of 200 users an invitation to leave a review. Overwhelmed by the positive response, we sent an improved survey to all users.
            • Featuring our customer reviews on the product pages helped answer potential buyers' questions around "What is it like to use Nima in my life?" questions. Reviews also inspire potential buyers to complete the purchase process. 
          • Based on 1000 responses to our Exit Survey (which users receive if their mouse goes to close the Desktop Tab) in our Purchase Flow, I updated the language in each product page to be more clear.
            • The most common reason for not purchasing right now was looking up Insurance information. 
            • Our support team and I drafted a step by step guide to FSA/HSA reimbursement and featured a link to it in the description of every product. 
          • In my weekly sync with our Support team, I hear many insights that lead to design improvements, both major and minor. Some customers were confused -- Which subscription should they get? Light, Medium, or Heavy? 
            • I prototyped simplified names for our subscription options with 4 Nima users: 12 Capsules a Month, 12 Capsules every other month, and 24 capsules a month. Their feedback convinced the team to rename our subscription options. 
            • In my prototypes, I found users were confused with how selecting a Subscription would take them to the next step of the Purchase Flow. I worked with our web engineer, Bryant, on a hover state that would make it unambiguous (see slide above). 
        • Results: 
          • Live website: https://shop.nimasensor.com/products/nima-starter-kit 
          • Revenue per transaction increased 6.5% after adding Premium to the Purchase Flow. Many existing users have upgraded and pay a monthly fee. 
          • The addition of Customer Reviews to each purchase page has improved conversion rate by 2% (significantly). Qualitatively, it inspired good will -- we see customers quoting and thanking others for their reviews on social media. Internally, our team-members are inspired by regularly reading our customers' reviews. In a Hackathon, I posted up our favourite quotes in large print around the office.
          • Support ticket volume decreased by 50% related to Subscription Option details has since improving the Capsules page design. 
         

        Blog & Email Sign-up Design

        • Opportunity
          • Nima has a passionate content marketing team and part of our company mission is to improve food transparency worldwide. As the creator and leader in the connected food sensor category, Nima has made thought leadership a 2018 strategic objective.
            • I took the lead in redesigning our blog for readability and discoverability
            • And I led in finding ways most in alignment with the user experience to increase email sign-ups
        • Design Process (V2 - VX): 
          • I studied industry best practices (Medium, TechCrunch, etc) for the design of long-form content and blog home pages.
            • Because I was confident that application of best practices were enough, I didn't need to test wireframes. I tested a live prototype for usability with 2 users over screen share and the blog experience exceeded their expectations. 
            • With our web engineer, Bryant, I designed a responsive set of text styles that could be re-used across the entire website. I visually polished the blog.
          • I led an email strategy meeting with all stakeholders. I shared all the opportunities in the user experience to convert users to blog subscribers.
            • I designed an email signup form at the bottom of every blog post, where a happy reader would look to subscribe. 
            • I removed our "$10 off - enter your email" sign-up modal from the home page of the website. I placed it on the Gluten Sensor product page where users would be much more in the price mindset and interested in $10 off. 
        • Results: 
          • Blog Live website:  https://nimasensor.com/blog/
            • Articles Read increased 40% among blog visitors; they were reading more articles thanks to the improved typography, Related Posts section, and ease of navigating back to Blog Home.  
            • Our text style-guide has saved Bryant, our web engineer, hours of implementation time. It's also saved me hours of design-decision-making time when that time is better spent on UX decisions.
            • With the marketing team, I regularly design re-usable templates that save them time (i.e. City Guide templates).
          • Email sign-up https://shop.nimasensor.com/products/nima-starter-kit 
            • Email Signup Conversion increased 50%, as measured by an A/B test. Customers are much more excited about a $10 off discount when thinking about the product price when viewing the product page than they were when viewing the landing page. 
         

        Checkout Experience Redesign (In Development)

        • Opportunity
          • Nima is a complex product! The sensor, the capsules that need to regularly be re-ordered, the app to share your test results, the online communities and social media groups, the instructions and legalese, the firmware updates, and more.
          • I am excited to announce we are now unifying all of those touch-points into one consistent experience across web and mobile by taking ownership over our Checkout/Payments and by creating a Single Sign On accounts system! 
        • Design Process: 
          1. I studied dozens of world-class ecommerce experiences and distilled them into sets of design directives for the near-term and long-term, per our engineering team's advice on feasibility. 
          2. From our Google Analytics and industry benchmarks, we know we can dramatically increase conversion within our Checkout flow. This data helped me get the support of our CEO and CTO in prioritising this project in our Web and Mobile Roadmaps. 
          3. I studied and applied ecommerce best practices (for example Luke W's studies).
          4. And in testing prototypes with 2 non-tech-savvy and 2 tech-savvy users, I found:
            1. Reducing the number of input fields reduces the amount of time users take to checkout proportionally -- in this case by half! 
            2. A consistent visual experience from the Cart page to the Checkout page makes a user trust the security of the Checkout page much more. 
          5. I'm also Product Managing this project, working closely with the engineering team to achieve maximal impact in minimal time. I make adjustments to the designs in pre-sprint check-ins as we discover more about implementation feasibility along the way. 
        • Results: 
          • In development. However, we have already made internal process discoveries: my responsibilities as both PM and Designer on this project has significantly improved our team's pace overall.