Mode Relier

Realizing a Founder's Vision— an efficient approach to bringing a new feature to market.

visual design
prototyping
user research
analytics
mobile app
Wireframes
Mode Relier

Background

Mode-Relier is a mobile app in the fashion space. Users can style outfits with clothes they own as well as from retailers across the web and share those styles with friends.

Situation

Mode-Relier had a pared-down v1 of their app live. It allowed users to upload images of themselves and their clothing items, and create and share outfits. However this was only a piece of the founder’s vision. The client wanted users to have the ability to search inventory from retailers across the web, pull those items into the app to create outfits, and ultimately have the ability to purchase.

Task

In order to realize this vision we needed to create a back-end solution that would allow us to pull in products from the web and implement a monetization model, as well as design the front-end user facing experience.

Approach

Parallel-pathing efforts

In order to keep the project moving at a good pace we started to parallel-path our efforts. On the back-end, we started to research various affiliate API’s to understand how we were going to bring in products and any API constraints that might impact the design of the experience. On the front-end, we started with user research to better understand the behaviors, and needs and wants of the existing user base to help inform our designs.

Phased release

Allowing users to pull in inventory from the web was the main ask for this new feature. However, Mode-Relier had a special request to allow users to fully-access this feature from within a smaller, split-screen styling experience. Because of the complexity of this, we chose to pursue a phased-release. For our first release we tackled the main functionality request and the bulk of the front-end design. This allowed us to validate API functionality and design before building additional feature complexity. Our second release included the unique ability to allow full search functionality for users while they were in the process of creating an outfit within a single screen.

Analytics reporting and marketing

To round out the project we implemented an analytics dashboard to measure engagement and monetization. This allows us to validate the success of the existing feature and start collecting data for future updates. We also helped Mode-Relier update their marketing site with new content, assets, and layout to showcase their updated product.

Working with Arthur has been great. I wish I would have found them earlier, it would have cut my timeline and costs in half!

Michelle
,
CEO
@
Mode Relier

Evolving the Chord Health Visual Language

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.

Since Chord Health was previously a B2C product, the Patient experience already featured a complete user experience.

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.

Designing the product

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.
Leveraging our client's knowledge of their customer to develop powerful personas

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.

Mapping the customer journey

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.

Press Release

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.

Building the LunaDNA Brand

Before exploring the brand’s attributes and visual language, we kicked off the project by establishing the first set of LunaDNA personas. Operating within a compressed timeline, Arthur developed proto-personas through a collaborative exercise that involved members of the Luna DNA team from various roles and departments. This approach allowed both teams to quickly align with the audience for the new platform and what value it provides the audience.

Crafting an authentic voice and tone for the LunaDNA Brand.

With the core personas identified and defined, we focused on crafting a voice and tone that was authentic to the LunaDNA team, while ensuring the messaging resonated deeply with the target audience. After several revisions, we arrived at a style that marries a friendly and relatable presence while retaining the strength of a data juggernaut through content and copy.

Visual Design and Landscape Identity

To best understand how to define the LunaDNA brand, Arthur methodically identified direct and indirect competitors. Together, we examined the use of color, typography, photography, and illustrations to understand what resonated with the LunaDNA team.

Leveraging the landscape to create the brand identity.

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.

The primary medium to experience the new LunaDNA brand was the website. Before we designed a single pixel or wrote any copy, we examined the pages that were critical to connect with their initial personas.
Information Architecture

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.

Content Design

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.

Designing the Luna DNA Platform

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.

The LunaDNA platform is a high-impact, low-frequency platform.

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.

Alignment

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.

The Content Strategy

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.

Designing the Experience

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.

Production

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.

Installation

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.

Key Moment

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.

Wrap Up

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.

Result

Within weeks of launch, engagement with the new feature was rapidly increasing. Parallel pathing allowed us to get to our first release faster; in addition, our phased-release approach allowed us to validate functionality and address small issues before building the most complex piece of the new feature - all of which ultimately saved time and money for Mode-Relier.

,
@
Mode Relier

,
@
Mode Relier

Result

Within weeks of launch, engagement with the new feature was rapidly increasing. Parallel pathing allowed us to get to our first release faster; in addition, our phased-release approach allowed us to validate functionality and address small issues before building the most complex piece of the new feature - all of which ultimately saved time and money for Mode-Relier.

Learn more about how we can launch your next feature.

Get in touch