ColorMe is a mobile app that is all about helping you in your journey to elevate your style and yourself. It can perform a color analysis on you whenever and wherever you are, allowing you to easily discover what colors flatter you most. Using your color analysis results, the app can recommend products for you based on your color palette. The app also offers a live color compatibility checker in which the app can analyze what you're currently wearing and tell you if it fits in your color palette and suits you.
This app was created as part of a class project in KSU's Interaction Design II course using an adapted version of Lean UX in which we engaged in two 3-week sprints. In the rest of this process page, I will be going over how we incorporated and followed this methodology in each of our design sprints and reflect on my experience when creating ColorMe.
Scrum Master, UX Researcher, UI Designer, Prototyper
Figma, FigJam, Microsoft Teams
Arthy Natarajan, Riya George, Karsyn Hull, and Lisa Pan
6 weeks (Oct - Nov 2024)
In the creation of ColorMe, we followed Lean UX, which is a design methodology that borrows from UX principles, Lean Startup thinking, and the Agile software development practice of Scrum and converges them into one package. When putting all this together, Lean UX as a whole becomes an iterative process revolving around making assumptions about user needs and behaviors, testing those assumptions, and measuring the results. This ensures that teams can make informed decisions based on real feedback and avoid superfluous work in refining their products.
We began our process by working through the Lean UX Canvas. The Lean UX Canvas is a means for the team to formulate assumptions and open up cross-functional conversations regarding the product. It also serves as a way for the team to determine what our Minimum Viable Products (MVPs) will be and how we will test and measure their effectiveness.
Firstly, we needed to figure out what business problem our app aims to solve and determine what the business context would be for our app. I led a brainstorming session in which we considered product domain, customer segments, pain points, gaps in existing products and how we can fill those, and our target audience segment behaviors. From doing this, we were able to determine the following:
From doing this, we were able to determine the following:
These factors put a roadblock in the way of shopping for clothes since color plays such a huge role in the realm of style. We realized that ColorMe can fill in these gaps by providing a free, in-app color analysis and immediately provide personalized fashion product recommendations based on that.
Additionally, we worked out what our business outcomes would be. We realized the main impact metrics (means of measuring how successful or effective a product is) ColorMe would focus on were user retention and revenue.
We made assumptions that:
To determine who we were designing for, we set out to create proto-personas, which are imagined personifications created using assumptions of who we expect the target user to be, based on our assumptions regarding who our users may be. We made best guesses on our user's characteristics, needs, goals, and obstacles.
We felt that our main user would be someone who would:
This led to the creation of our one proto-persona, Hanna Smith, and using her as a guide, we were able to determine potential user outcomes.
After brainstorming potential solutions that could satisfy both business and user needs, we moved into crafting hypotheses. Following the creation of the hypothesis statements, we ordered them from most to least risky. The riskiest assumptions from our hypotheses would be the ones that could make our entire idea collapse, and we determined that our riskiest hypothesis was the one regarding the color analysis scan. If the color analysis scan is not fashioned in a way that users would be satisfied with, this would essentially cause ColorMe as a whole to fail. Then, we moved into deciding how we were going to test and measure our assumptions using Minimum Viable Products (MVPs), which are essentially bare-bones versions of products or features made to receive feedback from users as quickly as possible. Because we had not begun designing our app at this point, I decided that we would create wireframes of our potential features and screens and use those as MVPs for the time being.
Afterwards, we moved all our hypothesis statements into our Product Backlog, which is essentially a comprehensive, ranked list of the features we needed to build and test in the duration of this project. Next, we determined which features we would focus on during Sprint 1, and these were put into our Sprint 1 Backlog, which is, for all intents and purposes, the same as the Product Backlog, except it only contained what we sought to complete by the conclusion of Sprint 1.
For Sprint 1, we determined that we would test the following:
With our Sprint 1 Backlog created, we were ready to tackle the rest of Sprint 1.
In Sprint 1 Week 1, we began conducting user interviews and completing affinity maps to analyze interview data. Additionally, we employed 2-day stand-ups to ensure the team's goals were aligned, identify any issues, see what everyone has been working on, and set expectations for anything that needs to be done going forward. I led all of the stand-up meetings for the project.
Our 3 user interviews were with people we believed may fit our target demographic (young adult women), all of which I facilitated. Due to our limited time frame for this project, I wanted us to go ahead and create at least bare-bones wireframes of what we thought would be our main screens (e.g., the color analysis scan, the live analysis scan, the homepage, product pages, etc.) so that we could use these as our MVPs to get feedback from our interviewees.
Our interview question topics included, but were not limited to, the following:
We also showed them our wireframes and asked them if they would use certain features or if they preferred one version of our screen design over another.
The response from our interviewees was positive and they seemed into the idea of our app and felt it would be practical and useful. However, I did not realize until the completion of the week's interviews that our interview questions were very feature-focused, which is something that is strongly advised against in Lean UX, as opposed to delving into user motivations, frustrations, and behaviors. Our questions were also very binary in nature, only providing room for yes or no answers. Thankfully though, we had gotten our interviews done early on in the week, so I asked my team to use the remaining days to revise our interview questions to give our interviewees the chance to provide us with more in-depth answers. We added more questions asking the interviewees about how they usually shop and their preferences, with a focus on online shopping and apparel shopping in particular, so we could better understand why they do the things they do and design ColorMe in a way that would fit their needs.
In terms of our design file, we set up grid, color, and text styles and decided on the aesthetic/feel of ColorMe so that we would be all set up to begin working towards translating our wireframes into higher-fidelity screens in parallel to our interviews.
In Week 2 of Sprint 1, we interviewed people with our revised set of questions, so we were able to get much more comprehensive information from our users. I facilitated 2 interviews and moderated 1 interview this week.
We learned from one interviewee that they use their shopping cart as a pseudo saved products page because they found that to be quick and easy. While a saved products page was something we already had in the works, hearing our interviewee discuss that made us realize how integral this feature would be. To make saving products more easily accessible, we endeavored to add an icon for saving products to our product cards so users would be able to quickly save something they like.
Another issue that interviewees brought up was how overwhelming online shopping can be due to the sheer volume of options that immediately bombard one upon opening the site or app. Considering this, I designed the homepage in a way that would not overwhelm users. The ColorMe homepage only consists of the user's color palette, a minimal number of category pill buttons, and recommended products. This way, the user will only be shown things that are truly catered to them.
At the end of Sprint 1 Week 2, our team completed a retrospective meeting. A retrospective is essentially a lookback on the Sprint to address the questions of what went well, what could have gone better, and what we will try next. In the retrospective meeting, which I led, we thought that we did a good job with interviews (after fixing our questions from Week 1), set up our design file well, and made good progress on our prototype. Things that we felt could have gone better were adding more clarity to our interview questions, doing a better job of explaining features in our app to the interviewees, and focusing more on the cohesiveness of the app aesthetic. As for what we would try next, we felt that doing mock interviews with each other would be a good next step in learning how to ask more impromptu questions to get interviewees to expand on their answers to give us more information. Additionally, we aimed to focus on solidifying the aesthetic of our app to ensure that everyone would be on the same page for that.
With our next steps more outlined after completing the retrospective, we transitioned into Sprint 2.
In Sprint 2, we revalidated our Lean UX Canvas and made adjustments to it based on everything we learned during Sprint 1 from our user interviews and how ColorMe's creation was progressing. We also shifted into high-gear in terms of prototyping our app.
Design Week 0 of Sprint 2 saw the return of the Lean UX Canvas. We looked through our Lean UX Canvas from Design Week 0 of Sprint 1 to revalidate it. Revalidation refers to the act of looking back at previously made assumptions and seeing if there are any changes to be made.
We ended up making alterations to our proto-persona, added new hypotheses to our Product Backlog and Sprint 2 Backlog, and revised some of our existing MVPs.
Hanna remained our only proto-persona as the assumptions we made about her seemed to be reflected very well in our interviews, although we did make a couple of tweaks. From our interviews, we learned that people want to be able to browse through products quickly for varying reasons, such as impatience, being busy, not having enough time, etc. To mirror this as a need in Hanna, we increased her age from 19 to 21 and gave her an internship, causing the addition of a need to browse through products efficiently due to being scarce on free time. Additionally, Hanna had a need to find her undertone. We initially included this because we were planning on also including jewelry in our app, but due to time constraints, we decided to just focus on clothing and remove the jewelry aspect. Thus, we slightly altered this need to show that she wants to know her undertone so she can buy clothes in the specific tones of colors that would suit her.
We added two new hypotheses to our Product Backlog and Sprint 2 Backlog—one for an undertone result and the other for product categories. Realizing that undertones play a huge role in color theory, we decided to add an undertone result as well as the color palette result. The product categories were added because many of our interviewees mentioned going through product categories when they shop online, so this seemed like a key feature that needed to exist in ColorMe.
As for our MVPs, a couple of alterations were made. For the live analysis, we wanted to ask users about how they would want the directions to be presented to them since these directions were slightly more complex than the ones in the onboarding color analysis. Also, because our app would rely on affiliate marketing for revenue, we wanted to ask how they would want 3rd party links to be presented to them, or what would make them not hesitate about clicking them. We did previously ask in our interviews how users feel about 3rd party links, and many found them to be sketchy, thus making this an important topic to address with Sprint 2's interviewees since this would affect our impact metric of revenue.
We resumed user interviews, affinity mapping, and 2-day stand-ups in Week 1 of Sprint 2. For our Sprint 2 interviews, we felt that it was important to interview and get feedback from people who would realistically use ColorMe. Thus, we ended up asking some of our previous interviewees from Sprint 1 if they would be able to participate in another interview. 2 of them said they would be able to this week, so we interviewed them and 1 new person. I moderated 1 interview and facilitated the others.
I took the initiative to design and prototype the color analysis scan MVP screens so we would be able to display the functionality to the users and ask if they believe the directions are sufficient enough for them to be able to complete the scan with no issue. We asked about factors such as instruction clarity, especially regarding lighting information. Some interviewees expressed confusion around what exactly was meant by “natural lighting” or simply felt that there needed to be more explanation. Having this in mind, we decided to implement a pop-up that would explain to users in more depth about what is meant by “natural lighting.”
We also asked about the skin tone and hair color confirmation screen, in which the user has the opportunity to select the most accurate match. For people with multi-colored hair, we needed to figure out how to present that information to them. We were undecided between a swatch that would have a gradient of the colors in it or a split-swatch with each color shown distinctly. We showed users the MVPs for the options and they unanimously agreed the split-swatch was better, citing that the gradient makes it hard to tell exactly what colors are being displayed due to the blend.
Additionally, we realized through affinity mapping that many people did not fully understand the concept of an undertone. Because of this, we realized we would need to provide users more information instead of just saying that they have a certain undertone and leaving it at that. To test this, we showed users the color analysis results screen and asked users how they would want additional information to be given to them. Many of them said they would want a pop-up because only some people would be in need of that extra information about what an undertone is so they did not want it to be directly on the page. They also did not want to have to go to another page to view information in fear of possibly getting disoriented in the app and accidentally losing their scan results altogether. So, having an information pop-up was the clear winner.
In this week, we made a lot more progress towards making our prototype high-fidelity. We were nearing the completion of most of our screens such as the onboarding, color analysis scan, homepage, saved products, profile, and more.
We continued working on our prototype and held 3 more user interviews in Week 2 of Sprint 2. We had another person from Sprint 1 who was able to return to do another interview with us and 2 new people. I moderated 1 interview and facilitated 2 this week.
When showing interviewees our Live Analysis MVP, we asked if they would want the navbar on the screen or not during the scan. This was something we had to ask about because seeing as the live analysis is one of ColorMe's main features, we had to include it in the navbar to keep it easily accessible to users. However, the issue was that the live analysis was almost entirely made of camera screens, so including the navbar on screen would take up too much screen real estate. Most of our interviewees said they would prefer just a back button to take them back to whatever page they were previously on because they thought having the navbar in the camera screens would be very distracting and cluttered. One interviewee also said they would not want the navbar on the live analysis screens because there would be a risk of them accidentally tapping on one of the navbar items and exiting the live analysis when they did not mean to. Based on this feedback, we decided to implement a back button in the live analysis screens that would take the user back to wherever they previously were in the app.
We also made changes to our proto-persona, Hanna, resulting in her 3rd iteration. What led to this change was that I noticed that there was no standard convention for where the saved products page typically goes in shopping apps. Some apps had it in the profile page, and others had it in the navbar. We currently had ColorMe's saved products page in the navbar, but I wanted to ask our interviewees if they have a preference and why. All of our interviewees said they would prefer for it to be in the navbar for easy access. One interviewee also added that they prefer that because it would take less steps to get to the saved products page since the navbar is visible on almost every screen. With such a unanimous preference, this made us realize that many people were wanting a hassle-free way to record all the products they like. Hence, we added a 5th need for Hanna: to be able to automatically keep track of and organize all the products she likes.
As we reached the end of Sprint 2 Week 2, it was time for another retrospective meeting, which I led. We felt that we did a much better job of conducting interviews in this Sprint compared to the last after revising our interview questions and practicing doing mock interviews with each other. We also did well in terms of finalizing the page layout and design for certain screens. However, there were a few things that could have gone better. We did not start linking screens as soon as we should have, and this resulted in us not getting as much feedback from interviewees as we could have due to the lack of proper usability testing. We also had some file hygiene issues, such as some frames and component properties remaining unnamed. Components were also an issue as we had many repeating elements that had not been made into components. For what we would try next, we decided that we would need to spend a lot of time refining our prototype and ensuring that we made components of elements that needed to be components. There were also some 8pt grid issues that needed to be resolved. With all of this in mind, we dove headfirst into refining our prototype. As the Scrum Master and lead UI designer, it was my responsibility to go through the entire prototype to ensure maximum cohesivity and check that everything was in order. I made sure that everything followed the 8pt grid, all layers had appropriate names, all transitions were consistent, and all styles were applied correctly.
Working on this project was a wonderful learning experience for me, both as a team leader and a member. My main struggle was with pacing the team. I feel that I got psyched out by the short time frame of the project and we began doing things at a rapid rate. For example, in Sprint 1 Week 1, if we had slowed down a bit to think through our interview questions a bit more, we could have started off on a better foot with getting user feedback. Looking back, I feel like I can definitely understand where I went wrong with pacing and how I can do better next time.
Regarding the aforementioned interview questions issue, this taught me the importance of crafting user interview questions in a way that ensures the interviewees understand exactly what is being asked of them and gives them the freedom to answer open-endedly. This will allow for the team to gain lots of valuable insights from user interviews.
Being able to adapt to new developments is also something that this project gave me lessons in. Our live analysis MVP went through many iterations due to the issue regarding the navbar taking up space in the camera screens. In addition to this, we also had to consider still keeping the camera screens consistent with those in the color analysis scan. Being open to new changes is such an important part of being a designer because if you stick too rigidly to an idea despite it not working well or aligning with user needs, it will stifle the progress that the product could be making.
This project also taught me how crucial communication and organization is, especially in a team project of this caliber. Consistent meetings, such as the 2-day stand-ups, were the cornerstone to keeping us all on track.
All in all, I am thankful for my wonderful teammates and how hardworking, communicative, and responsive they were. Together, we were able to create something we are all proud of.