About Product X:
Product X is an iOS app that helps beauty consumers find hair products that will most likely work well for them. With the help of this expert system, consumers answer 4 questions via chat and are able to scan or search for hair products to receive personalized predictions (known as match scores) on their performance.
Background:
To learn about the user research that I performed to inform the design direction of version 0.1.5, please click here. This page will focus on design updates based on research and best practices.
The Project Details
Timeline: ~3 weeks
Team: The Company X team consisted of a remote team of 6 people: myself, 1 in San Diego, CA, 1 in WA, and 3 in Costa Rica. I worked closest with the Founder/CEO, the Head Engineer, and another Lead Engineer.
My Role: Director of UX (User Research, User Testing, UX, UI)
Tools Used: Figma, Sketch, Asana
Objective:
User research yielded several areas of improvement; however, since the contracted development team’s term was nearly over, it was necessary to focus on tackling low-hanging fruit (i.e., easy fixes) in addition to major adjustments that were in alignment with the business goals and user needs.
Solution:
The major design recommendations I made based on the user research were as follows:
Settings - change default gender setting to “female”
Product Requests - remove optional/confusing fields; add informational message that shortly explains what happens when requests are submitted that include direction to continue scanning other products
Onboarding - Notify users right away that they can edit their responses after completing the chat conversation
Onboarding - Provide visual feedback (i.e., a toast message) as user’s answer loads
Onboarding - Replace hair texture terms with photographs of different texture types
Score - Add additional score details to the visual match score; educate consumers on how scoring is calculated
Recommendations - Add a feature that provides high match recommendations
Education - Add content that directs users to take action on match score screen; re-work definitions provided for ingredient preference types to be more understandable
In addition to design updates, there were a few functional fixes that needed to be improved. This was done on the backend by the engineers and did not involve much of my work.
Due to time constraints and the complexity of the backend fixes, only 2 of the design recommendations listed above were able to be implemented and shipped in the new updates:
Settings - change default gender setting to “female”
Prioritized for being low-hanging fruit; it elicited a strong emotional response from the majority of testers. I thought this would be an easy fix to decrease negative response, thereby improving the UX
Onboarding - Provide visual feedback as user’s answer loads
Prioritized because it is the earliest step where users tend to show frustration (i.e., tapped components multiple times because they did not seem to respond right away). Onboarding is essential to the experience because users are introduced to Product X and set up their profiles at this point. They must remain engaged to complete the process in order to obtain product scores and utilize the rest of the app’s features
Settings
Changing the settings default did not require design work — instead, I informed the engineers of what the new default should be.
Onboarding
To provide visual feedback while the user answer loads, I consulted with the Founder/CEO and Lead Developer — I suggested that we go with an animation that resembled how chat bubbles appear as a response is being typed like in many other existing chats.
After our discussion, it was determined that the animation would most likely be too heavy of a lift for the allotted time. Instead, the Lead Developer suggested a toast message. I informed the developer that instead of “loading,” it’d match the context better if the toast message said “sending…” since the user is sending information — it better communicates that the user is sending a message in the chat.
Additional Designs
There were additional designs created that weren’t able to be included in the update. These designs included:
Product Requests - remove optional/confusing fields; add informational message that shortly explains what happens when requests are submitted that include direction to continue scanning other products
To simplify this screen, it was necessary to remove the fields that were not required for users to successfully request a product.
While testing, we found that many users didn’t know what selection to choose for “Product Type.” Additionally, some users weren’t sure what action to take after requesting a product. Some thought the product would be available immediately after request. Others were surprised to receive an email in their inbox the following day stating that the product had been added. Essentially, users just didn’t know what to expect.
Because the UPC number (or product name) field automatically fills with the user’s search request, I concluded that only that filled field was necessary in order to request a product with ease.
Adding informational content to the message users see after requesting the product was the solution I proposed to set user expectations. To prompt users to take the next step we desired, I added directional language in the call to action button.
Lessons Learned:
From Updates
After updating the settings, comments on the gender default were no longer made
Before adding the toast message, nearly every tester tapped their answer choice at least twice — after adding the toast message, 100% of the testers waited for their answer choice to load without tapping additional times
Overall
In reality, not all needed design updates can be included in product updates for various reasons; I had to learn to be okay with that realization in order to prioritize effectively and present a clear way forward
Next Steps (Future Iterations):
After pushing the last set of updates to production, the Costa Rica development team’s contract reached the end of its term. At that point, we were joined by another team member who took over as the CTO of Company X. We began working with this individual to continue updating the mobile app.
Although testers’ experience had been improved, many still weren’t aware of some of the other features in the app. Moving forward, I found it imperative that we:
Redesign the app’s information architecture and navigation structure
Implement remaining major design recommendations that were proposed
Please click here to continue learning about my contributions to the next iteration, Product X v0.2.