Introduction: What the Pick?
This project was done in collaboration with Rose Palmieri as a final project for Ironhack Barcelona UX/UI bootcamp. We worked with a local startup called Picker.
Picker is a mobile app which provides users a platform to collect and share their favorite products. Users can then recommend/promote these products through their social media. Picker's primary users are micro-influencers. Picker requested that we redesigned their core flow: adding a Pick. This is what that current flow looks like on the existing app's interface:
Problem & Opportunity
Currently, the flow of adding a product or “pick” to one's profile (the core flow) consists of a minimum of seven or more steps; from the initial search to saving your pick. In this redesign, we were able to decrease the number of steps from seven-plus to just four. Testing of the current flow uncovered several opportunities for improvement regarding: information density; findability and clarity of actions, number of steps, and overall consistency. Thus this redesign is a recommendation to create a frictionless flow for the user.
A user centered design approach was used throughout this redesign.
Stage 1: Analyze
In order to have Picker’s users at the center of our design process, we needed to understand who Picker’s users are: what are their goals, their frustrations, and how are they currently using the app? Picker’s target audience is influencers, thus that is where we began our research. Despite the challenge, we were able to track down three influencers to interview. These influencers gave us many valuable insights, which inspired the entire redesign. Extensive user testing of the existing app led to insights on the learnability, findability, clarity and overall consistency of the app. Picker also provided us with their preliminary user personas. We examined trends among their user personas and compared their findings to our own.
Two key insights revealed through interviews and general research:
Micro-influencers using Picker need to gain and maintain the trust of followers and be consistent in product choices that remain true to their self-branding.
People value the recommendations of those they trust, and are therefore more likely to purchase a product that is recommended to them by someone they know or feel that they know (influencers).
The user tests we conducted of the existing app revealed that users were thrown off when the app took them to a store’s website. They weren’t sure if they were still in the app and were confused about which navigation pertained to what. We also found that users didn’t understand why there were random brands or store cards listed on the main “Add Pick” screen, nor why there were so many of them, forty-seven to be exact. The search bar feature made a lot more sense to these users. Some also mentioned problems they had with the UI of the app’s feed, the images and text were very small and difficult to read.
After a series of interviews with influencers and with the information Picker gave us access to, we were able to identify patterns and discrepancies in the user personas they had provided. We reconstructed these three personas to more accurately represent our findings. Through this, Nora, Julia and Manuel came to life with very distinct goals and frustrations.
The action explored in this heuristic analysis was the flow of finding a Pick of a KitchenAid blender. This analysis was helpful in exposing areas of improvement, specifically in Picker's clarity, findability and communication. This process also gave us a better understanding of how to approach this redesign.
Competitive & Comparative Analyses
Once we defined some key features and identified a few competitors we took a look to see what commonalties they shared and differences they had. The idea behind this was to gain a better understanding of what Picker's competitors are doing, what Picker might be lacking, or if this revealed any added value Picker might have over some of these other apps.
General research and interviews conducted with micro-influencers were conducted in order to uncover valuable insights into the behaviors and motives of why users might find Picker to be a valuable app for recommending and promoting products. The following major takeaways informed the redesign of Picker’s core flow.
1. Trust and consistency are key to gaining and maintaining followers.
When adding Picks to their profiles, influencers must ensure that the products they are recommending to their followers are in tune with their personal brand. Any product endorsement that strays from an influencer’s image can come across as disingenuous and lead to a loss of trust between them and their followers. This also translates into the way an influencer might choose to promote a brand: they would feel very uncomfortable promoting something they have never physically owned or have no real experience with. For instance, an influencer whose personal brand is travel and lifestyle, might run the risk of losing followers should they begin to promote a tennis racket that they might not be familiar with and that does not relate to their branding or messaging. This is a key insight to the value and behaviors associated with Picker for a particular persona, that being the influencer. It must be believable that the follower uses the product.
2. Influencers only recommend products they actually use
Adding to the previous insight, an influencer would never recommend a product they do not use or have never used. It would not be ethical or good for their image to promote a product that they have no experience with. Followers will assume the influencer is a “sell-out” who cares more about money than about what they represent.
3. People value personalized communication
Generic reviews and ratings of products do not persuade people to make purchases. On the other hand, when recommendations are personalized, people respond positively. In fact, 44% of consumers have said that they are more likely to buy after a personalized review of a product. Moreover, 49% of consumers have bought products that they did not initially intend to buy because of a personalized recommendation. Hence, influencers are able to connect people to a product in a way that an advertisement cannot.
4. Getting directly approached by brands can be difficult for micro-influencers
At the beginning of a creator’s career, getting the attention of brands can be a challenge. Those relationships are more easily forged when an influencer passes the threshold of 10k followers. Until they are able to reach a larger audience, creators need to build their brand and following.
Stage 2: Define
Despite having investigated and developed three different personas, we chose to focus on Nora because she is the persona whom would have the most to gain from using Picker. Nora needs to establish a better relationship with brands and Picker can help her get there. Though Julia and Manuel use Picker as well they don't rely on it and benefit from it in the same way that Nora does, therefore Nora is Picker's primary user.
Nora knows that she needs to better define her brand by creating more consistent content and needs to expand her following in order to start attracting the attention of brands.
These forty-seven stores are Picker’s affiliated stores and therefore are the sites from which Picker earns commission. Their reasoning for having these stores on the primary screen was to encourage users to select Picks from their list of affiliates. This is one of the main reasons the current flow is anywhere from seven to nine or more screens. Our goal as a UX designers was to appeal to both our client’s and user’s needs.
We also wanted our redesign to incorporate elements of Picker’s existing branding and UI but to make the UI more visually consistent and readable. This meant that the UI redesign needed to adhere to the HIG (iOS standards) since the current app does not follow either set of guidelines.
While exploring different possibilities to shorten Picker's core flow, we met with web developers to verify that our solution was feasible. We learned how APIs work and how they play a role in the app. With this information we were able to define a solution.
Stage 3: Design
Keeping a key insight in mind, we noted that anyone who would be adding a pick would be doing so with a product that they already owned or were familiar with. This meant that when opening the app, users would already know exactly what product they would want to “Pick" and perhaps promote. From there we began to iterate and explore different options and opportunities.
Tests of the existing app confirmed that the store cards (pictured above) were generating unnecessary clutter and confusion for users. The store cards were also a huge reason why this core flow took up a minimum of seven screens. We explored different possibilities to shorten the flow and to reduce confusion surrounding these cards.
The main thing to note from this paper prototype was the addition of multiple ways to rate a product. The objective was to make products more finable within the app in order to promote internal shopping, and in turn to give the existing feed more purpose with more content. However, we found that users did not want to spend so much time inputting data, and that keeping the rating simple and quick best fit the experience for the user. One other large change made in the initial prototypes was to move the in-app search bar from the home-feed screen to the "Create A Pick" screen. This too resulted in a lot of confusion and was changed back in later iterations.
Mapping out the existing User Flows was helpful in determining which steps seemed unnecessary or excessive. This exercise helped understand the end goal and evaluate the process from start to finish. It shed light on the different possibilities in which users could accomplish their task within the core flow (finding and adding a Pick).
Stage 4: Prototyping
The evolution of the “Create A Pick” screen displayed below, shows that initially users were promoted to search for brands. Through testing and iterating it was made clear that users didn’t understand why they were searching for brands and preferred to search for their desired products directly. This evolved into the two-part search, seen in the final three screens. We explored the option of scanning barcodes but quickly discarded it.
A significant evolution seen above is the navigation's. We wanted the navigation to adhere to iOS conventions and for it to be understandable and representative of what each tab represented. Tests confirmed that descriptions were useful but created confusion when presented with five options in the navigation. We also tried to incorporate elements of the existing UI, and therefore made the conscious choice to not change the existing icons.
In our final iterations we came up with a two-part search system. The first input field requests the name of the store, which would then allow the app to recognize if the store is affiliated to Picker or not. If it is an affiliate, then the app would be able to pull the API’s from that affiliated store and use them to auto populate the second search field with the product the user is searching for, thus taking the user directly to the product’s page within the store’s site. This solution would avoid the confusion of navigating another site within Picker's app and allows for a frictionless flow in just four screens.
Of course the user may not know or remember the name of the store where they got said product, in which case the app would work similarly to how it does now. We believed that this was a solution that suited both the client and their user’s needs.
Another significant addition made to Picker’s redesign was the ability to add personal photos. This speaks to the insight that no influencer would promote anything that they didn’t already own. It gives users the ability to show brand personalization and to show their followers that “Yes, I do love this Pick/product,” and “Yes, I do use it.”
Stage 5: Validate
In order to validate our design decisions, we conducted a series of usability tests. The goal here was to ensure that our redesign was indeed enhancing the user’s experience. We asked participants to think out loud while they conducted a series of tasks. These tests confirmed that the confusion about navigating a different website within Picker had been resolved. Almost all participants said that the UI reminded them a little too much of Facebook so we updated the UI in our final prototype to include a different UI that still incorporated elements of Picker’s existing UI and branding.
Now it's your turn to try!
Scenario: You bought a pair of Ray-Ban Clubmaster Classic sunglasses that you absolutely LOVE! It's time for you to add them to your Picks on Picker and to share them with all your friends!