| Source | https://www.youtube.com/watch?v=H0czeRyXPxA |
|---|---|
| Readwise URL | https://read.readwise.io/read/01kvyr8gaeef20d9pnzak576y0 |
| Readwise ID | 01kvyr8gaeef20d9pnzak576y0 |
| Date | 2025-03-10 |
| Author | Chris Raroque |
| Category | video |
| Cover image | https://i.ytimg.com/vi/H0czeRyXPxA/sddefault.jpg |
welcome to the video if you’re new here my name is Chris and I build productivity apps I usually focus on one productivity app per video So today we’re focusing on Ellie quick context Ellie as a daily planning app it’s basically your to-do list and calendar combined so that’s the app that we’re going to be talking about today so a common question I get is what is your design process so I thought I’d make a quick video outlining what my design process is and I actually have the perfect feature that I think would showcase what that looks like in practice so I’ll walk you guys through the process and I’ll show you guys how we got from this screen to this screen by the end of the video so the feature we’re going to talk about is search for the iOS Le app but before we get into it
let me talk about my process at a high level so I do want to mention that the process changes a little bit depending on the feature I’m working on but on the whole these are the steps that I usually take for most of the features so the first step of my process is mood boarding and finding good examples and this is basically where I find a bunch of good examples all over the internet using some tools which we’ll talk about in the video and I put them on a figma board just so at a high level I can see what are other people doing what options I have and just try to get some inspiration for where I want to take the design of the feature even if the feature is super simple and pretty straightforward like I already have a pretty clear vision of what I’m going to
do here I usually find that the process is still worth going through because maybe you find something you never would have thought of or you get inspired and decide to go in a completely different direction you basically have nothing to lose by doing this so regardless of how small or big the feature is I always do this step first so once the mood board’s done the second step is I try to prototype a bunch of options in figma if there’s only one option sometimes I skip the prototyping in figma and do it directly in code but if I have more than one option I like to do an inigma so I can see the options side by side and compare the third step in my process is once I have a bunch of prototypes laid out I pick pick the best prototype out
of all the options and then I implement it directly in code so I can test it on a real device with real data and the reason I want to test it on a real device is I want to test the ux or the user experience figma is great to be able to see the UI and see how it looks but but I found if you really want to test the ux you need to do it on a real device so you can actually simulate what it’s going to be like in the real world for users and I try really hard to test it with real data because sometimes fake data makes everything look really good there are so many designs that I’ve seen that look amazing because they have really good high quality imag or
specific texts that just fit the screen and look really good but then in production with real data and lower quality images it just doesn’t look as good so I try to test it with my own data or as real data as possible just so I can catch some ux problems that the really good fake data was hiding and this actually was the case as you’ll see later in the video the results were actually a little different once we started using real data but we’ll talk about that later in the video and the final step is to just iterate on the design now that it’s on my device I’ll be able to get a good feel for it and I usually have a ton of ideas and a bunch of things that I would change once I’m actually using it but this is what takes
the majority of the time for my design process it’s this constant iteration and refining this is the high level these are the four steps of my design process so let’s actually jump into the feature so you guys can see what this looks like in practice so the feature that we’re working on is search for the mobile app also my girlfriend Cecilia is a designer and she wanted some practice thought it’ be fun to work on this with her so huge shout out to her for helping me with this one so the first thing that we did was the mood boarding and finding good examples I get inspiration all over the internet but the primary tool I use to find examples is something called mobin if you’ve been watching my channel you know I use mobin you know I talk about
them all the time I’m really excited to be able to say that they actually sponsored this video so huge shout out to them I’m going to leave a link in the description if you’re interested in trying them but even if they weren’t sponsoring they’re the tool that I’ve been using this entire time to get inspiration and it’s basically a huge design library with screenshots and flows from other applications so in this case we’re looking to build search so we hopped on mobin we searched for search and we found all of these different amazing screenshots on how other apps Implement search so we copied the ones we were the most drawn to threw them on a figma board and this is the mood board that we came up with I’ll walk through
this a little bit and show you some of the screens that we like I really liked how this screen laid it out it’s super clean I love the icons on the left it adds a little bit of breathing room to something that’s usually more text Heavy I really like how this screen which I think is craft groups the search results I like the filtering at the top for this app I really like how Airbnb uses cards to break things up here I really like how the search results are highlighted in this app a lot of really good options and all of this stuff comes from mobin so once we had the mood board done and we found a bunch of directions that we wanted to go cilia started working on a couple prototypes while I spent some time porting over the functionality from
a technical standpoint this was super easy I’m using a service called typ sense and that’s with powering the search on the web and desktop version so I was able to take a lot of the code there a lot of the backend and the apis just throw it onto the iOS version so that took about like 2 to 3 hours to Port over and by the time I was done porting this over and didn’t look good but it was functioning she had the prototypes ready to go so the first prototype was this concept where the results are inside of a card and the card looked really cool once I physically saw it here mocked up I realized it kind of added some unnecessary depth to the app usually depth is is added to highlight or
Elevate something for example if we added depth to the search bar it would make that more prominent in the UI but in this case the depth being added to the search results didn’t really add anything in my opinion so I know we got this inspiration from this mockup from Airbnb but it makes a lot more sense for them because they have this map in the background so they kind of want to show this and let things float over it but since we just have a white screen in the back and we don’t really have anything behind it it felt a little bit unnecessary so we decided to not go with that option so another concept was grouping the results by type so if the matches are from the task title they’d
be grouped here if they’re from the notes they’ll be grouped here that made a lot of sense and from a UI perspective it really did feel like this would make the design a little bit more clean but one of the issues with this when we thought about it a little more is the way that my backend and type sense which is the service I’m using for search they return the results and it’s ranked by relevancy so the order actually matters if we group things I realize it would actually impact that order let me show you guys an example in the ungroup version it could appear as the second result however in the grouped version it appears as result number four so because there would be an actual impact on functionality tried not to go with the
grouping option either and the last concept that we tried was a more traditional search list that you see in a bunch of different other apps it is a little bit more boring compared to the first two but I felt like it had the best ux out of all the three options and probably a reason why a ton of other apps do it this way too so between the three prototypes this is the one we felt like was the best option and we went for the next step which was implementing the Prototype so I can use it on a real device with real data so once I implemented designs I started noticing a few things so the first thing was I completely forgot to implement the ability to search by subtask I don’t even support the functionality yet on
the desktop version but rather than implement it for now which I realized would be actually a bigger technical lift than I anticipated decided just completely remove that functionality from the designs so for now users can just search through task title and the notes there were a few side effects that came from this we did have the filtering at the top so you can choose to only search by task title or only search by subtask but now that we remove subtask and there’s really only two things to filter on I noticed in my usage I wasn’t using the filtering at the top anymore so I decided to just remove that for now I think I will read it once I do bring back subtask searching but for now just
removing it cuz I felt like it wasn’t that helpful something good that did come out of it though by accident was I noticed that for the empty State when there are no results displayed the screen did look a little bit unbalanced with the filtering at the top by removing that I felt like this empty state did look a little bit more balance so that was a pretty good side effect that came from removing those filtering chips the next thing I noticed was the icons on the left side which indicated what type of match the result hads for example this one showed there’s a match on the note there’s a match on the subtask it was really good in theory but when I was using it it didn’t seem that
helpful I was kind of just ignoring the icons every time I ran a search so we decided to cut it because my philosophy is if something isn’t adding to the experience it’s best to just remove it so it reduces cognitive load on the users but then removing it the design felt super text heavy and I really loved how in these mockups there are icons on the left because it does break up the text a little bit and make it a little bit more breathable so we did try to brainstorm something to replace those icons luckily we realized we forgot to add the complete and incomplete indicators on the task like the literal checkbox that shows that a task was
complete maybe we can just put those there and when we tried that I actually feel like the ux improved a little bit because it made searching for incomplete task a little bit easier it’s just easier to scan and see oh these ones are incomplete so that was an unintended side effect that came out of that where I feel like the ux actually improved for some reason we just didn’t think about doing this in the original design so that was a pretty cool thing that happened so on that note of looking for things to cut and simplifying the UI I was trying to look for more things that weren’t that necessary for me or I was ignoring and one of the things I noticed is there’s a couple of indicators on the
task that I didn’t feel like were relevant during the search process one example is this indicator on the task shows how much time was spent on the task this is really relevant on certain screens like the task list screen as I was searching and I was trying to put myself in the user shoes I felt like that task indicator wasn’t that relevant to the search so for now we cut all the indicators except for label subtask and Note and I feel like that would cover most of what people are going to be looking for when conducting a search if people ask to bring back the indicators I’ll reconsider it but for now we cut it just to keep things simple the next thing I noticed was the highlighting was
pretty good where it bolds the text and makes it The Color Purple which is the primary color of the app but I felt like it could be a little stronger and maybe there was a way to make this a little bit more scannable so I remember seeing this example on the mood board and I really liked how they do highlighting I felt like my eyes could more quickly scan for highlights in this version so we tried a couple variations of this here were two more variations we came up with between the three options we were really torn on which one to choose so decided to throw a quick poll on Twitter to see which one people preferred and I want you to pause the video and try to figure out which one you think won the poll
so the one that won was the one with the yellow background I can’t definitively say why that won the pull but I think people just associate yellow with highlighting so maybe it was a little bit easier to scan but regardless because people chose this and we were already 50/50 on this one we decided to roll with the yellow highlighting so these are the major things but there were a couple of minor things and I wanted to point a couple of them out just to show you guys what level of detail we were going here so one thing was playing with the height and size of the search box trying to figure out what shade of gray the dividers between each of the results would be not covered in the figma but what haptics we should add
here there’s a little vibration or haptic when you clear the search box or when you click on a search result a little tweak where when the user navigates to the search page the keyboard automatically opens up and it looks really different from the original prototype that we started out with all of these things all of these iterations they contributed from going from this to this I hope this was interesting to see a little bit more behind the scenes of my design process huge shout out to Cecilia for helping me with this one I’ll leave a link to her portfolio if you want to go check that out if you like this kind of content check out my Instagram and Tik Tok I post almost every other about building productivity
apps and obviously if you like this content don’t forget to subscribe but thank you guys so much for watching and I’ll see you guys in the next video [Music]