The closer you zoom in, the more you can do for human health.
All biological processes ultimately take place at the molecular level. All diseases arise at this level,
and practically all drugs act at this level. To develop better treatments, we need to understand how these molecular interactions take place.
LUMICKS arms life science researchers and drug development professionals with Nobel
Prize-winning technology to uncover how single-molecule and single-cell level processes work.
With LUMICKS’ solutions, researchers can quickly perform large amounts of automated
single-molecule experiments with more accuracy.
As a result, researchers can improve human health and answer life science questions that people couldn’t answer before.
Founded in 2014, LUMICKS went to market with the first sales in 2015 and grew successfully
to over 100 employees in 2019.
If you want to find out more about LUMICKS, watch this video to hear them speak about themselves and their mission:
In 2019, LUMICKS had already successfully sold their solutions to opinion-leading labs such as Harvard, Max Planck, Rockefeller University, and ShanghaiTech.
However, mid-2019 they discovered a challenge along the way.
The instruments that LUMICKS delivers are ready-to-use. They offer a complete ecosystem: equipment, samples, kits, reagents, software for high-throughput experiments, and dedicated training. All of this equips researchers with everything they need to perform single-molecule experiments.
But designing your own experiments and automating them requires additional programming, which prevented some researchers from taking full advantage of the opportunities that were at their fingertips.
To provide the missing element between getting the instruments and actually running the experiments, LUMICKS decided to build a product.
Harbor is a platform created specifically for researchers that enables them to make experiments easier, more reproducible, and faster than ever before.
On this platform, researchers can easily publish, download, review, and cite automation scripts and data analysis methods used for dynamic single-molecule research.
Joining the platform means that researchers can also benefit from becoming part of a community based around single-molecule experimentation where they can share knowledge and talk about their experiences.
At the moment when they approached STX Next, the LUMICKS team had a big picture idea of what Harbor would be and where they were heading. There was a high-level vision for the product, and the preliminary details and initial specifications were laid out.
But the devil was in the details, and in the many unanswered questions LUMICKS faced:
Lumicks needed not just to answer these questions, but to actually get the work done:
And that’s where STX Next came in.
Our work allowed LUMICKS to:
Among all other options, LUMICKS decided to go with STX Next as their development partner.
Here are some of the reasons that contributed to their decision.
Let’s dive deeper into each chapter of the Harbor project story.
Our work for LUMICKS can be categorized into five stages:
We’ll be looking at each of those one by one.
LUMICKS had the initial high-level idea for Harbor, but they still needed to find answers to some important questions before they could start working on an MVP:
The complexity of the project was high, but still LUMICKS needed someone to accurately calculate the project scope, the time needed to deliver it, and the budget required to finance it.
To answer all of the questions above, calculate the cost and make a plan how to build the product right, we needed to acquire a deep understanding of LUMICKS’ business context.
For such cases, our go-to solution is conducting a discovery workshop.
Think of it as a two-day process of deconstructing the product idea and its key pillars:
During the workshops, we get down to the nitty-gritty of it and assemble the vision of the product once again with a deeper understanding of the whats and hows. To do this, we use the best practices that our experts learned by building products for clients with similar technology and product challenges.
Our team, consisting of a Product Designer, a Senior Product Owner, and a Software Architect, met with the LUMICKS team for two days to work within four main modules:
We began by immersing ourselves in the biotechnology industry, using various visualization and UX techniques, as well as product workshop methods like the product value flow, story mapping, feature slicing, MoSCoW, and walking skeleton prioritization.
We wanted to get the highest possible return on the time invested on both sides, so all discussions and collaborative work were moderated. To save time, we also prepared solid inputs before each session: benchmarking discoveries, an initial version of the feature map (its “backbone”), the initial technology assumptions, and more.
Our workshop process is not just talk; its goal is to deliver solid artifacts. The artifacts can be used for internal communication, facilitating discussions with stakeholders or investors, potentially briefing another vendor or starting development.
In the case of LUMICKS, we delivered the following artifacts:
Through the workshops, LUMICKS could check their initial development assumptions: what is possible to implement in the available time, which features would be easy to build and which would be heavy, complex and time consuming.
Discovering facts about the key user group itself, e.g. why and how they’re conducting experiments, led to forming a backbone of the future scope of work. The details of the user “happy path” within the product worked as our prioritization mechanism, leading to better decisions.
Thanks to our software architecture analysis, LUMICKS learned what technologies would minimize the manpower required to build and maintain the system. They didn’t have to “learn by doing”, so they avoided costly tech stack decisions that would have been difficult to reverse. Our analysis also made it possible to mitigate risks that could have influenced scalability and the platform roll-out.
Once we knew the business case and had both the technology and product details planned, we were able to suggest the right team composition that had the right skillset and the required versatility. We were also able to deliver more accurate time and budget estimates. Without the discovery phase, the ballpark estimate for the MVP would have been anything between 3 to 9 months of development. With the discovery work done, LUMICKS could approach any software development agency and be more confident how much work the MVP will take, and what costs and timeline they should prepare for.
Ultimately, LUMICKS decided to continue working with STX Next on the design and development of the MVP. This brought some additional benefits:
Design work requires high quality input. Because we had built a solid understanding on both sides
of what needs to be achieved, LUMICKS received better assets in less time during the initial design sprint. Our Product Design Team only needed a 1-hour client meeting to confirm all assumptions before making the product come to life through UX and visual design.
Having documented artifacts and a shared understanding of the idea built throughout the workshop process greatly improved velocity at the start of the development cycle. Since the workshops already identified what needed to be built, the development team had more space to discuss how exactly the platform can be implemented. As a result, the STX Next development team delivered the first features 2 weeks after the kick-off.
5 days
(2 days of onsite workshops with LUMICKS + 3 days of internal work by STX Next afterwards)
Client Team, Product Designer, Product Owner, Software Architect
User value flow, user personas, benchmarking, customer journey, user story map, MVP definition, milestones/roadmap, software architecture overview, estimate
Facilitated discussions, moderated brainstorming, silent ideation, user story mapping, visual thinking, MoSCoW, and walking skeleton prioritization
LUMICKS had the product idea described and defined; they had a description of their users, the value flow, the software architecture, and an initial list of features needed to build the “backbone” of the MVP—all resulting from a discovery workshop with us.
But they still needed to actually get started on the design to establish what their platform is going to look and feel like.
In terms of design, they were faced with a blank page. Decisions made at this stage can influence the aesthetics and user experience of the entire final product.
They were asking questions like:
To tackle all these challenges, LUMICKS used the services of the STX Next Product Design Team.
For cases like LUMICKS, where we’re starting the design basically from scratch, our first step is to prepare what we call the Initial Design.
The Initial Design is the first iteration of the design phase of the process.
You can think of it as a foundation upon which all the rest of the design stands (our design team calls it “the soul of the interface”). All other screens, elements and assets will be inspired by the Initial Design.
If you imagine the design as a stone sculpture, the Initial Design is when you give it a rough shape for the first time, before you add more detail in further iterations.
What’s extremely important about this stage is to consider both the user experience and the visual design. The visual design doesn’t happen in a vacuum, the same way the user experience is not defined just by wireframes. If you want your users to have an outstanding, memorable experience with your product, you need to consider both UX and design at the same time.
The overall goal for this phase was to establish two baseline elements of the design approach:
We answered these questions through a series of design exercises, evaluations, and conversations.
We focused on a couple of primary views and developed the initial look and feel for those to set the tone for the rest of the elements. This allowed us to build a common understanding of how the finished LUMICKS platform would work and feel for the end user. It also gave us an opportunity to find the optimal workflow between our team and LUMICKS early on.
The entire process took place over our standard 2-week time frame. It involved a variety of roles within our Product Design Team (UX Researcher, Usability Expert, Information Architect, Interaction Designer, Motion Designer, Visual Designer) led by the Design Lead on the project.
Based on what we learned about the idea during the discovery workshops, we prepared the first visuals and user flows of the product. Our goal was to develop a primary concept of the structure, navigation and behavior within the product. It needed to be both engaging for the user and profitable and efficient for the business.
As we went deeper and deeper into our explorations, the design slowly started coming to life: how the screens looked, how they behaved, how they fit the brand personality, and more. The designs were discussed, developed, and refined into the final version through an iterative process of meetings, rapid sketching sessions, critiques, and reviews. It’s one of the most exciting stages of any project.
We ended up with a design covering the entire flow from browsing scripts from other users to creating and uploading your own scripts. Performing these tasks is the essence of Harbor.
During the Initial Design phase, many ideas are explored and validated over a short period of time; that helps us arrive at the right idea much faster. This is the time to use your imagination because in general, design will cost you less than development. Correcting a problem at the development stage can be 10 times more expensive than fixing the same problem during the UX design phase. We are well aware of that and wanted to take care of the major usability problems and questions already at the Initial Design stage.
For example, we aligned the layout structure of adding and previewing script pages to decrease the cognitive load for the user—they didn’t need to learn new concepts on each screen. We also introduced easily reusable UI components to minimize future development effort.
Establishing the north star concept for the final shape of the product creates a more mature product vision. It has enough details for the entire organization to understand what this product is about, who it’s for, and what the overall customer experience will be like.
Once the Big Idea was known, it became easier to focus on the most important features and tasks that are essential to the experience of using Harbor.
LUMICKS had the opportunity to tell us if we’re building what they need already at the initial UX concept design stage, before development even began. This makes the entire process cheaper and quicker—and less frustrating for all parties involved.
Close collaboration with a client makes them feel involved in the process but not responsible for coming up with the solutions. Since we aren’t the experts in the field of single-molecule experiments, we asked Joep, one of our stakeholders, to help us by providing real data that we could base our design on. This way we didn’t design in a vacuum and all of our decisions were based on real data that users often interact with.
A polished, attractive, logically structured design is a huge motivator for the team building the product. Developers can’t wait to turn a beautiful design into code; and they’re also relieved that they didn’t have to take on the responsibility of making design decisions. The Product Owner doesn’t have to start from scratch when thinking about new features, because the Initial Design already suggests a certain structure for the product. The Design Lead can involve more designers on different levels of exploration and make sure that the entire concept will remain visually cohesive. It’s a win-win for all!
About 2 weeks
(160 hours of the design exploration process ending with presenting the design and gathering feedback)
Product Design Team (Design Lead, UX Designer, UI Designer, Motion Designer), Product Owner, Client Team
Information architecture, use cases and user flows, low-fidelity wireframes and sketches, design moodboards, initial design compositions
Design reviews, benchmarking, use case definitions, user flow mapping, content design, behavior and interaction experiments, storytelling
LUMICKS already had artifacts from our discovery workshop: they knew the user persona, how the new product would help them, what’s inside the scope of the MVP, what is the roadmap for further development, and they had an overview of the software architecture.
They also had what we call the Initial Design: an initial set of app views that nailed the look and feel of the product, setting the tone for the rest of the elements and giving LUMICKS a common understanding of what their product feels like.
With these elements in place, our team was ready to start building the MVP for them.
But before we started actually delivering the product, LUMICKS asked us for help with a time-sensitive challenge.
They were planning to attend an international science fair, which was only one month away, and they wanted to use that opportunity to show off their product and the idea behind it to potential users.
We already estimated that the actual MVP would take a few months to build. LUMICKS needed something tangible that they could show off quicker than that, without breaking the overall product budget.
Simultaneously to working on the first production designs for the development team, we paired up with marketing representatives from LUMICKS. We helped them create interactive visuals they could use to promote the product while it was still being developed—a win-win situation.
We agreed that the most effective and time-efficient way to showcase the product would be to prepare two things:
Prototyping is an alternative way of showing an idea without actual development before launching the product to the market. It can be used to perform focus group tests, present the product to internal stakeholders, or even to show it to the end-users to gather some feedback and validate the interest in the solution.
The clickable prototype works best when based on high-fidelity wireframes or visual design. It shows the product functionality by allowing the user to click through the different views within the application.
Explainer videos are a popular marketing tool used to present how products and services work in a visually engaging way. Done right, they can build hype for a new product, help people remember it, and even get some initial leads and sign-ups.
For an example of a successful explainer video, take a look at the MVP of Dropbox. They initially launched with just an explainer video and a sign-up form to validate interest and build the user base.
Although both artifacts were meant to showcase the same experience to the user, they required vastly different processes and elements, so we divided the efforts within the Product Design team into two independent workflows. One tandem (Interaction Designer + UI Designer) created the prototype, while a second team (UI Designer + Motion Designer) worked on the animation.
The prototype team first mapped out all the functionality that we wanted to present in our prototype. Next, they produced all the elements required to fully show the idea behind the product. Finally, we created a clickable prototype using rapid prototyping software (such as Axure), allowing us to simulate the working product.
We showed all the interaction patterns and navigation, allowing users to discover the application as if it was already live.
For the explainer video, the animation process was based on a typical video production flow consisting of proper storyboarding and frame-by-frame designs. It also required some initial design adjustments as the usual video artifact proportions are slightly different than the ones treated as a standard for UI design. Lastly, each clip in the video began with a short text description explaining the value to the user.
For this part, we asked for help from the marketing folks from LUMICKS. They made sure that the message we were trying to evoke was aligned with the brand tone of voice and personality.
The video and prototype helped the users visualize and experience the product as if it was already built. People actually thought they were dealing with the real deal and asked for its availability right away.
With the visual aids, the stakeholders knew exactly what they could expect from the final product. Seeing static mockups leaves a lot of room for the imagination, while experiencing the interactions and playing around with a tool answers a lot of questions right off the bat.
The prototype became a really valuable foundation for the developers to kickstart development. They knew precisely what level of interactivity and animation to expect from various elements of the product, and they could prepare for it with the right technical decisions.
The prototype is the closest thing you will get to the working product, and it can be done in a fraction of the time at a much lower cost. It took us just 1 week to deliver the visual aids, and we managed to effectively sell the idea of the product to its future users.
About 2 weeks
UI Designers, Design Lead, Motion Designer, Interaction Designer
1. High-Fidelity Clickable Prototype
2. HD Explainer Video with Commentary
Storyboarding, rapid prototyping, style guide
Harbor had already gone through the discovery workshops, Initial Design, and prototype stages. We took the project from an unrefined idea to a concrete list of functionalities to be built, and we coupled that with a vivid look and feel, which we expressed through an initial set of “happy path” views. We had also managed to show off the idea to potential users with a one-two punch of clickable prototype and explainer video.
But now, LUMICKS needed to actually build the MVP within a tight deadline, and they tasked STX Next with the development.
While the eyes were now mostly on the development team to start delivering functionalities sprint by sprint, the developers still needed the right design assets at the right time in the right format to make the platform look and function correctly.
The Product Design team played a crucial supporting role in the MVP development.
As a design team created within a software house, we perfectly understand that designing a product doesn’t end with handing over the design specifications to the development team. In fact, that’s where the work begins.
Building a product requires an ongoing conversation and finding consensus between design and development. Sometimes, the design approach is not feasible to implement and needs to be simplified, or sometimes the design needs some additional explanation, etc. We see the way we work with our developers as a steady stream of constant conversation, allowing us to identify and address any implementation and technical feasibility issues.
This allows us to provide all the elements that the Product Owner and developers need in order to make the designed platform a reality.
For the best effect in terms of both quality of visual design and the cost-to-effect ratio (especially for web apps), a graphic designer along with a UX designer provides the full spectrum of visual assets for the development team.
We worked with the Product Owner on a regular basis and made sure that before each sprint, the development team was provided with design execution sets ready for handoff, all prepared with the brand tone of voice and business needs in mind.
These assets consisted of:
The Product Design team anticipated what the dev team might need and created design assets ahead of time. This approach also allowed us to minimize unnecessary escalations and ad hoc duct-taping later during the development phase.
The design team provides all the necessary size, space, typography, colors, styling information and assets; there was no need for the developers to guess the exact styling.
Thanks to instant annotated designs with all the relevant information for the developers, it was very easy for the devs and designers to reach a consensus. When feedback led to changes in the design, our agile process made it possible to introduce changes every iteration as needed.
We created exportable designs, so the team gained quick access to individual assets; for example, developers could extract the file of a single icon from a larger design with a few clicks. At the same time, we avoided building a specifications document; something which is neither agile nor easy to update.
Depending on the development duration
Design Lead, UX Designer, UI Designer
Screen flows; style guides (with all the necessary size, space, typography, color, styling information); responsive designs
Zeplin spaces, InVision boards
LUMICKS’ Harbor project has come a long way. We already conducted a discovery workshop, created the Initial Design, and prepared a prototype and explainer video to build awareness of the upcoming product. Our Product Design team completed the design handoff and was ready to provide ongoing production design support.
In simple terms, at this point LUMICKS knew what their product would do, who it would be for, and how it would look and feel. They also had initial interest from potential users who saw the prototype.
All that was left was to actually build the MVP. The goal of the MVP is to test the core value of the product and the most risky product assumptions with the least amount of effort.
It was time for our development team to turn the idea and the designs into working code.
First, we established the initial scope of work and filled the backlog with tasks.
The set of features agreed upon during the discovery workshop allowed us to create a backlog of functionalities to build.
We set up the happy path: the elements of the platform that the users need, start to finish, to achieve their goals.
We identified two basic types of users, each with their own goal.
User A wants to build their reputation on the web as a person who shares their knowledge and Python expertise. They use Harbor to share their scripts written in Python code.
User A should be able to:
At the same time, Harbor admins should be able to verify both User A’s account as well as the scripts they’re uploading, for security purposes.
User B wants to run single-molecule experiments, but doesn’t have the expertise to write their own scripts. They use Harbor to browse the scripts, download them, comment on them and recommend them to others.
User B should be able to:
When building the MVP, there are actually two types of tasks to be delivered: functional and technical. The technical tasks may be more “under the hood,” but they are still necessary for the final product to work.
Sprint by sprint, the development team would add technical tasks to the backlog to make the features work as intended.
Such technical tasks include:
Out of all the tasks for the MVP, 25% were technical tasks.
The Product Owner created user stories and specifications for all the tasks. The deliverables from the initial discovery workshops served as a solid basis for the list of tasks, making this step much faster. The result was an initial backlog of everything that needed to be built to deliver the MVP.
Finally, the time came to boot up our Scrum workflow and start delivering features. The programmers got to coding.
After development, all tasks went through branch testing, then further testing on the staging instance. Most of the testing was performed by the dedicated QA specialists on the team.
After testing, the tasks were signed off by the Product Owner, confirming that the functionality meets business requirements.
We reported regularly on the progress of the project. Every 2 weeks we verified the scope to make sure we would meet the deadline.
We conducted daily, 30-minute refinement meetings, each time talking about 1–2 tasks. During refinement, developers added technical tasks to the backlog alongside the business/functional deliverables from the workshop.
Four months later, after 10 sprints, the MVP was built. Our team is especially proud of the fact that almost every sprint, we delivered on the sprint goal decided by the team.
Hiring developers fast and scaling in-house teams is a notorious challenge. With our help, LUMICKS avoided it entirely.
Both User A and B could achieve their goals on the platform.
We did the work “under the hood” to make sure the product runs smoothly.
Every month, LUMICKS could see where their investment went in terms of hours spent on
building each feature.
At the end of the day, launching the product is the ultimate milestone. LUMICKS were constantly informed when the product will be ready to see the light of day.
4 months
4,700
Product Owner, 2 Frontend Developers, 1 Backend Developer, 1 QA Specialist, 1 DevOps Engineer
> Backend: Python 3.6+, Django, Rest API, PyTest
> Frontend: TypeScript, React, Jest + Enzyme
> Mobile: TypeScript, React Native
> Additional tools: JIRA, AWS, SunEditor, aioboto3, CircleCI
Scrum, code review, daily backlog refinement, fully remote work, roadmapping
Speed up work on your software projects and outpace the competition.
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}
