Infobip was expanding its global messaging platform, looking to allow its users to connect with their customers on their preferred channel. Previously, when customers wanted to make changes to the channels or services that were attached to their account, the customer contacted their account manager.
Infobip wanted to empower its customers to more quickly and efficiently customize their Portal experience. Infobip previously allowed developers to send messages across newer channels like Whatsapp and Viber. Infobip wanted to bring that functionality into their web platform and needed the experience to let their users sign up and send on a variety of messaging channels.
Infobip needed a central location for users to discover, view, and upgrade to new add-ons. With a mix of Infobip-specific apps, as well as third party messaging apps, were many. Finally, we wanted to help users to discover apps and add-ons that would help their businesses.
We worked onsite in a two-week sprint with the Infobip product management team. We worked directly with the product owner for each respective channel and service that we were including on the App store. The first step was to identify all of the consistent content across all channels, to ensure a consistent design and experience for each page in the app store.
The app store is available to all self-serve customers. Infobip customers are now able to customize their experience to use the tools and services that they want without needing to contact their account manager.
We expanded our purview to consider the growing brand. While Chord Health currently offered regenerative therapies for chronic back pain, they had plans to include therapies for chronic hip and knee pain as well. We worked to design core brand styles and attributes that scale from a single- to a multiple-product offering.
However, the entire B2B portal was brand new, being built from the ground-up. It included a suite of initial complexities due to the relationships between certain players on the platform, such as Corporations, Clinics, Users, and Patients. During our kickoff, we aligned on the relationship between all objects in the system, information architecture, core persona roles, and the new user experience.
With the core information and relationships defined, we created interactive prototypes and delivered visual design for the entire B2B product. We created a comprehensive component library for use on future pages, as we knew that chord Health was planning to scale into new therapies.
Chord Health launched its new B2B platform in March 2019. We continue to work together to determine the roadmap for upcoming products, investigate how to evolve the Patient experience, and update the design.
Access to customers was limited, so we relied on the collective knowledge of the NeuroGym team to create a model of their customer. Members of the NeuroGym team each sketched several personas, each one representing a different customer segment. Afterward, we regrouped as a team, consolidated information, and refined the information into a set of personas.
We selected one of the personas and mapped their journey from the homepage through signup, onboarding, and completion of the initial course in the program. We included NeuroGym employees from several departments— including finance, operations, customer support, product, and sales, so that all key stakeholders had a consistent understanding of the path that their customers take. Customer Support relayed that when conducting exit interviews with customers who requested refunds, many customers noted that the actual program didn’t match their expectations once they signed up.
We challenged the team to imagine the future state of the onboarding experience. All members of the team wrote a forward-thinking press release, envisioning how the company would announce the new product revision to the world. This aligned their team on the direction of their product and generated hope and excitement for the project.
After analyzing the brand landscape of LunaDNA’s industry, it was time to take those insights and combine them with the personality of LunaDNA to develop a set of visual language guidelines. We used mood-boards and design tiles to explore various choices in type, image treatments, and interaction styles that represented the brand.
With a robust marketing and content strategy in place, a short and sweet approach to the information architecture was ideal. Our goal was to quickly get the website into the hands of users so that we could validate the positioning, messaging, and content.
In parallel to the visual design exploration, we defined the content strategy for the core website pages by utilizing the personas, their motivation, and the LunaDNA mission of advancing medical research. Page stories, content documents, and high-fidelity wireframes allowed us to write succinct copy that resonated with the LunaDNA personas.
With all of the work we'd done to define the brand, from content to visual exploration, we were able to move seamlessly through visual design execution and into development; bringing the experience to life.
We designed the new user signup flow to be simple, relatable, and adaptive to all users, even when presenting complex scientific topics and the importance of data privacy.
Our teams worked together to sketch and refine the flow, focused on allowing users to experience the value of the LunaDNA platform as quickly as possible. We progressed from whiteboards to flowcharts, wireframes, and clickable prototypes to ensure that our flow covered all possibilities.
It informs the user of how many shares they have earned in LunaDNA and allows the user to earn more shares by contributing additional data. We established a cohesive brand experience by extending the visual styles and voice and tone across the marketing site into the LunaDNA platform.
LunaDNA launched their beta in September of 2018. We’re proud to have partnered with them to make their ambitious dream a reality and contribute to the global research community.
We started with an “anything is possible” mindset towards creating an interactive experience. Through stakeholder interviews, we quickly realized this project was about empowering the Sales team. The work for Arthur was to communicate this complicated, fluid subject in a brief and impactful way.
This installation fits within the larger Partnership Center sales narrative. To gain full context of this project, it was necessary to understand how the Partnership Center team uses the space. This included everything from their talking scripts to how the team will physically move through the experience and approach each activation with prospective clients.
Through exploration, we realized the best execution was a combination of a digital experience that could easily be updated and a physical experience that could be touched, driving home the idea of hardware prototyping. Additionally, the idea wrapped these pieces in a way that conceptually represents Area 404 and accommodates the best presenting experience on-site.
We worked with the Area 404 and Partnership Center teams to create digital content to be assembled into a small, interactive application the Sales team could walk through with visitors.
We worked with Area 404 prototyping engineers to create a series of “sample tiles,” which are physical tiles that guests could touch and interact with. Each tile represented a short story relating to Area 404’s involvement with innovation projects and their production capabilities.
Design inspiration for the overall installation was drawn from the physical elements of Area 404’s labs, including colors, materials, and textures. We optimized the larger composition of the installation for the physical location within the Partnership Center. It also reflects a directional flow which pairs with the narrative of the piece and guides visitors through the space.
We sourced multiple vendors to build and install the majority of the installation. This involved video calls and site visits to ensure design intentions were communicated clearly and materials and production were up to spec and on schedule.
Approaching the launch date we faced a unique challenge with our initial vendor for our installation structure. Without losing a step, we made quick decisions and sourced a more capable vendor to close out the project within our timeline and budget.
This was a combination of project management and iteration. We worked with multiple parties and vendors to install the larger elements of our piece. For the digital experience, we partnered with the internal Facebook IT teams to iterate and finalize the application. As a cohesive group, we adjusted and evolved our “sample tiles” with the Area 404 team after on-site user tests, ultimately landing on the correct experience that enables the Sales team to be successful.
A key moment in the project came during the content strategy phase. After multiple stakeholder interviews and writing exercises, we concisely articulated key points of the innovation story, solidifying the conceptual direction of the installation.
This allowed us to begin iterations of the physical execution, creating content for the sales team, the digital application, “sample tiles,” and establishing alignment with stakeholders across multiple teams.
The installation has succeeded in empowering the Partnership Center team to speak about innovation across Facebook, and the Area 404 team is excited to represent that larger narrative. The exposure for Area 404 inspired more teams to reach out for rapid prototyping support, ultimately supporting Facebook’s internal mission to “move fast and break things.”
In addition to evolving the Partnership Center experience for Dublin and Singapore, we’re currently working with Area 404 on installations across multiple lab locations. We plan to create pieces that showcase Area 404’s capabilities and enhance the overall experience for anyone visiting or working in their labs.
Within the new product experience for Ice Cream, there were several smaller projects, each adding necessary functionality to the overall product.
No matter if a user signed up cold, received a share link, or was invited via email, we designed the experience that merged the account setup, purchase, and onboarding flows.
Ice Cream leveraged integrations with developers’ best friends: GitHub, Jenkins, JIRA, Bitbucket, and other tools. We sketched interfaces and prototyped the flows to setup and configure integrations with external systems.
When the User logs into Ice Cream, the first page they visit is the Dashboard. Users start work from here each day. As a result, we designed the Dashboard to be modular, accommodating standard and customizable widgets.
Working remote from a client can often cause communication breakdowns. For us, it was the complete opposite. We developed an efficient, lightweight communication framework to ensure seamless alignment between our team, our client, and our client’s offsite development teams.
Each wireframe was built in a clickable prototype. At the end of each workday, we recorded recap videos, walking through the prototype, new designs, or new UX concepts. The combination of multiple weekly check-ins, interactive prototypes, and recap videos eliminated miscommunications and accelerated our team’s decision-making.
When the project concluded, we handed off our wireframes and prototypes to CollabNet’s internal development team to implement. Later, in the middle of implementation, CollabNet merged with VersionOne, a leader in the enterprise agile lifecycle management industry, to operate as a company that excelled in DevOps, agile training, and lifecycle management.
We hosted a collaborative workshop, bringing in all members of their company. Over the span of several hours, we methodically uncovered the jobs, pains, and gains of each of their customer segments. Together, we refined their customer segments into distinct personas, each with specific behaviors, needs, and aspirations.
With personas complete, the next task included the definition of the value provided by the Rally product and services. Listing out features, benefits, and how they match with their customer segments was an eye-opening activity. It aligned their entire team as to how their product resonates with their customer base. The strategy workshop ultimately resulted in a single statement, combining the value of the product with the need of the customer. Rally used this value proposition statement to refine messaging on their website.
During the process of validating the messaging and value proposition, Rally uncovered a better opportunity to pivot into what the platform is today.
Following their strategic pivot, Rally built out the MVP of their evolved platform. With the platform up, running, and accepting new users, Rally brought Arthur in to evaluate and validate the UX and flow of their MVP.
Interface by interface, we catalogued the new user experience and followed the path through completion of the core user activity: collecting responses from customers. Throughout the process, we were able to identify excellent usability patterns and areas for improvement. In the end, we compiled a summary to detail items that were quick wins and items that needed more substantial discussions to understand the impact and effort.
ISSA had a wealth of research for us to start with, including original transcripts and summarized findings from user and stakeholder interviews. In addition, we gathered copies of transcripts from their Support department and access to user research polls.
We organized the feedback into key areas of friction throughout the online experience, from initial sign up through post-certification support. The feedback was transitioned into a roadmap that would guide us through the launch of an updated course experience, including design, user-testing, front-end development and implementation.
Our first phase of execution involved sketching various concepts to address the friction that we found. We kept things at a low fidelity, using only markers and paper to brainstorm ideas, then fleshing out those sketches on whiteboards. We then shared our whiteboard sketches with client stakeholders for feedback.
Maintaining a low fidelity approach allowed us to move rapidly through a number of concepts without getting tied up in UI details. Low fidelity concepts kept the conversation at the appropriate level for this part of the project.
After a couple rounds, we landed on a variation of a single concept that solved for the majority of issues we were looking to address.
We turned our sketches into wireframes to refine our ideas and dig deeper into a detailed level of execution. After reviewing and iterating with client stakeholders, we were ready to validate our ideas with actual users. We created low-fidelity, clickable prototypes to walk through with existing ISSA students. Fortunately, the ISSA community is highly engaged and we quickly gathered a group of users that were eager to participate. We used screen sharing tools and video calls to watch users click through our prototype and talk through the experience with them.
Our main goal was to validate our concept for organizing course information and navigation. Our concept was successful across all of our interviews. In addition, we were able to discover several smaller insights to general student behavior, which informed additional unplanned updates. With our concepts validated, we moved confidently into visual design.
A key moment in the project came as we compiled our findings from user interviews. We received unanimous validation in our approach to restructuring the course, making students' lives easier. In addition, we also got a sense that students would respond well to an updated learning experience.
This discovery prompted us to work with the client to figure out how to “fast-track” our original project schedule, getting new designs live about 4 months earlier than originally planned. This was done with the understanding that we would launch with an MVP and iterate once we received feedback from users.
Our process allowed us to move quickly into execution and ultimately push new designs live faster than originally anticipated. Our relationship is ongoing and we’re continuing to iterate on the course experience, keeping users engaged throughout their education and into their fitness careers.