https://www.carlosdsarellano.com/home daily 1.0 2025-11-10 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1e846439-be37-4821-9f10-50f1e385e915/mehehe Home - Hi there, Carlos here ✨ With over 4 years of experience in the Publishing industry, now I’m currently the lead UX/UI Designer for Hearst Magazines UK, where I work across the digital products of 16 prestigious and iconic brands that reach 2/3 of UK’s population. A bit about me is that I’m a problem solver by nature with a big heart. I laugh a lot, eat way too much, want to have a bunch of cats and love to travel! Always looking for exciting opportunities, feel free to reach out. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/6d4d8fbf-60ee-457b-9d28-2b77b2e0d738/Design+system.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/d0307a5d-f559-4b57-b19a-6b13af7af436/Visual+%26+Print+design.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757539712-8WBMC7670STU3C1210N1/project_homepagetransparente.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757847829-TDXA6DX6UG8U8R4FGU3G/project_navbartransparente.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757891343-Q1IJDJ7ZDU6FZNW8E0A2/project_meterjourneytransparente.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757985578-FCIMVHCQRKHI46TCW786/project_apptransparente.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1704127593817-CL2KGXW4TK62EOB016EH/project3.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1702666019389-C8Z9O8K99IFO33IBSIJQ/Project+2+image+%28mockup%29.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1703694953680-Q78LNUCMXIVNIX2829BG/Project+4+image+%28mockup%29.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1703691809470-NAAQD5I4CL5NZ0QS3TJ6/Project+1+image+%28mockup%29.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/21bfe54b-19f5-41ea-8851-0fbe6382c219/Mockup3.png Home https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/e501025f-9576-428f-8f66-1fdb5aee92e8/Screenshot+2025-07-22+at+02.22.33.png Home https://www.carlosdsarellano.com/about daily 0.75 2025-07-22 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/8b09df80-45a5-4736-9371-8a6b090fdf99/06CD0AEF-D73B-4EC4-8B58-65DB1DC7774D.jpg About - Okay, so who is Carlos? Hello there! Salutations from my desk. I’m Carlos, a 26 y/o Product Designer working in central London with a background in the manufacturing, hospitality and publishing industries and a diploma from a UX Design Bootcamp. I have lived in 4 different countries and speak 3 different languages (guess which one is the third), have a tendency to laugh at all times even if it is inappropriate and love to talk about movies and music. I also eat a lot! My many hobbies include baking (I make a mean red velvet), playing The Sims and League of Legends until my PC crashes (poor thing is old), randomly deciding to rewatch entire movie sagas when I should probably be asleep and ordering desserts at 11:59 pm. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/fa4cc3e5-b3ed-4135-808c-b35f51bbe510/Screenshot+2025-07-22+at+02.26.23.png About - What is he doing now? I’m glad you asked; well, currently, I’m working as the lead UX/UI Designer for Hearst Magazines UK, across all of its pretty amazing brands (16 in total!) and I’m also doing freelance graphic, branding and product design on the side as these are though times (no lies detected) and because apparently I can’t say no to people in need. How noble indeed. So, in Hearst UK, I work with my immediate PDE team (Lead PM, 2 devs and 1 QA Eng.) but also with a plethora of teams from all regions (given how massive the company is), and multiple thirdparties and agencies (as we outsource specific skill sets/tech stakcs.) Here, I have had the opportunity to work on redesigning the Digital Spy website, reskinning the website and two apps for Good Housekeeping, introducing a training plans feature for the Runner’s World app, creating activation and recirculation components for all UK and other international brands, and many more! https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ae0a0850-0185-4ad1-95a5-42fb8faa1a1b/attachment-caroline-polachek-desire-i-want-to-turn-into-you.jpg About https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/07ef14a5-448e-4fb0-8d2f-054d3da35c99/IMG_20200706_135029.jpg About Sasuke Uchiha https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/70d6cc59-6cb5-47f0-bc91-e3f3af74290a/MV5BMjA4MzU5NzQxNV5BMl5BanBnXkFtZTgwOTg3MDA5NzM%40._V1_FMjpg_UX1000_.jpg About https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1ae0425d-cbf0-42e6-880a-a0c70fe7d6d1/MV5BZjdkOTU3MDktN2IxOS00OGEyLWFmMjktY2FiMmZkNWIyODZiXkEyXkFqcGdeQXVyMTMxODk2OTU%40._V1_.jpg About Interstellar https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/417d1dc1-544e-4df6-82b2-f7deb2c3407f/0191cfdb5cb3033ab7c9972e7908ae7c.jpeg About POSE https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/5e0a5d01-8c5f-4059-933a-6e265fff4bc3/bram-zwikker-bram-zwikker-chrome-meth490yw9.jpg About https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/46255517-fe4d-4e0f-9ba8-b1f5d5872c00/SZA-CTRL-album-cover.jpg About SZA - Ctrl https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/895b2936-28c9-4b43-992d-a2cfaed5e017/Screenshot+2022-05-04+at+17.46.05.png About Mariah Carey - Butterfly https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ac10a837-3f87-4556-81dc-b16763ddf1ed/MV5BNzY2NzI4OTE5MF5BMl5BanBnXkFtZTcwMjMyNDY4Mw%40%40._V1_.jpg About Black Swan https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/e99b09c1-93a6-4b42-a357-d97c47ab67fd/4v6zJ_4f.jpg About https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/6f4dae55-1be9-4fa1-8839-db3280f58384/MV5BMjlmZmI5MDctNDE2YS00YWE0LWE5ZWItZDBhYWQ0NTcxNWRhXkEyXkFqcGdeQXVyMTMxODk2OTU%40._V1_.jpg About https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/7a7009ba-6420-46ad-aeb1-586885ef9494/Goku_For_President.jpg About Goku https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/bfa3eec7-b153-4ca6-8cd7-ef73c9d65a2b/MV5BMmQ2MmU3NzktZjAxOC00ZDZhLTk4YzEtMDMyMzcxY2IwMDAyXkEyXkFqcGdeQXVyNzkwMjQ5NzM%40._V1_.jpg About Alien https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/de88be1d-81c6-4874-a33e-c7b7293ae384/missthing.jpg About Jessica Rabbit https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/12ec3718-a6eb-4966-af73-2db6e6124b90/E1H0q6lWUAsQfQL.jpeg About Mass Effect saga https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ef62fef0-2ff1-4ac0-bead-c4f4aa8e956e/league-of-legends.jpg About League of Legends https://www.carlosdsarellano.com/home-page-top-section-templates daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757539712-8WBMC7670STU3C1210N1/project_homepagetransparente.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/f1c74492-4180-4650-84b7-fc69aae2238e/Screenshot+2022-05-23+at+21.16.32.png Home Page Top Section Templates - Make it stand out Featured Topic section, on the top and bottom of the template, of 3, 4 and 5 articles https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/210dc1d9-1a54-4e79-bb49-701881ad1f0f/Screenshot+2022-05-19+at+11.52.03.png Home Page Top Section Templates - 4. Dev handover and manual QA testing The dev handover was quite fast and easy; I organized meetings with the dev team to explain the final designs, which they already had a prior understanding of them as I believed it was important to get their opinion on the designs and what was feasible to implement. The dev team got access to the files through Figma, and there, they could use the inspect tool to get detailed information about the assets. Because I reworked the Style Guide to match the naming of colours and typography to the code base, as well as components, it was easy for the dev team to understand and create the components with what we already had on the same codebase. It took around 3 months to implement the 3 templates and additional requested features, which also followed the same process. While the dev team was implementing the designs, I continued to design the new features, and as soon as I finished with them, I went right back to QA testing the latest designs implemented. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/77e245c7-d2de-4b3f-a27d-3eb139e5429d/Screenshot+2022-05-23+at+21.14.24.png Home Page Top Section Templates - Make it stand out Same breakpoints but with the Featured Topic section, of 2 and 3 articles https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/adb7e1d6-0df6-4806-b57d-25bf63b7c218/Screenshot+2022-05-18+at+20.24.04.png Home Page Top Section Templates - 1. Gathering requirements and research To begin the project, I had meetings with my PM and the Head of Digital, to fully understand their motivations and considerations behind the project what was exactly what they wanted to achieve, which was primarily to increase the number of articles and topics shown to users as soon as they open the website (top section.) I then conducted competitive research to identify what were the trends regarding the composition of templates and design of cards and discovered that publishing companies that have more dense templates, grouped content by similar topics, and some of them use even used kickers to give a hint to the user of what the article was about, which also helped to ditch naming the groups and lengthy explanatory titles, reducing the overall size of article cards. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/b8a7037f-637d-451d-bedd-15d47b84a882/Screenshot+2022-05-23+at+21.21.04.png Home Page Top Section Templates - Make it stand out These are the Desktop, Laptop, Tablet and Mobile breakpoints, with a cartoon and article on the feature slot https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1069d4df-441c-43d7-aceb-f657497e803c/Screenshot+2022-05-23+at+21.24.34.png Home Page Top Section Templates - Make it stand out Most Popular feed being used above the Coffee House feed https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/c8168507-77c3-4613-a8bf-311bc0b987f1/Screenshot+2022-05-20+at+16.17.49.png Home Page Top Section Templates - 3. Design presentation and iterations After having designed robust prototyped screens for the different templates we wanted to propose, I put together a presentation to sell the concept to the rest of the company, principally the Editorial Department (as we are a content-based company and they will have to manage the templates themselves through the CMS), I presented the project and got great feedback. We consolidated 3 different templates, the Low and High-density (for when we have less and more content, respectively) and the Magazine special template (for Thursdays, when the magazine gets published online). We also had to make some iterations to comply with their more specific needs, for example, making some articles appear more visually relevant than others and removing the kickers from the lead article and feeds (as it would be too much work for them, as kickers are manual work.) I updated the final desktop designs and went on to design the rest of the breakpoints (our website has 4 in total, desktop, laptop, tablet and mobile) and went back for a final round of feedback with the Editorial team and applied their feedback. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/79463f47-c7cd-434e-b920-d94385176f54/Screenshot+2022-05-23+at+21.21.10.png Home Page Top Section Templates - Make it stand out These are the Desktop, Laptop, Tablet and Mobile breakpoints, with the Magazine and Coffee House feeds https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/034fa309-7ae0-4047-b06d-e4c22a98eaac/Screenshot+2022-05-24+at+23.56.54.png Home Page Top Section Templates - Make it stand out These are the Desktop, Laptop, Tablet and Mobile breakpoints https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/e7bfb500-09e4-424d-9505-f0dbd71b9865/Screenshot+2022-05-24+at+23.57.39.png Home Page Top Section Templates - Make it stand out Most Popular feed being used above the Magazine and Coffee House feeds https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/db863a39-bf01-433a-9979-6d8e90acd3bc/Screenshot+2022-05-19+at+13.58.31.png Home Page Top Section Templates - 2. Ideation and design Having synthesised ideas into design choices that I wanted to explore, I began to design desktop-first wireframes (i.e. screens of variant fidelity that will resemble the look of the final screen) and check my progress with my PM to ensure we were going in the desired direction. I added more and more details until we had a set of different layouts that would serve for different types and numbers of articles, creating then the templates. Going back to the challenge of the project and what we wanted to achieve, the temples were designed by a composition of groups of articles related to topics and the main categories of the website with the help of kickers and colours (which relates to the main categories of the website.) And the two additional features, the more visually distinctive group of articles and the Most Popular feed, would take place in the same groups, but would also be formed by articles grouped by topics. In the middle of the actual design process, I made the decision to move from Sketch to Figma, as I believe it would streamline many processes, such as the dev handover as well as being able to share and edit prototypes in real-time with stakeholders and immediate team. While doing this, I also migrated and build upon the website Style Guide and master files, as they haven’t been updated in over 2 years (since the launch of the new website.) https://www.carlosdsarellano.com/website-conversion-funnel daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757891343-Q1IJDJ7ZDU6FZNW8E0A2/project_meterjourneytransparente.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/aa068730-7d7d-4431-a228-c7654dba00d1/Screenshot+2022-05-26+at+02.06.28.png Website conversion funnel - Make it stand out First row: Meter Journey without the countdown. Second row: Meter Journey with the countdown. Third row: Comment section and Join page. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/8292f7aa-4221-4a7b-abd8-13bacc3704e1/Screenshot+2022-05-26+at+00.17.51.png Website conversion funnel - 4. Dev handover and manual QA testing Having designed all the screens and consolidating all the changes, I cleaned the file of any undesired design leftovers and moved it into a new file that was shared with the dev team, and then had a few catch-ups with them to explain the designs. I checked and QA tested all the designs on the Dev environment and raised issues tickets on Jira with screenshots and details of what was wrong and what it had to be changed. The dev team fixed the issues and then deployed on the Preview and subsequently on the Live environment, and I QA tested each deployment. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ecc2c06f-ea13-4d16-aeb5-a559ada98ce8/Screenshot+2022-05-26+at+20.49.32.png Website conversion funnel - Make it stand out First row: Meter Journey without the countdown. Second row: Meter Journey with the countdown. Third row: Comment section and Join page. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ba37ed35-540a-4d2d-a06f-8b4b8fac8f83/Screenshot+2022-05-26+at+00.09.48.png Website conversion funnel - 2. Design and prototyping Haven written down the ideas I wanted to explore, I began to design desktop-first approach wireframes where I first apply overall changes to the typography and colour palette of the assets (increasing the font size on specific fields and using a white background and a single accent colour) and then made more specific changes to each asset, keeping in mind that we wanted all the fields and features inside them to be editable and shown on/off to guarantee the possibility of future changes without dev work. Going back to the challenge of this project, what I was trying to do was to tweak the current designs and present different arrangements of the preexisting field (e.g. heading, subheading, list of benefits, images, etc…), making small changes to help us align ourselves with the competitor’s strategy that seemed to be working. After finishing each version of the desktop prototype flow, I had catch-ups with my PM to ensure that we were heading in the right direction, and after multiple iterations, we came up with a robust prototype that we felt confident with. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/e96fba38-932f-42ac-bb0d-19e8abca109b/Screenshot+2022-05-26+at+20.50.42.png Website conversion funnel - Make it stand out First row: Meter Journey without the countdown. Second row: Meter Journey with the countdown. Third row: Comment section and Join page. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/63870cb7-a16a-4925-82bb-f8516001c92b/Screenshot+2022-05-26+at+01.24.08.png Website conversion funnel - 1. Benchmark and synthesis To embark on this design journey, I decided to compare our different assets to the ones from the competitors to understand how where they presenting different offers, and how and what they were displaying in each separated banner in their user converting flows I found that not all publications have a registered state for their users, and therefore decided to hone in the research on the ones that do have such a state, as we have it too. I realized that, overall, a shorter copy was used, using big fonts on pricing, and that on the datawall (the banner that asks the user to register in exchange for article allowance) the focus is on listing the subscription benefits rather than on the paywall (where we ask the user to subscribe), where the focus is in pricing. Conducting further research on unrelated apps, I found that a way to build trust with the user when promoting the “1 free month trial”, was to explain in detail the progress of the trial and let the user know what would happen in each stage from day 1, succinctly (you can see it in the Variant 1 for datawall, soft/hard paywalls on the prototypes.) https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/c999a4b5-a211-4ebe-a93a-ba4573e695ad/Screenshot+2022-05-26+at+02.31.46.png Website conversion funnel - 3. Presentation, breakpoints and feedback I gathered the research I put together and assembled a presentation to help sell the distilled insights and design choices made. I then presented to the Marketing team, CMO and CFO, and received generally positive feedback although a few changes had to be made, for example; changing the design of the countdown (for limited time offers), and changing the accent colour (which was a muted gold that then became a bright yellow.) Shortly after, I moved into designing the rest of the breakpoints (laptop, tablet and mobile), made prototypes and presented again for a final round of feedback, gathering their feedback and applying it back again. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/f07ba5bb-a136-4449-a4b0-f9297c210b49/Screenshot+2022-05-26+at+20.49.56.png Website conversion funnel - Make it stand out First row: Meter Journey without the countdown. Second row: Meter Journey with the countdown. Third row: Comment section and Join page. https://www.carlosdsarellano.com/navbar-and-footer daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757847829-TDXA6DX6UG8U8R4FGU3G/project_navbartransparente.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/0ca2ba3c-6223-4019-85cd-e33948b8bd45/Screenshot+2022-05-23+at+21.47.40.png Navbar and Footer - 1. Competitive research and synthesis of insights Before starting to design anything, I wanted to have a clear understanding of what our many competitors were doing regarding their top navigation; see which categories/topics they were displaying first (i.e. featured ones), and how they were presenting them (i.e. the hierarchy) and how did they organize them (i.e. type of grouping.) After comparing their websites and highlighting the trends, I realized that we should implement the ability to edit our featured categories/topics so that the Editorial team would always be able to choose and display the current and most important ones; and that the new navbar had to be composed, once hovered and opened, by groups of categories/topics with their respective subtopics. Thanks to the Affinity Map that I did (in the image at the left), I discovered the most popular and accessible naming of topics and groups of content and decided to suggest changing the names of some of our own topics and categories (the ones that were ambiguous), to more understandable names (e.g. Coffee House to Latest) https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/f4cf6720-d5cb-4696-b5ea-2494e2eb645b/Screenshot+2022-05-23+at+22.32.07.png Navbar and Footer - 2. Redesigning the assets, presenting and applying feedback With clear insights and direction from PM, after catching up on the research, I began by recreating the current designs from the website and started to apply the necessary changes to them with a focus on desktop-first approach wireframes, as the components were more complicated (UI wise) on our desktop breakpoint. Thinking about our challenge, and because they were already in the footer, I decluttered the navbar of unnecessary links that directed users to related websites of our brand, and gave the navbar freshen-up design, focusing on the four categories of our website and their subtopics, which are; Coffee house (politics, economics, society, etc…), Culture (books and arts), Life (current affairs and lifestyle) and Magazine (content that comes directly from there.) I also updated the colours and links of the footer to make it more cohesive. Due to the fact that this wasn’t a project that we had to “sell to the company”, before showing anything to the Editorial team, I made sure to have robust prototyped screens, across breakpoints, to help illustrate the vision and direction we took according to the research. We had then a meeting with the editorial team, made the requested changes to the design (e.g. increasing font sizes and size of caricatures) and consolidated the categories and topics that were going to change. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/f13c08fa-f5c2-4eec-aa48-458b717152d6/Screenshot+2022-05-23+at+20.59.02.png Navbar and Footer - Make it stand out On the left, for unsubscribed users, and on the right, for subscribed users https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ddea9af0-1e36-41d0-8fbd-ecfddb48006d/Screenshot+2022-05-25+at+00.27.42.png Navbar and Footer - 3. Dev handover and manual QA testing After the final round of iterations, I made sure all the designs were “cleaned” for the implementation of this project, we worked together with a senior developer contractor, provided by an agency. Using Figma, and having recurrent small catch-ups, I ensured that what I designed was indeed feasible to implement as well as shared in a way that was straightforward to inspect. The new components were deployed to our Dev environment where I thoroughly QA tested and raise the bugs found as issue tickets in the project management tool called Monday, then deployed to the Preview and Live environment, where they followed the same testing process. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/129ee958-1f52-482f-be81-f884f0037179/Screenshot+2022-05-23+at+20.54.54.png Navbar and Footer - Make it stand out On the left, for unsubscribed users, and on the right, for subscribed users https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/db0db637-432a-47fb-bdd2-c96ca168b406/Screenshot+2022-05-23+at+20.40.06.png Navbar and Footer - Make it stand out On the left, for unsubscribed users, and on the right, for subscribed users https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/f85574f4-ddb1-4d1d-816e-d07934c8f48d/Screenshot+2022-05-23+at+20.30.56.png Navbar and Footer - Make it stand out On the left, for unsubscribed users, and on the right, for subscribed users https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/4ed384c1-29b6-4f9e-9fb6-21d6481bb94c/Screenshot+2022-06-15+at+12.24.25.png Navbar and Footer - Make it stand out These are the Desktop, Laptop, Tablet and Mobile breakpoints https://www.carlosdsarellano.com/full-home-tab-templates-and-navbar daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1653757985578-FCIMVHCQRKHI46TCW786/project_apptransparente.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/373bc7d1-1b9a-4318-a6be-0230a451a3b9/Screenshot+2022-05-28+at+21.42.14.png Full Home Tab Templates and Navbar - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/93be659a-2023-4ea0-a6a1-aa03fd221214/Screenshot+2023-12-28+at+16.37.30.png Full Home Tab Templates and Navbar - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/02160ec4-99b6-42dd-9ae1-fc175c378bd4/Screenshot+2022-06-01+at+01.02.45.png Full Home Tab Templates and Navbar - 4. Dev handover and manual QA testing After consolidating the final designs, I organised the designs and moved them into a ready-for-development file, I had catch-ups with the dev team (of two) and explained the designs and intended behaviours of the various cards, layouts and templates. I also updated the app preview and screenshots for both the Play Store and App Store. Worth mentioning that even before finalising the designs, I had already had catch-ups with the dev team to ensure that what the Editorial team wanted to be done and that what I wanted to design was indeed feasible in terms of code and implementation timelines. With the deployment of the redesigned assets into the Dev environment, I moved into QA testing all that had changed and writing and raising issues on Jira, and after them being fixed, checking back again. This process was repeated when these new design changes were deployed in the Preview and finally, into the Live environments. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/a6d51ba5-0811-4053-9311-ac20d5b9ac0b/screenshot1.png Full Home Tab Templates and Navbar - 3. Selling the concept and iterating on it Having prototyped the screens for different devices, I put together a Keynote presentation utilising the research done and highlighting the distilled insights to help sell the directions I took for the designs. It was directed to the Editorial team and even though I received great feedback, they wanted to go further with the design changes. They asked for more tailored-to-the-device changes in the Top Section and after many subsequent rounds of iterations, I came up with totally different templates for mobile and tablet, with variant numbers of articles, that best-fit them in the different screen sizes. Apart from that, small typography and image alignment fixes had to be made, and so I did. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/8b1161d4-dd37-4e1a-9809-760ef325764b/Screenshot+2022-05-28+at+21.42.45.png Full Home Tab Templates and Navbar - Make it stand out Same breakpoints but with the Featured Topic section, of 2 and 3 articles https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/3f1b77cf-3157-407f-89b4-57fcb1e51cf3/Screenshot+2022-05-29+at+20.58.21.png Full Home Tab Templates and Navbar - 1. Competitive research and synthesis Starting this project, having a clear understanding of how the competitors were displaying content on both mobile and tablet (portrait and landscape) was crucial as the complexity of the project required an almost paradoxical answer. I compared the Home Tabs from the apps of multiple competitors across different devices, for a few weeks, and discovered not only that the actual sections and their organisation (which one went first, second, and so on) changed, but that they managed to reduce the white space by changing the alignment of entire cards and elements inside of them (e.g. tags and images) to adjacent cards or elements making an illusion that in actuality the white space was meant to be there I also compared Navbars and found that in contrast to us, the use of illustrations was rather unique and that competitors went for a simple text box, without images, scrollable topic bar https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/c8c90ad5-9cc0-43d4-b3a8-14241eeb7c8a/Screenshot+2022-05-30+at+22.19.21.png Full Home Tab Templates and Navbar - 2. Fixing preexisting issues, ideating and designing Because at the start of the design exploration there was work being done to fix the code base of the app, which was overcomplicated, and because there was no Style Guide for the app, I decided to work closely with a Senior React Native Developer to aligned the styles and components of the code with the Style Guide that I was creating, to ensure a seamless handover and easier implementation of the designs in the future. After the work was done, I then began by exploring ways to merge the templates from the website to the ones from the app, updating them to maximise the space allocated to articles and seeing how all the layouts translated across different screen devices. I did this with a mobile-first approach, and after having robust screens, I moved into the portrait and landscape and then created sets of prototypes. Remembering the challenge of this project, I tried to solve it by designing different Top Section templates, for a different number of articles published in a day, and creating sections that had different layouts depending on the device and orientation (for mobile and tablet portrait and tablet landscape), whose elements would rearrange to fill in the gaps of white space. https://www.carlosdsarellano.com/analytics-hub daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1703691809470-NAAQD5I4CL5NZ0QS3TJ6/Project+1+image+%28mockup%29.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/239fefa7-7b6f-4810-9a1b-b35e7d903b6d/Project+1+-+process+image+4.png Analytics hub - 4. Handover, QA, and further iterations Before I started the dev handover, I made the necessary Figma components, cleaned up the files, and exported them to Zeplin. I then make sure to explain the designs and the intended behaviour to the PMs and devs. I was in charge of the component-level visual QA since we were also building our competent library in Storybook/Chromatic, and we needed someone to monitor this regularly. After rounds of QA and bug fixes, the Analytics hub was put live, and we advertised it with an in-platform notification. We then received feedback and similar requests from our users and decided to iterate. We ended up adding features according to the user’s needs: More metrics, Direct links to articles, The ability to view data in different time ranges, And a way to visualize trends over time. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/8a3d52d8-ffef-425f-af23-6dc8a0da4e76/Project+1+-+process+image+1.png Analytics hub - 1. Going through research to identify users’ needs This was the first large project I worked on for Echobox. The analytics hub was a core feature we lacked since the product's launch, and our users reminded us that they wanted it. After I joined the company and started working on this project, I had some assumptions about why users needed this feature and what they wanted to see there. Wanting to find answers, I realized we had user interviews with some of our clients run by our PMs. I reviewed those and understood that our users needed detailed information about their email campaigns and content as they wanted to make data-driven decisions to improve performance and bring more readers to their websites. It was then clear what we needed to do; we needed to show analytics at multiple levels but didn’t know how to. So, I looked into similar platforms (e.g. Mailchimp, Sailthru, Active Campaign, etc.) to see what this feature could look like, and I saw a trend of dashboards, graphs, and tables all displaying metrics and other values. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/bee76fae-c589-41d7-a8c1-a9472a86e4a0/Project+1+-+process+image+2.png Analytics hub - 2. Ideating solutions for needed use cases We came up with lots of ideas, but there were four that we believed could best fulfil our users’ needs: Dashboards of the top metrics users mentioned they wanted (e.g. open rate) A graph displaying the subscriber base segmented by engagement levels A table of the top articles displaying detailed information And a graph displaying the most popular topics for subscribers I worked on all but the last idea since we didn’t have the data science resources for it and decided to park this feature for a future iteration. Thanks to the competitive research, I identified what UI for those features could look like. On Figma, I then began designing them into quick low-fidelity wireframes that, after a few discussions, iterations, and more details, reached a high level of fidelity. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/4c019b43-5cd7-4292-aa99-de019f58027e/Project+1+-+process+image+3.png Analytics hub - 3. Gathering internal feedback and improving designs When I had put together a series of user flows with robust wireframes, I was ready to get more concrete feedback on this whole project and did so by presenting it to stakeholders in our weekly design critique. There, the feedback was around reworking the copy of the metrics’ tooltips, removing elements that would be added in later iterations, making sure all the metrics would resize accordingly in smaller desktop viewports, and tweaking padding. I then addressed those points and reran the designs with the stakeholders. Given the simplicity of the designs and that they were greatly influenced by what our users needed and what we found in similar platforms, we planned not to test it with users but directly release it and iterate it according to their feedback. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/0d15d310-372f-430f-b74d-bafde8729358/project1-designs https://www.carlosdsarellano.com/platform-improvements daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/20000daa-ff4f-4c8c-af62-b38a376baf4a/project2.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/848326bb-631a-4b4b-9cd4-ab844721bd7f/Project+2+-+process+image+3.png Platform improvements - 3. Addressing challenges and polishing designs I would present them to our stakeholders in a design critique session, where I would get the more precise feedback I would use to polish the designs and get them to the highest level of detail, with all the edge cases and different functionally covered. The overall line of feedback was around the challenge itself of this project. I struggled to present features in a way that didn’t feel like Echobox was forcing the user to use them and, in a very specific way, to maximise performance. Since we wanted to recommend and not force action, I reworked the wording and placement multiple times until they felt organic and optional but highlighted their benefits. Given that most features were not high risk and we knew we would continue working on them, we decided not to test them before release but to release them, hear from our users, and iterate accordingly on the next released feature. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/8d4898ea-8cfd-40e5-9273-e60a957b2865/Project+2+-+process+image+4.png Platform improvements - 4. Dev handover, QA and continuous iterations When designing, I would have regular catch-ups with developers and PMs to ensure my designs were technically feasible and aligned with what we wanted to do as a company. The handover happened in Zeplin and Figma. In the latter, I had done loads of component building work and was responsible for QAing them as soon as designs were deployed in our production environment. Once features were live, we would monitor them by getting data, checking it on Mixpanel, and hearing directly from our users in recurring user interviews or catch-ups. Depending on urgency, we would use this information to fuel necessary changes that would be implemented immediately or in the next iteration with the next feature. To date, we have developed over a dozen features that have continuously increased the platform's value for the user, making it easier for them to automate the send-out of highly personalised and customised emails to their readers while saving time and resources. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/7a5f4e7a-553c-4458-aff3-91b376487edd/Project+2+-+process+image+2.png Platform improvements - 2. Brainstorming ideas and putting them together I got together with the Data Science team and PM to brainstorm ideas that would allow our users to increase their email campaign performance. We realised that AI-based features that would make emails more personalised to each reader were the answer. These were: Ability to let Echobox select and order articles for emails based on readers’ interests, creating a unique content selection for each reader The option to use AI to automatically set the subject line and preview text of emails, basing them on the articles the reader received Regarding design flexibility, thanks to the benchmark conducted, we knew we had a major gap we had to fill. And it was clear what was missing: Ability to create and manage multiple templates so that users could have a bespoke one for each of their email campaigns A higher level of design customization in templates to match the company's branding I worked on those features in Figma, designing wireframes for each separately. Starting with less detail, getting internal feedback and improving them until they were robust enough to be presented to our stakeholders. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/7289c32d-2976-4294-88a4-90d030d35c05/Project+2+-+process+image+1.png Platform improvements - 1. Finding what needed to improve with research When I joined this company, it had already been quite some time since our users were properly asked about their goals, needs and frustrations with the platform and their roles. I conducted user research since we wanted to improve our products and the overall user experience. A round of user interviews helped us frame their goals, which were to bring readers from the emails to their websites, their needs, more design flexibility when designing their email templates to match their company branding, and their frustrations, which were that the platform did not offer enough features to increase emails and campaigns’ performance. In the latter area, our data science team had already researched what we could do to improve it. Still, regarding design flexibility and what we should offer, we Therefore, I decided to benchmark email design capabilities with our competitors to find out what was out there already. I discovered that creating and managing multiple templates was ubiquitous and had a higher level of design customization. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/82fdf77b-50c1-4be2-9dee-e4cc42395118/project2-designs https://www.carlosdsarellano.com/email-drag-and-drop-editor daily 0.75 2024-05-29 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1704127593817-CL2KGXW4TK62EOB016EH/project3.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/ae047119-8916-49a2-99bd-525073b11698/Project+3+-+process+image+1.png Email drag-and-drop editor - 1. Researching to identify what needed to change In this company, we would put great effort into listening to user’s feedback. This is partly how we discovered that the features I recently designed, aiming to provide more design flexibility when designing emails, were insufficient. In demo calls, prospects told us our platform lacked a high level of email design customisation. Another insufficient feature was the third-party email editor (image on the left) we have on the platform. It didn’t fit with our users’ workflows since it didn’t use Echobox’s unique AI-powered features, and the lack of intuitiveness and flexibility caused frustration. Now, trying to understand how we could properly address our users’ needs, which was to help them reflect their company’s branding in their emails (to achieve a cohesive digital appearance), I decided to interview similar users to ours. Publishers in charge of their company’s email send-out who would use platforms like ours. We understood that an intuitive interface to design their email templates, with a high level of customization for the building blocks (e.g. image, text and button), was needed. I then looked in more detail at email editors in our competitors to identify which features we needed to include in our solution and how they should look and work. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/2b5daacf-3f42-4e12-abb4-4b2e568b5556/Project+3+-+process+image+3.png Email drag-and-drop editor - 3. Iterating prototypes and addressing challenges As soon as I had covered the different user flows with their distinct prototypes, I would start presenting the designs to our stakeholders in our weekly critique meetings. There I would gather the feedback I would use to iterate the designs, continue to improve them and cover unaccounted cases. There were many rounds of iterations since the designed flows didn’t feel organic and intuitive. I would try to make our UI look too close to what other platforms were doing in the quest of having those design conventions. I addressed this challenge by remembering the core features that made Echobox unique and that users loved, and what were purely the bits we lacked. I designed a workflow in which users, with the click of a button, would let Echobox automatically generate an edition for their email campaigns, pulling the content from their website. The edition would use a highly customizable template that would only need to be set up once, and after that, going to the editor would be optional. In this way, we would reduce friction by removing manual work and leaving more time for editors to make sure their emails look as they want to. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/b8191771-7de1-4f95-a4a6-b5c9e72d4dfc/Project+3+-+process+image+2.png Email drag-and-drop editor - 2. Translating findings into user flows and designs From the user research and benchmark conducted, I knew I had to create Echobox’s drag-and-drop email editor, but in more detail, I had to design: Different types of blocks to let users build their desired template High level of customization of those blocks to make them look the needed way Integrate preexisting unique Ecbobox features into new designs so that our users will continue to benefit from them Given the number of pages and components I had to cover, on Figma, I started with simple wireframes to design specific bits. I would check them internally with the product team to iterate, add more details and get them to a robust state where they could be prototyped to resemble the user flows we would need to address (e.g. creating your first email template) and display the behaviours the dynamic template would have. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/91c23e09-5136-4218-aab8-3771b0fb695e/Project+3+-+process+image+4.png Email drag-and-drop editor - 4. Testing the designs and next steps After finishing the first iteration of the designs, I had planned to run a series of usability tests to assess whether users would understand the designs, flows and things they could do. Unfortunately, the process of this project was paused due to a lack of resources, Still, the plan consisted of a task-based script the users would have to follow; I would guide them by asking them to complete the tasks to achieve the two overall goals: Creating an email with a new template Picking up that email and making further edits before finally sending it I intended to run these tests with our users to get more nuanced feedback. I would have started with five and, after gathering the feedback, and iterating accordingly, decided if a second round was necessary (if, for example, some designs had changed drastically). Finally, I would have organised the files, handed them to the dev team and QA all the components I created. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/d4dc7b08-052a-4241-91cf-dd0ad82e17f6/project3-designs https://www.carlosdsarellano.com/transactional-emails daily 0.75 2024-05-28 https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/1703694953680-Q78LNUCMXIVNIX2829BG/Project+4+image+%28mockup%29.png https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/0b832e8d-d26e-4055-b55e-088082e709ae/Project+4+-+process+image+3.png Transactional emails - 3. Presenting, getting feedback and updating designs I shared and explained my designs and prototypes with stakeholders (e.g. our product team and leadership) to get more detailed feedback in our weekly design critique meeting. I used this to iterate the designs and repeated this process until we all felt the designs were intuitive enough and that they covered what was needed. A piece of feedback which was recurrent was around the overcomplication of certain flows, such as the setting up of the trigger, or starting point, of the workflow (which you can see on the left, the three grouped cards). I solved it by keeping the UI to a minimum while not losing functionality and making it easier for users to set up. While sharing these designs, we realized we had to add more components and behaviours to cover all identified use cases fully (e.g. overhaul the delay step). We ended up designing this project as the end goal since we also wanted to ensure that all different areas worked together seamlessly, were intuitive, and no user’s need would be left out. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/fdeb2179-4f2e-445f-8982-e3d4aa221132/Project+4+-+process+image+1.png Transactional emails - 1. Listening to users to identify Echobox’s feature gaps Echobox’s Email product is still young, and while it offers great support for automating email campaigns (i.e. newsletters), it fully lacks for other types of automations (i.e. events and marketing). We knew this because our users (through regular catch-up calls) and prospects (through demo calls) highlighted the need for our product to cover more types of automations since they had goals that wouldn’t be achieved with regular newsletters. Our PM reviewed all the user information about the subject and identified the use cases we would need to cover with events and marketing-based automation. Some of them being welcome series, birthdays, re-engagement and upselling campaigns. We then benchmarked how other email platforms covered those automations to understand how this project could work and look. We identified we would need to design multiple interfaces where users would be able to: Create and manage their automations, and visualize their performance Build the automation’s workflow, with different types of triggers and steps https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/43110b71-83fd-4cc2-9b0b-0738fef4373b/Project+4+-+process+image+2.png Transactional emails - 2. Mapping what needed to be design and creating interfaces Given the complexity of the project and the multiple use cases we identified, we decided to map out the different workflows that would cover each use case. This helped us understand what triggers (e.g. user joins a segment or signs up for a campaign) and steps (e.g. waiting a set amount of time or sending an email) we would need to design. On Figma, I started to put together the wireframes that would display the interfaces to access and manage automations (i.e. the Automations page) and to build and edit their workflows (i.e. the Composer page). I started with less detail and would get internal feedback to improve the designs and add more details. Once I got all of these designs to a robust state, and given that we had too many of them and I wanted to get feedback on the journeys that users would have to follow themselves, I decided to prototype two flows to cover each of the two pages I designed, with their intended behaviour and capabilities. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/41c4e61e-4cdb-4dbf-a5e4-1d8482cd7c9d/Project+4+-+process+image+4.png Transactional emails - 4. Finding a way to get real users’ feedback before implementation When I finalized to put together the end goal state of the designs, it was more than clear that user testing was imperative, given the volume and high-risk quality of it. Unfortunately, given a change of priorities, we did not have enough time to recruit and conduct monitored tests to identify any usability issues. Therefore, leadership and I devised a plan that, whilst not ideal (since it’s not really user testing), would ensure getting users’ input on the project, and regardless of how it would go, time spent would be minimal. On our regular client catch-ups and demo calls with prospects, if they are interested, we would preview a simple prototype showing different automations and what actions and information you could take and get from there. We would get their opinions, answer questions, and ask what was missing or what didn’t seem to work for them. This plan is in action so far, and as soon as we collect enough information to get a picture of how real users feel about the project, I will translate the insights into design changes to improve the UX. After this, a final clean-up of the Figma files and then the dev hand-over. https://images.squarespace-cdn.com/content/v1/5ffd0d96a864a7721c399ebb/e99bb05b-d3f5-4f92-bd45-1593f7ec01b0/project4-designs