https://www.neilespiritu.com/contact daily 0.75 2023-11-27 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1607739909412-LZYIML0MQJ4KS9ZTI3OE/2560png.png Contact - I’M NEIL ESPIRITU I was born and raised in the Bay Area. Growing up, I always had the passion to create. To be able to turn my vision into something tangible and how to use visuals to create empathy or a mood. I believe that everything done in life has to be made intentional and with purpose. To be able to curate my ideas and thoughts in hopes of inspiring others. espirituneil@gmail.com Instagram https://www.neilespiritu.com/case-study-1 daily 0.75 2021-01-07 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605833457738-4TH0TUY0UX89HUFHZFKQ/merge.png Case study #1 - Rooster Grin Rooster grin needed a redesign of their current website to expand their web design business to cater to other companies. Their current site is a mess. It was made by a developer when the company first started. Rooster Grin needed help to implement their new goals and support their expansion. Rooster grin wants to move in a slightly different direction but their design team is small and does not have time to work on their own website as they have prioritized their clients’ site over theirs. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605855134110-29GWBGTFUZNM395EVF0X/Neoncanvas.png Case study #1 - Competitive Analysis I was tasked by my team to pinpoint exactly what and who inspired Rooster Grin. Luckily, the client gave us a list of direct and indirect competitors. As I intensively did my due diligence, I realized that most of the direct competitors had the same things in common such as content hierarchy, similar sitemaps, multiple call-to-actions and a distinctive brand identity. Neoncanvas and Mail Chimp were good examples of those. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605856383223-0JIV7JLABHBSDQFPJD8O/compasscompare.png Case study #1 - Comparative Analysis In performing comparative analysis on some of the marketing websites that inspire Rooster Grin, I was able to pinpoint elements that were common throughout most of the websites. Three goals for their redesign of Rooster Grin are for it to be friendly, alive and clean. Overall good design Strong call-to-actions Efficient service/work sections Photojournalistic approach Typography and layout https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605858104031-17HSWJ7KDQQ3XX2X2Z1Q/responsivePSD.png Case study #1 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605855269744-5KNN356G3LSU9SMSWE4Y/mobilemenu.png Case study #1 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605849535254-1BOP91Y2DNT2ZDVI3QE3/calendar.png Case study #1 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605859400580-5E8OU77U9TUOOMF24AVC/calltoactions.png Case study #1 - Distinctive brand identity We really wanted to make the business stand out from the competitors while also making sure we stayed true to Rooster Grin’s proposed brand identity. We made sure to incorporate the business’ goals and user’s need while chasing the three themes of being friendly, alive and clean. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605842457667-L8BBELF1TGAHM7ITYCRT/Rooster+Grin+Style+Guide.png Case study #1 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605858811841-9FZ3PDGE3V86Z5DY63NE/homepagenew.png Case study #1 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605858885551-G90FGLJ7I5JT9VB2MUN2/homeold.png Case study #1 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605870493820-LVWF58FMNHM5R9SW6GCS/Persona.png Case study #1 - User Persona After our very intensive mapping and grouping of user data, we were able to put together the key goals, frustrations and motivations of all the users. This cumulative review allowed us to create one identity to represent all of our users to give us the an idea of what goes on in a typical user’s mind when viewing the previous Rooster Grin website. This allowed my team to really focus on the user’s pain points and to make our design more solid. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605842149996-TPIUS70WWFQ5Q1S6OFFM/User+Flow+%5BDesktop%5D+v3.png Case study #1 Desktop User Flow https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605838726548-CEZUO5ZMUM2CU71130OH/lofi.png Case study #1 - Preliminary sketches After doing research and interviews with some users, we were able to finalize our information architecture. We then created low-fidelity sketches to get an idea of how we would put the information together. After creating multiple iterations of how I envisioned Rooster Grin to look like, I settled on my first design choice. I was glad that I got to really focus on the home page because that is the first page a user sees and usually makes their decision quickly based on that page. https://www.neilespiritu.com/case-study-2 daily 0.75 2021-01-08 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606953427846-YNA2UK5CG9SQUUQMGT3B/Screen+Shot+2020-12-02+at+3.56.10+PM.png Case Study #2 - Austin Food & Wine Festival Redesign https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606960232414-2K0OFCQV61GM9LPBIE3Y/vendormap.png Case Study #2 - Downloadable Vendor and Amenities Map While we incorporated a downloadable schedule on the home page for easy access to the user, we wanted to make sure that they had a very user-friendly method to see a map. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606960276535-AL1NWMAX2I0VKODR4WQG/image-asset.png Case Study #2 - Chef Showcase Lineup Allows you the flexibility to see what time each chef was showing at which stage. I also incorporated a way for the user to make a schedule that they could forward to their email after so they could save their schedule on the phone https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606960813713-AZ52K6WGDGGXWYPKH1WL/community.png Case Study #2 - Community Driven By showcasing the community aspects of the site very early in the content hierarchy of our home page, we were able to really bring attention to the Austin Food and Wine Alliance. Each activity is carefully spaced with empathetic images to increase interest with the users. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606960994597-YOAUDYW2CO52J47KS0KT/hotelsandlocaleats.png Case Study #2 - Partner Hotels & Local Eats An interactive map was made to create a very user-friendly experience. We wanted to make the whole process of booking a hotel and looking for places to eat very seamless by making sure they hav all the information they need without the design being to overbearing. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606957893092-Y3A9WNQNX8V1OED2I64X/walking-with-iphone-x-mockup.jpg Case Study #2 - Friendly and Welcoming We really wanted to make sure that we could give the user a taste of what the festival would look like while also having the chance to see whats else is happening around the area We wanted to make them feel as if they were already there to make them look forward to the event. Building the anticipation and excitement was all part of the process. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606957681829-VZJDBPD325A395VVYG1C/visual+design.png Case Study #2 - Visual Design Since I wanted to bring the experience to our users, I made sure to incorporate visual banners and clickable images to allow the user to navigate through the site. I felt like this approached worked well because images do speak louder than words when the main focus for the user is to see who’s performing, see what’s going to be there and to purchase tickets. I also decided to lower the opacity on some images allowing me to implement hover states that tell the user about the clickable image states. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606952528896-ME9GU3W172PL4R4YT96E/01+-+Mood+Board+-+Morgan.jpg Case Study #2 - Color Palette As for colors, I wanted to make sure that we stayed true to the essence of the food and wine at the festival. Warm and cheerful We wanted to capture the liveliness of the festival while still capturing the roots of event We wanted with a more earthy toned color palette with a little pop of red to capture the essence of food and wine at the festival We made sure to incorporate all of these colors onto the site to make the users actually feel the experience https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606956208075-J3HI7UIX391QA9CD8ZQM/09+-+Persona.jpg Case Study #2 - User Persona After our very intensive mapping and grouping of user data, we were able to put together the key goals, frustrations and motivations of all the users. This cumulative review allowed us to create one identity to represent all of our users to give us the an idea of what goes on in a typical user’s mind when viewing the previous Rooster Grin website. This allowed my team to really focus on the user’s pain points and to make our design more solid. From the user test data, we found out that a festival like this was more catered to a mature audience ranging from the ages of 25-60 years old. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606957392054-26LTONC8T26YGCCKUIPB/03.01+User+Flow+-+Ticket+Purchase%2C+Desktop.jpg Case Study #2 - Desktop Userflow From our research and interviews, we realized that all of our users said they only purchased tickets when on a desktop or laptop since a lot of information and planning is needed. They said they wanted to be able to see all the information at once. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1606957478719-P98T2OI5KPX7KNTOLUW1/03.02+User+Flow+-+Talent%2C+Mobile+.jpg Case Study #2 - Mobile Userflow When it came to looking at the festival schedule and talent lineups, users said that they preferred to see that information from their phones. Reason for this is that they wanted the flexibility and portability of carrying a virtual map. In this case, we created methods for them to really plan out their schedules on the desktop and get a feel of how their days would end up looking like. https://www.neilespiritu.com/case-study-3 daily 0.75 2021-05-05 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619609517672-IPJCDG1PCUR5T7SMAM44/Intro.png Case study #3 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619594231600-ITHOL0ZTWFB3Z4KEERVW/Current+website.png Case study #3 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619602802294-47AVIBTFM9PJLBFIDRO7/Heuristic+Analysis.png Case study #3 - Heuristic Analysis By referring to and using Jakob Nielsen's 10 general principles for interaction design, I was able to recognize areas for improvement on the website. By pinpointing these areas of concern, it allowed me to make quality changes to cater to the users’ needs and expectations when browsing the website. Consistency and standards There seemed to be an issue with consistency for the navigation bar on the homepage. The repetition of categories was overwhelming and lacked a consistent pattern or order. Content hierarchy needed to be addressed. Many of the same categories lead to the same pages on the website. The excessive amount of categories could lead users into confusion and cause disinterest in continuing to shop. Recognition rather than recall The repetition of categories can also cause cognitive overload. Users should be able to recognize where look for specific categories rather than spending tine trying to determine if they are even heading in the right direction. Aesthetic and minimal design The excessive amounts of categories causes clutter and has a negative effect on the users’ attention. The categories should be limited to only the necessary components for the users’ to achieve their end goal in finding the products that they need. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619582592662-KG1HSPJO7W9IH1AOY48F/User+Testing.png Case study #3 - User Testing Besides my use of Nielsen’s principles of design, I wanted to make sure that I was not biased in my assumptions. I interviewed a total of 10 users who used or at least heard of Grailed. I also made sure that they had experience of using other similar platforms such as Depop and Poshmark. 6 of the users were males and 4 were females all ranging from the ages of 19-30. Even though Grailed almost specifically targets males, they also have a good amount of females constantly buying clothes through their commercial peer-to-peer platform. Careful analysis of actions and comments were taken during these interviews through Zoom interviews. From there, I was able to take note of their motivations, frustrations and pain points. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619598994852-14A2WPDPDFXASU8DWVQJ/Persona+%28Buyer%29.png Case study #3 - The Buyer https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619598868152-DDKS8RKF8N05TO1YLCYC/Persona+%28Seller%29.png Case study #3 - The Seller https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619585898118-CNAIJLXUZY29XWHM2CBI/Sketch.png Case study #3 - Sketches Once I had the general idea of what type of users made up the majority of the website, I grabbed a pen and started brainstorming some ideas. I wanted to make the quality of life better users so I made sure to keep their needs in mind when designing these pages. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619582831791-TZWHC1PG5Z6GBPO56U8N/Style+Guide.png Case study #3 - Minimalistic Approach Once I had the fundamental building blocks all sketched out, I wanted to begin creating low-mid fidelity prototypes. I created a style guide with a very to easy read font with minimal colors. Many users said that they wanted to go through the buying process as quick as possible while still enjoying the content provided by Grailed. To ensure this, I made sure to stick to Grailed’s monochromatic color theme to allow the products to stand out more during the browsing process. This goes back to Nielsen’s guidelines for user interface design. An aesthetic and minimal design will lead to less clutter and less distraction to the users. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619602123840-8APZHTUFDMEJC8CFFK1H/Simplicity.png Case study #3 - Simplicity Initial reactions from the user testing of Grailed’s website led me to believe that the content overload on the homepage was detrimental because it did not allow the user traffic to be retained for long periods of time. Content hierarchy needed to be reworked while also made simpler. Users did not know where to look first or how to even proceed to the direction that they needed to go. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619590714517-2HKL5STPWBJOYNSKR149/Diverification.png Case study #3 - Diversification While reading through various communities such as Reddit, it became clear that females did not feel equally welcomed to using the website. Most of the females said that they would like to make some purchases through Grailed but are turned off because of the lack of diversity. All of the images were of males. To counter this and in hopes of bringing more traffic to Grailed, implemented pictures of both males and females. This is important because all of these clothing styles have a lot of both genders participating. It is only fair and right that females are represented in the visual contents of the website. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619628773242-I79ISBZPALFZBJHXN82Q/designer+page.png Case study #3 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619591472309-A1020D73DDU382TZG9YP/Menus.png Case study #3 - Menus To also make the website more simplistic and minimal, I decided to take the cluttered navigation bar and integrated it into two main categories for Men and Women. This allows me to reduce the visual clutter that derailed many users from finding their objectives. From these two main categories, it becomes a drop down menu that splits into 3 sub categories of designers, clothing groups, and styles. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619590801405-YYZUUR5506BQC9UP2KAA/filters.png Case study #3 - Filters Users complained that the current filter system was too confusing and overwhelming. I then decided to use card sorting to give me an idea of what to prioritize when it came to categories, styles and sizes. This is helpful to the overall design of the buying process because it makes the process more intuitive to the buyer or seller. I opted for a more friendly laid out approach rather than endless drop down menus. This also improves the visual aspect of the website by making it look cleaner and more modular. A toggle for sale items was also implemented because a lot of users said that they would like to spend less time finding the sale items. https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1619608145199-E38W9EJ50NTTHFT1ELQQ/Seamless.png Case study #3 https://www.neilespiritu.com/home daily 1.0 2020-11-19 https://www.neilespiritu.com/home/people-b4seb monthly 0.5 2020-11-18 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390811622-G6JKGPIKGXS2CBQJCGSI/25198093367_2df4dc38e0_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390813900-F0B50HDCFIRZBK0Z1Q16/25382589318_23e44dbbf8_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390808127-J5NHR4H2Y89ACMTCJRWH/27205270077_4f66092381_o.jpg Home - portraits @ashpoteto https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390808509-IA1DPDYGCE6FV3L30PEE/28134507438_75ed4f31ff_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390811800-X8ELL8783CEF2C7TY07E/39172049325_9864e64558_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390813909-3GN9TG6IJDCU5DHHN528/39526372920_50bc1e412f_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390816283-EA0AEH16VN7P2CEKHAXM/40605099801_c8490d3e12_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390815661-6AGI4QD6UU8ONKOZCQY6/40759439440_94e42267ea_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391052189-NAEEQC9CCTZLF0X416QF/40913165120_c3d238634e_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390814649-1OUMIFN8PQYP9XECCKOS/41009436064_8d30cfff0c_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390815725-8PCZA26QLQU7O87VPIVD/41287592434_7984175a3d_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390816262-G5M2EOJUNAGIHW91ESLH/41355744854_0e5e67e85a_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390834759-J7A8YB464GTPS8X6YXQO/42003768574_59bf1aa941_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390820880-WDLBYIV70VIO8MOAGMZC/42431483242_d3e1007f02_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391085981-9UUZ6VHCUR110ZAY4TO3/42722715351_2fc575501d_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598390831782-88AKP8YPRDH4WKIYWAJE/43781229504_45ec3d451b_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391004597-FAEG26OGC2ACA588CEC1/47977028473_e3814b4391_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391023465-8JTCYWITVID54H12WCE8/47977048402_156a0579b6_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391086631-XRQQHEB6F3T3HW4K5HG1/47980634467_68c30091ec_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391002165-RQXK4EZ93LQF637KZ46N/48005835503_88e8796704_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391090058-DSYICU5GGVGKRVKRTX4N/48005908346_c680dcbb2f_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391090047-4PNSD1EUSCBSJGFE0W27/48005908661_aafd47ce40_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391136831-N53OOQDSTQ27R5HCA9NA/48228952622_01281ed948_o.jpg Home - portraits https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1598391142067-3GPU6GBE00W0U9Q30WUE/48961023643_1d4795721e_o.jpg Home - portraits https://www.neilespiritu.com/home/casestudies monthly 0.5 2020-11-20 https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605830415380-J982VY1ZFRW8E875P587/Group+78.png Home - ux case studies https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/1605852516305-TJZUKOL48D1B8MJIAZ9Z/Frame+81.png Home - ux case studies https://images.squarespace-cdn.com/content/v1/5f4566db07a7030af994652d/fc2d9919-716f-4238-bfea-8940f70d9a10/Group+98.png Home - ux case studies https://www.neilespiritu.com/ux-case-studies daily 0.75 2020-11-18 https://www.neilespiritu.com/ux-case-studies/project-one-3hghc monthly 0.5 2020-11-19 https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847336759-YACMFJPFHUW1OQZJXUUF/20140301_Trade-151_0124-copy.jpg UX Case Studies - Rooster Grin (Website Redesign) https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847336169-ER4P81V0HWA3SH81W1QR/20140301_Trade-151_0124-copy.jpg UX Case Studies - Rooster Grin (Website Redesign) https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847334968-DE82MACUOAUSEZT65M3H/20140301_Trade-151_0124-copy.jpg UX Case Studies - Rooster Grin (Website Redesign) https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847334245-H430ILXV7TTE8OBGPEW8/20140301_Trade-151_0124-copy.jpg UX Case Studies - Rooster Grin (Website Redesign) https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847333502-CVFRP4WIHRB50F56M888/20140301_Trade-151_0124-copy.jpg UX Case Studies - Rooster Grin (Website Redesign) https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847332741-UB05QWW31DIDXCV1C06L/20140301_Trade-151_0124-copy.jpg UX Case Studies - Rooster Grin (Website Redesign) https://www.neilespiritu.com/ux-case-studies/project-two-fkptl monthly 0.5 2020-05-20 https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847341420-H8BGVV7QHLUZ41NQKDDO/20140301_Trade-151_0124-copy.jpg UX Case Studies - Project Two https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847340763-INL9ICD0DK2G1M8D7C0L/20140301_Trade-151_0124-copy.jpg UX Case Studies - Project Two https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847340215-08399OG7B1B8UI9HK97O/20140301_Trade-151_0124-copy.jpg UX Case Studies - Project Two https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847339638-MF4NXTWSJ51TSBFP4AIM/20140301_Trade-151_0124-copy.jpg UX Case Studies - Project Two https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847337890-BMG68HKP3DXYMQZ6BZA6/20140301_Trade-151_0124-copy.jpg UX Case Studies - Project Two https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847337276-72BJU9SDMO608XKWX1Y0/20140301_Trade-151_0124-copy.jpg UX Case Studies - Project Two