Drink Synapse
Synapse was developed from the ground up to provide true cognitive and physical enhancement at a cellular level, using only ingredients found in nature.
Real-world Scenario
Imagine your company is on the horizon of a breakthrough within your niche, but you don’t have a way to provide and deliver products online to customers within your distribution network such as Amazon.
Project Brief
The company did not have a way to sell to customers online much less have integrations set up to allow the customers to make a purchase and receive their order successfully. We needed to design a way to collect the payment, process the order, and send it to the distributors to package and ship the order. We also needed to design how the e-commerce platform would actually share the benefits of the product to ensure prospecting web traffic convert into customers.
Project Info
Client : Drink Synapse
Date : Jan 2018 – Jan 2020
Product Designer
User Research, Interaction, Visual design, Prototyping & Testing
Background
Synapse was created to provide superior focus, mental clarity, and exceptional memory function with a gentle, vibrant energy that helps you seize every moment of every day. Synapse was an innovative breakthrough within the nootropic space.
I was the entire e-commerce platform design team.
I joined Drink Synapse as a product designer 3 years ago in a company with brilliant scientists and a Coca-Cola marketing fellow. I supported design across every aspect of the business and am responsible along with the guidance of the team for leading UX and UI across key parts of the application side of the platform.
- Implemented a design process. This has helped our team establish more structure to how we conduct our work and allow other teams to gain visibility across our upcoming sprints.
- Improved usability across the platform. No usability tests were conducted by the external consultancy before dev handoff. Since we established a design team, we had been actively working towards conducting UX research and usability testing on all projects.
- Establishing a design kit. This has helped to maintain consistency in the look and feel across different parts of the platform.
- Establishing a design system. This has helped the Design and Product teams to understand how and why we choose to implement certain components over others.
Understanding the problem
Before Drink Synapse even hired a product design team, a beta release of the new platform had been implemented with limited development executed by an external consultancy. These mockups were created without any usability testing and had little consideration for the technical and product limitations on the scope of work.
I conducted research interviews with our primary users (Founding team) to uncover any pain points that they were experiencing with the beta release.
- Understanding the user goals and needs
- Uncovering pain points with the existing user journey
- Determining the success of the tasks measured
Gathering insights
After collecting the recordings from the user interviews, I conducted an exploration phase with my team to synthesize the pains identified. We grouped these problems under common themes and features in the platform.
I relied on a data-driven approach known as the severity framework to inform my process and list usability issues in order of priority. The framework helps to identify the severity score of a usability issue based on the following three variables:
Task criticality x impact x frequency = severity
- Task criticality – how important is the task to the user? (1 = low, 5 = critical)
- Impact – how much of an impact does this issue have on the user’s task? (1 = suggestion, 5 = blocker)
- Frequency (%) – how many times does this come up out of total participants?
Prioritisation of objectives
I took the extra step of categorizing these problems into broader scopes of work to provide the team and I with visibility into the key areas of the platform that needed to be addressed from a usability standpoint. This not only helped to prioritise usability issues in order of need, but also helped to shape the product roadmap for the quarter.
The founding team and I came to the conclusion that the first major scope we would prioritize would be the website integration with Amazon during an entire website rebuild as the primary objective since we could finish both objectives in one go.
Narrowing down the scope of work
Based on the exploration phase with the founding team including the head of marketing, we derived to the following key objectives:
- Build out the website from scratch using consistent branding
- Develop an integration with Amazon FBA to allow online drop shipping
- Create an affiliate program to allow influencers to promote the products at launch
Wireframing the solution
- Create a subscription model for the “4-Pack” of the product
- Design how I’d integrate Stripe into the platform to use a gateway, and save customer data securely
- Allow the website to better place data throughout to reduce support questions about the product, and better inform customers about Drink Synapse
- Design a simple yet effective affiliate program including dashboards and graphs so that users can sign up with our standardized UI patterns
Validating the designs
I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems. I wrote an onboarding script including a scenario asking the user to create a new Subscription order on mobile devices with auto-reordering enabled to have repeat purchases.
During the sessions, I observed how they interacted with the prototype and set up the Subscription. The usability session revealed that it was less arduous to set up a new Subscription due to easily being able to identify the starting process. I also viewed how users can sign up as affiliates since it was easier for the user to identify which forms they had to fill due to the new UI patterns.
Developing the designs
I created my high fidelity mockups in Invision, and then I shared with the Founding team. Once it was approved, I went to work building out the platform.
I worked very closely with the Founding team to spec out any missing interactions that were not covered in the high fidelity mockups. I conducted a UX review of each front-end query that was implemented to ensure it was aligned with the designs before it went live.
I built the platform using a combination of WordPress and custom code such as HTML and CSS to establish the platform. I made further optimizations to finish with a great result on an international server using GTMetrics.
Results and takeaways
Since the initial build out of my work, Drink Synapse was able to produce online orders, ship product using their new distribution network, and increase a brand presence. Additionally, I have received positive feedback from users about the simplified e-commerce buildout, saving them a large proportion of their time.
Some key takeaways from this project are:
- Create a strategic plan to launch an MVP. This helps deal with out-of-scope requests that could potentially derail the project and helps deliver a quality product in time.
- User testing doesn’t end after development. Design is a constant iteration of improving the experience for the end user. Always find ways to collect and listen to your user’s feedback.
- Involve the key voices upfront. This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform your design strategy.
Great Feedback
I love what I do, especially delivering excellence. Here are some of the kind words they have to say about me and our working relationship.