About Product Y:

Product Y is a Shopify app that helps to educate consumers about the hair products on a merchant’s website. Shoppers can interact with the Product Y directly on the merchant’s product page. After a quick conversation, they receive a match score which informs them of how well the merchant’s product(s) is predicted to perform on their hair. Also within the app, is an admin panel that Shopify merchants use to view app activity and manage Product Y on their site.

Essentially, Product Y provides the experience of the Product X mobile app on e-commerce platforms.

Background:

While prepping for and conducting research on Shopify merchants, I also worked on updating the consumer-facing side of the app. The wireframes that were created for v0.2 of the Product X mobile app served as a good start to the updates that were required for the Shopify app. Because of the differences between the mobile app and how the Shopify app needed to work, it was necessary to revisit the required features.

Objective:

I needed to ensure that the consumer experience provided, at a minimum, what they’d need in order to meet the end goal. To do this, the goal needed to be defined as did the steps in between. The approach I took to create what I call “the most critical experience” was as follows:

• Map out consumer journey

• Create user stories and flows

• Design wireframes

• Obtain feedback on wireframes

Solution:

Consumer Journey

To design the consumer experience, I first needed to understand how the Shopify app’s journey differed from what we knew from the mobile app. The major difference between the two was that within the Shopify journey, consumers would be interacting with the app within a browser while on the customer’s website. 

Due to this difference, I needed to design how the consumer journey should be structured. I began by sketching out ideas:

After consulting my team and what we believed to be doable, I refined and digitized the flow.

The end goal for the consumer as it strictly related to use our app was for users to receive scores (at a minimum) and purchase the scored product(s) (at a maximum).

Storyboard

In order to ensure my team and I were on the same page about how I envisioned the consumer experience to be, I sketched and provided a storyboard of the main customer journey starting from when users visit a merchant’s online store:

User Stories & Flows

After establishing the general path that we needed users to take, I produced the user stories and user flows to inform the app requirements for this first iteration. In general, users needed to be able to:

• Launch Product Y in a modal

• Easily complete the chat onboarding to receive a match score

• Receive a match score

• Enter their email address to receive a regimen recommendation

• View and edit their profile

• View details about their match score

In this flow, once the app has been launched, users chat with Product Y and receive a match score after the conversation. Once they receive a score, they have the option of getting a regimen of products from that store via email, learning more about their score, or editing their profile.

Wireframes

Following the flow, I was able to adjust the applicable mobile app wireframes (e.g., the chat screens) to match what was needed for the Shopify app in addition to design new screens that weren’t included in the mobile app. For each wireframe, I designed for mobile web first due to the large incidence of mobile use in the millennial community; then designed how that structure translated to desktop-sized browser screens. For simplicity, I’ll be previewing the mobile designs only on this page unless there is a significant difference in the desktop wireframes.

Launch Product Y

The company hired an external designer to design the UI of the button that would be used to launch Product Y (i.e., the product page button). I recommended that this button be located on the merchant’s product pages in close proximity to the price or the product image since they are areas that are most likely to be viewed. 

Additionally, consumers were also able to launch the app via selecting the Call to Action (CTA) that would live in the navigation bar of the merchant’s website. Once selected, the CTA leads them to an information page where they can learn more about and launch Product Y.

Below is an example of what a merchant product page looks like with the product page button near the price (which contains the text: “Will this work for you?”) and the CTA information page.

Chat

The chat screens were very similar to what I designed for v0.2 of the mobile app. Since the structure of these screens tested satisfactorily with the consumer audience, I chose to maintain the mobile design with the addition of a company signature and updated copy.

Receive a score & View Match Score Details

In order to receive a score, users had to complete the chat conversation and choose to view their score.

Enter Email Address to Receive Regimen Recommendation

View and Edit Profile 

Consumers had the option of viewing or changing their profile information at any time.

Lessons Learned:

There were a few steps/features in the first draft of the consumer journey that had to be removed due to constraints in development support and our intended timeline. I learned that as long as the most critical aspects of a MVP are included, they enough to move forward. I found it a bit tough to digest because of the nature of the technology industry now and the beauty industry.

Historically, in the tech industry, it’s been difficult for Black founders (especially Black female founders) to receive funding. Company X was open to funding opportunities; however, outside of one angel investor, those opportunities had not come. 

The days of releasing an amateur-looking MVP seemed to be over because in the beauty industry, there is a desire (by beauty consumers) for things to look and be polished and complete. With this in mind, along with the strong desire to prove traction to garner funding, not being able to design the most thorough product was a challenging notion for me to accept at times. How would we gain traction with a product that wasn’t fully what we intended it to be at first?

In the end, I learned that what needs to be polished are the most important, or critical experiences. In order to understand what those are, it’s a must that the users are involved early on so that they can communicate what that looks like for them.

Next Steps:

• Prototype the wireframes

• Test consumer experience and incorporate feedback

• Test CTA wording with consumers and merchants

• Test product page button wording with consumers

• Test product page button position

If you would like to continue learning about the wireframe testing mentioned in the next steps section above, please click here.