https://www.ninabeaulieu.com/ux-design daily 0.75 2025-08-11 https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610345263320-ZWCKYT5OW84UIXZM908C/BAandA+thumbnail+square.png UX Design responsive desktop website | content strategy | brand strategy | UI design https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610345208633-PR60GS800KK5MEIHYKH6/skin+insights+thumbnail+square.png UX Design mobile-first website design | user research | UI design | user testing | content strategy https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610345233088-BEQADWW0RQLASSILLSGC/city+pups+thumbnail+square.png UX Design design sprint | user research | desktop website | user testing | UI design https://www.ninabeaulieu.com/about daily 0.75 2025-08-11 https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/9ee1c117-8b28-4a8c-abb1-c5d31debc5bd/Nina+2024.jpg ABOUT - Hi, I’m Nina https://www.ninabeaulieu.com/skin-insights daily 0.75 2025-08-11 https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1611031268962-YKFIYUTH9LBSKWKU5EL3/Capstone%2BScreens%2BPreview.jpg Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610820246093-R1F6UQJQE4OFTKK35N8E/Screen+Shot+2021-01-16+at+1.02.32+PM.png Skin Insights A quick search of “skincare routine” generates over 207 million results on Google. “Skincare” on its own - a whopping 746 million. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1611959314881-GT0K3NYXUP7SDMAC394O/Competitive+Analysis.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610822185581-L15T8IL1RAQKK6O7V5SJ/Screener2.png Skin Insights 2. They had to have a routine with multiple products. Anyone using one (or less) products was out. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610822252558-CPMLQHBSWPNQP48POHLV/Screener3.png Skin Insights 3. They had to have a routine, period. Anyone who didn’t have any semblance of a routine was removed. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610822271591-JVFSBJ6NJCCANROKOALE/Screener4.png Skin Insights 4. They had to want to improve their skincare routine. Anyone who was not interested in this was excluded. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610822164628-AX0LO1O028Z0SPTTXVOS/Screener1.png Skin Insights 1. Users had to be actively trying new products. Anyone who hadn’t tried a new product in the past year was disqualified. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610830524931-I56X3R4EU752W4W0HOYZ/Users.png Skin Insights - Meet my interview participants My selected participants had a lot in common. For starters, as you can see, they all talked with their hands. But it was more than that – they were all looking to improve their skincare routine and had an interest in finding new products to suit their needs. They came from different walks of life – a choral conductor, a technology sales representative, a graphic designer for a real estate company – but they all had trouble finding the right products for their unique skin concerns. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610822738366-T78IHIY2S8TAIEUSN3L1/Affinity+Map.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610827438680-FRT9JH2QEJ3F4ZJJ5GNZ/Persona+png.png Skin Insights - Building my persona The target audience wants to build a custom skincare routine tailored to their skin concerns, ingredient and price preferences. They also want to find a trusted source of information, as many marketing materials and advertisements are misleading, and it’s difficult to find honest reviews from people with similar concerns. They often take casual quizzes (in the style of Buzzfeed) about skincare, and visit forums to learn more about the experiences of others with certain products or routines. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610825299155-H0O4U0MFURVAKH629EWQ/Screen+Shot+2021-01-16+at+2.27.29+PM.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610825365296-2IKN2BW0Y7A5Y4NHQVBZ/Screen+Shot+2021-01-16+at+2.27.52+PM.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610825326142-5N4PYRZC4YAKSJTWN8Q3/Screen+Shot+2021-01-16+at+2.27.40+PM.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612213415185-W3GLT4M4H3Y5460110R5/Sketch4.png Skin Insights I wanted to explore new ways to get insight through the review process, departing from the traditional 5-star method and opting instead for a percentage rate of effectiveness. Ingredients for skincare products are complicated, but they don’t have to be! These sketches explored ways to make scientific data accessible. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612213373459-T740I9MQRGXL9KD2FNVA/Sketch2.png Skin Insights I experimented with various styles for the main product browsing page. I was interested in seeing how users responded to horizontal scrolling content, where they expected to see various elements like filters and sorting, and what they found to be the most intuitive way to organize product types. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612213395862-LZFXXQ3L4T86TYFGQOTT/Sketch3.png Skin Insights On the product detail page, I experimented with various blocks of information to see what was most important to the user. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610829376122-8V7EAW5YU5RFFW2DNT3A/Colors.jpg Skin Insights When selecting my palette, I went through a few iterations. I landed on shades of cool teal and warm skin tones, which give a neutral and natural feel to the site. Most text is dark on a white background, while some headers are in an accent color to ensure that it’s easy to read. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610829335269-QDNZF3CZ9CYWDWK84WC7/Typography.jpg Skin Insights I chose the fonts Montserrat and Roboto because their shapes are clean and accessible. They both have multiple weight options, allowing for variety, while still maintaining legibility. Because of the nature of the content, many screens are text-heavy, information-laden pages, so it was important to prioritize legibility. Various elements are highlighted over an image or a block of color, adding a bit of visual variety to keep the user delighted. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610842923232-8GWH8MN8V9347RCXNKSP/Capstone+Home+Screen+Evolution.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610843808305-17CBA7PE1GJKPM3LRA6L/Capstone+Product+Detail+Page+Evolution.png Skin Insights https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610819366131-B2ITXTK5XY09MQTGAE3W/skin+insights+thumbnail+square.png Skin Insights https://www.ninabeaulieu.com/city-pups daily 0.75 2024-11-07 https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612118516980-UIQHHOHVODM5CIRCLOAY/City%252BPups%252BPreview.jpg City Pups https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1611031974201-PYL99YQA0YHP3H9N24BC/IMG_7013.png City Pups - Affinity map Based on the existing research and interviews provided at the start of the sprint, I gathered all the relevant information and sorted it into categories for use in design decisions down the road. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610908222978-NIF14RUY2QGLTG1UX0QA/Screen+Shot+2021-01-17+at+1.29.14+PM.png City Pups - Project Map I started by mapping out the various data points for both adopters and dogs. When it comes to the user map, there were a few different ways the overall process could go. Having users enter their information and matching it to information about each dog (provided by the shelter) ensures that both sides are finding a good match More along the lines of a dating site, having the user “pass” or “like” dogs who meet the criteria from their profile, ultimately matching with dogs they’re interested in and contacting the shelter Similar to the typical process on most pet adoption sites, without a user building a profile - more simply, they browse relying on filters of information entered by the shelter https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610909178912-S22LGEB4TW2A7VXLQQAA/Amazon+Example.png City Pups Amazon does a great job at showing you things you might like based on your past purchases and browsing history. That could be useful with the search for a pet - if you are frequenting a certain age, size, breed, shelter, etc., you’d get customized results for your recent history. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610909075415-TJRIOKBOZ9FSD0O6VL1R/LinkedIn+Example.png City Pups When you think about it, job searching is similar to dating - you’re looking for a good match for both you and the company. Similarly, finding a good companion for you and a good home for the animal is all about getting a great match. LinkedIn is a job aggregator, and they make it easy to interact directly with the company (similar to how a shelter would interact with an adopter). The application process is simplified and clean for both parties, and you can indicate that a job is not a good match or save a job posting. You can set up job alerts for a certain title, location, etc. and that would be helpful if you have a breed, age, shelter, etc. in mind. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610909005075-SQTX4SEYKK9LQ5JXTJQM/Petfinder+Example.png City Pups The #1 aggregator of pets available for adoption is Petfinder. They have a lot of great options, like adding a pet to your favorites, contacting the shelter directly about a pet, and searching by various filters such as breed (assumed), size, age, etc. However, many of the filters are not suited for city life: The search radius is limited to 10 miles at a minimum. In a city, that is obviously far too long to walk or get to via transit, so many results turn out to be too far from the adopter. There is no filter for the home size of the adopter. In a city especially, home sizes are limited, but animal size is not always correlated to home size - some larger dogs are more laid back and don’t need a lot of space, and some smaller dogs are more hyper and need more space. There is a filter for temperament with other animals in the house, but not for interactions with strange dogs or people - this is a common occurrence on busy city streets, and a big concern for city dwellers. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610909031203-2O8BMAUO6E9R0S2DFPSY/OkCupid+Example.png City Pups One of the more modern desktop dating sites is OkCupid. Reimagining adopting a pet as a “match” might help adopters feel more connected to their new addition, and it might also help ensure a better forever home for the animals. This could transition to the pet adoption world by having profiles for both adopters and dogs, and allowing adopters to “match” with dogs who fit the criteria they set in their preferences. Quick facts could be displayed (similar to the profile, with icons on the right), more details in a full self-summary, and pictures and videos for each animal that the adopter can peruse. This way, animals who don’t fit the adopter’s profile (apartment size, park access, etc.) won’t be shown to the adopter. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612821768989-PMUEMCWKWUNPUXT2ZJB9/Journey+Map+-+City+Pups.png City Pups https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610911112619-WODGV92Y2Q5ZQ34NVELT/Screen+Shot+2021-01-17+at+2.18.13+PM.png City Pups https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610909947718-OS75JCQ04ZV2U06S263Y/Screen+Shot+2021-01-17+at+1.58.52+PM.png City Pups - Crazy 8s I took some of my favorite elements from the various sites in the lightning demos, and modified them for dog adoption. I played with a lot of different ideas of how to best match someone up with a pet. This came down to considering what users have come to expect from a dog adoption site, the “love connection” elements of a dating site, the “browsing and shopping” elements of an eCommerce site, and the “application” elements of a job hunting site. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610911661912-HIO4ZFKB5PX4RXXUWIKX/Screen%2BShot%2B2021-01-17%2Bat%2B2.26.32%2BPM.jpg City Pups https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612894522528-O38TEPB007LG9LW14UDF/Style%2BGuide%2B-%2BCity%2BPups.jpg City Pups https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610912412686-W0F3LV77BKJT71NUDOSA/city%2Bpups%2Bthumbnail%2Bsquare.jpg City Pups https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612116680670-8W3GV4J3GXW34NOZYPUF/Screen+1.png City Pups Account creation - gathering basic information about the user to create a profile, allowing them to get alerts for new pets, save their preferences, and more. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612116681110-KO5791NOR5VPIJTBZ7SU/Screen+2.png City Pups About the user: learning about the home environment for the potential pet. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612116681301-IES03UW3TA2MPVR3CC9T/Screen+3.png City Pups About the dog: preferences for the search. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612116681670-V8Z7OPIKK98EH0NJHQ67/Screen+4.png City Pups Browse for a dog: automatically uses the data entered during profile creation (or, if no profile is created, all fields are blank). https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612116681726-2R6B38KYKJVYH6JYDFKE/Screen+5.png City Pups Dog detail: formatted to give a better holistic view of the dog's personality based on interactions with the shelter staff and/or foster family. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612116681477-MMW2Z5G5P72KBGYWJDPP/Screen+6.png City Pups Contact the shelter: automatically pulls information from the dog's profile and the user's profile (if no profile, the user can enter it manually). https://www.ninabeaulieu.com/ansari daily 0.75 2024-11-07 https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612125386587-C65T9HVZE25P3Q50R056/BAA+Preview.png BA&A https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612141538424-30XOIJTFQ9LHW7TRRU5J/bansarisolutions.com_.png BA&A - Before: Home The home page above the fold is prime real estate, and on the original site, the banner image took up the entire space. Below the fold, all of the text is in bold, so none of it is prioritized. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612141611162-EXPGYY8R0CHC3J6T81L4/HOME.png BA&A - After: Home The new home page design gives users an introduction to the company, their experience, and what sets them apart. The three pillars below are the core of what the company does and stands for, giving the next level of depth into the company. Following that is a section for a quote from the founder, giving a personal introduction to why the work is so important to him. From there, the user can discover the target industries, and finally there’s a link to book a consultation with the team. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612131882536-9I2APXFEJ5OBDVZCOCR5/bansarisolutions.com_index.php_capabilities_.png BA&A - Before - Capabilities Many of the pages on the original site (including this one, for Capabilities) had long, bulleted lists. The intention was to show a vast array of services, but in testing, most users found these lists overwhelming and abandoned them after 3-5 bullets. Additionally, there are no headers to break up the content. The most differentiation is the paragraph text in bold in the lower third of the page. This made it difficult for users to find what the priority is for them to discover on the page, and ultimately they abandoned the effort. Additionally, a Services page had even more text without headers or quick snackable content, so users struggled to understand the core mission of the company and what they would offer to customers. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612132402338-I44P1S19E7M4O0VLI2R5/OUR+APPROACH.png BA&A - After - Our Approach My work on this project centered around finding the key pillars of the company, and allowing users to get a high-level view before diving in deeper. The new design and content for the Our Approach page took bits from Capabilities, Services, and the Capabilities Statement and broke it out into clusters of information. The bold headers are followed by a high-level message about the topic, and then there’s space for details. In addition, icons help users quickly scan the industries served by the company, rather than reading through a long list. There is space to elaborate below for further clarification. In the original design, the button for the capabilities statement had two lines of very small text. Most testing participants skipped over it and looked for it elsewhere. The new design features a thumbnail of the document, a bold header, and a clear CTA. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612133544197-QVGR6XXNMGXQOO47JHGP/bansarisolutions.com_index.php_contact_.png BA&A - Before - Contact The main goal for my client was to increase conversions, and get more inbound customer leads. The contact page was very casual. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612133700336-VJYJCWFCLYSQP8Y14TXT/CONSULTATION.png BA&A - After - Book a Consultation A big frustration was that any inbound leads the company received were lacking in details about the contact and their project. By transitioning from a simple email link and phone number to a form, they are able to gather better information from the contact before their initial call. This allows the company to be better prepared for the meeting, and have better outcomes. By simplifying the information requested, users are able to quickly and easily identify how they’re hoping to work with BA&A and what they’re looking for from their meeting. Additionally, by labeling the CTA “Book a Consultation,” users felt it was more professional than just “Contact.” https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612140456005-7SAI2ILYDXQMYH7I51S3/MEET+THE+TEAM.png BA&A - Humanizing the brand Adding a team page gives a human element to the company - crucial for an industry based on establishing interpersonal relationships. The Ansaris’ bios also lend credibility to their expertise. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612137973873-4YU2TR4IV1IRI1OPFAKH/Logo+Redesign.png BA&A - Logo redesign A logo is the first and most important way a company represents itself. The options presented gave a variety of ways to develop the brand. The original logo had a few alignment issues: The bottom of the shapes representing B and A did not align with the bottom of “& Associates” or “Ansari” “Brian” did not align with “Ansari” on the left “& Associates” did not align with any other elements Additionally, test participants noted that the shapes felt dated, very reminiscent of the 80s. With that in mind, I provided a few options for the team, keeping the flavor of the original logo and also trying something new. The first option kept the shapes, but fixed all of the alignment issues. The second option reverted the shapes to the letters they were meant to represent. The final option was more typical of what other consultants in their industry used for their logos, while still keeping the overlap design theme from the original. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612137476167-OXYQGEJC5CRVBGXNH9DD/Palette.png BA&A - Palette update The brand colors needed a slight tweak. The original palette went for an analogous spread, yet felt disjointed and chosen at random - there was an extreme vivid dark blue, a warm green, and a more muted blue. The updated palette was a more tonally consistent version of the original that felt more professional - cooler colors that feel more unified. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1612140203781-IRF9O7NTKZOPYTNFHRVP/Typography.png BA&A - Typography upgrade Headings were sparse on the original site, so in the redesign, they were given a bold, serif treatment using Libre Baskerville for a bold and professional but accessible feel. The body text used was Open Sans to encourage legibility. https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610345032435-4DN38ZB6OZVRQS9LHOPT/BAandA%2Bthumbnail%2Bsquare.jpg BA&A https://www.ninabeaulieu.com/home daily 1.0 2025-08-11 https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1731003148340-7JXR08B7WO7JKA9JNR9R/unsplash-image-xPugU5J5ePc.jpg https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1610346876700-PLU04UF1W3IBXG1W77ZE/header.png https://images.squarespace-cdn.com/content/v1/5f318241909f527234d0bb77/1731003280630-EO054KOC1UGYHSE25O6W/unsplash-image-BZUo9Tf83HQ.jpg https://www.ninabeaulieu.com/get-started daily 0.75 2020-10-26 https://www.ninabeaulieu.com/get-started/p/relationship-with-youothers-ragr5 monthly 0.5 2019-07-05 https://images.squarespace-cdn.com/content/v1/5ced8e1d5fd4c700018dd761/1560190004400-XTA0DF0S9WOZJUG994C8/Stocksy_txp824ffa5crXt000_Original_845035.jpg Get Started - Relationship with You+Others https://www.ninabeaulieu.com/get-started/p/relationship-with-others-e8bzg monthly 0.5 2019-07-05 https://images.squarespace-cdn.com/content/v1/5ced8e1d5fd4c700018dd761/1560189982811-KFAJF1TCUH1SXZ827UMC/Stocksy_txp824ffa5crXt000_Large_844923.jpg Get Started - Relationship with Others https://www.ninabeaulieu.com/get-started/p/relationship-with-you-t7ydt monthly 0.5 2019-07-05 https://images.squarespace-cdn.com/content/v1/5ced8e1d5fd4c700018dd761/1560189874730-3B0TSLDUHTQ93497V3L8/Stocksy_txp824ffa5crXt000_Large_844934A.jpg Get Started - Relationship with You