Building a better mobile app

designing mobile apps? Sure. Glide's a no code tool that allows businesses to create custom software. When we think of apps that we use every day, the code is essential to make them function. But apps, companies, are hugely differentiated by their ability to execute on design. And when we started Glide, we just were aware of this imbalance.

We saw so many well implemented pieces of software that just lacked the design component. Rid the world of ugly software. No more ugly software. Life's too short. What tips do you have high level for what makes up a well designed mobile app? Well, the first tip is you want to stick to the standards of the platform that you're running on.

Another important consideration is, like, the context in which your users use your app. You wanna think about physically like what is the environment the person is in? How are they moving? Are they holding their phone? Are they walking? Are they watching a movie? After those two, it's basically just all the normal background design principles. Is the text legible?

Enough contrast? You know, the basics. So I'm really excited to dig into these apps and see how well they execute on design. Alright. So first up, have Pearls, which is a modern medical reference app for healthcare providers. Pearls. I think that's how you say it. That's the first design that we're considering is the design of the name.

Piece of advice, writing is design. The words that make up your app and even the name of the app is part of the design. So it's hard to think of a name with the domain that's available. We'll get over pearls, but it did cause us to second guess ourselves. Cool. Alright, so right out of the gate,.

we're in the app. It looks like we got a bunch of different cards here. This looks like it's going with this paradigm of having lots of different sections going down the page. Okay.

It's very easy to scroll. Let's get that Pearl CTA at the bottom middle. That seems like the most important thing on the screen. What does that do? Don't know. It's a Pearl Way. It's a mystery. Search.

Okay. So we're searching drugs. This is an app for searching drug information.

One thing that I'm noticing is there's a lot of little screenshots in each of these cards Yeah. Which are too small for me to actually figure out what's happening here. Everything feels small in this UI. That's right. What happens if we.

tap on one of these? Let's see. So it did it did use the native navigation. Yep. Pushing into the detail page, that's nice. And you can see in this list everything is thumb sized. On mobile, everything should be nicely tappable with your thumb, which means it usually needs to be larger than 60 pixels square. You can see there's kind of a violation of that on the star rating control at the bottom.

Yeah. That's a little bit itty bitty for your fingers. Yeah, my thumb covers the entire thing when I put it over it, so it's kind of hard to tell where you're tapping. Okay.

Okay so we're in a guidelines database. Yeah. Okay we can expand these. So that actually wasn't obvious to me that this would expand in In line, can expand but it's fine I understand what happened. Yep. Usually you'd see disclosure triangle like a little down arrow or right side arrow or something like that to reference the fact that it would expand. The animation is also,.

it happened quickly but it does animate. That's another thing. Animation, when you need to change the shape of something or the content on the screen, animation can help people follow the thread of what's happening instead of doing a hard cut. Yep. Okay. So we're into a database, different links.

Overall, I'm feeling if I'm in healthcare and I'm using this app, I'm feeling I'm using something that's contemporary. Yeah. And smooth. This is appealing to me. If this is a reference app, they're probably trying to look up some information to answer a question. All right. So let's look at the standard dosage of Okay. Finasteride.

Yeah. Okay. Is that right? Yeah. The search brought it right to the top. Oh look, spelled it wrong and it still found it. That's really, that's a great feature. Great usability and it's got the search in line in real time.

Yeah. Which is actually really helpful because otherwise I would have spelled it wrong. I would have hit the button, it would have told me no results. So right out of the gate, I can figure it out. Okay.

So we have a very novel interaction right here. There's kind of like a information map. Mhmm. This is a custom feature. It looks like it's kind of optimized for quickly tapping and reachable by your thumb. That's a that's a risky thing to do. It's nonstandard.

But why don't we just click on general? I'm not sure what's gonna happen when I tap on any of these.

Okay. We just have the main indications, pharmacology, etcetera. This is quite nice.

There's a lot of good information here. Okay. And then we have more resources. It opens the web browser in line, which is great, rather than taking you outside of the app. Cool. Alright. I go back. It takes me into the search.

Well, overall, I think this is great. I think, you know, there's maybe a few things that they could do here to make these more legible at this overview dashboard screen, but it seems like this is a very thought out app. I think it's It raises.

the bar on what people in this industry usually have access to from my passing familiarity with it. I think it's a it's a great design. It's a engaging app.

Thank you, Perles. This is great. Next up, we have Blue Dot, which is an app to find, pay, and access EV charging stations. So let's check it out. So we launched right to a map showing where we are and the nearby charging stations.

So points for.

interaction design. Yeah. If I'm looking to find EV charging stations, then you get me right to the moment,.

the thing that I'm looking for right out of the gate. So well done. So with I guess we're driving around right now in our EV. Yep. We've got a ranging anxiety. The battery is showing red, 6%.

Where are we charging? Where are we charging? Let's find the ones that are closest. Let's go right near us here. Okay. That was busy.

Too busy? Alright. I wish we had known that before we tapped on the icon. If only there was a way for them to show that. Pick another random one of these icons. And this one is also busy. Okay. Let's just get out of this neighborhood.

Maybe it's a busy time. Busy. Busy. Okay. Let's pause this. Let's pause this So two things. One, it'd be nice to know which ones are available Yep. On the map.

This might cause someone to leave the app and not return if they tap on seven things and they don't get anywhere. But I think it'd be interesting. We could critique the visual design of this app. I would recommend some more care in the color selection. Also, the name of the app has the word blue in it, but the logo looks green.

So I would recommend if you're going to put a color name in your company's name or your product's name, your main color for your brand should probably be that color and not a different one. Yep. So maybe change these, icons to reflect the availability, and I would also even just remove the logo. I don't think you need your company's logo on your main screen.

You've already got the customer in the door. Yep. That's a great point. Yeah. Otherwise, we're left here just tapping oh, we found one. Okay, one of two Okay, what do we do next? Can we expand this little panel? Oh, there we go.

That was a subtle interaction. Once you learn it, it's fine, but it was a bit subtle. Yeah, I think, you know, start charging or.

I don't know. I I'm not sure what the next thing we need is. Like, we need to map it or do we need do we wanna pay start charging? Whatever it is though, it was missing actually a call to action right here until I expanded it. I'd like a button to navigate there. Yeah. So I can't see next step. Yep.

Like navigate. Yep. And so, okay. So if I'm gonna route to there and so they're taking me out of the app. So this is probably an advanced feature that may take some time to build. To the extent they can keep this in the app, then I think it would actually help them a lot. If you're an early stage company,.

you probably don't wanna implement in app navigation yet. So good call, but it is nice. Yeah.

Okay. So.

Another color point. You can see again the sort of basic colors that are used here. Start charging. It's very clear that that's the main CTA, but it's using the same color as the route button, which is a little bit confusing. If route is the secondary action on the screen, I might give it a neutral gray color. Yep. Again, you don't want to get too caught up with colors.

They're kind of the icing on the design cake, but they're a quick win. Yep.

Okay. Well, guess one of the important things to think about here is like what is the next step that somebody wants to take, right? So like we're looking to charge, we found one that's available, great. So now we go in here. Next step is we're probably gonna wanna map to it if we're not familiar with where exactly we're going or where exactly it's located. So we'll route it.

The flow now is we're going to another app, and so once I get there, then I think I gotta come back into the app to then hit the charge like start charging button in order to actually start charging. So that's a little bit of a complicated flow.

I would say maybe Blue Dot has done this. But just getting in the car with one potential customer and putting your app on their phone and mounting it on their dashboard and just running through the situation would reveal a lot of these small things that you could do to improve.

So if you are building a mobile app, just get it into users' hands as quickly as possible and ask them to use it and just write down where they trip up. Yep. Overall, it's a nice interaction to quickly jump in and find stations nearby. We'd love to see which ones are more available than others. And a little bit of user testing and some color theory could go a long way to make this app really shine.

Awesome. Thank you, Blue Dot. It's great. Alright. Next app we're gonna take a look at is Duffel, which is quick snack delivery for college students on college campuses. So let's check it out. Alright. What are we seeing here, David?

Well, I'm hungry and I need some quick snacks because I'm a college student. You've come to the right place. I'm very busy. The design is a little bit.

eccentric. It's very orange. It's it's got a lot of orange, which is fine. The the pictures of the food, a little small. If you're gonna do just a two column layout and you're showing hungry people sugar and carbohydrates that they can buy, you wanna make them a little bit bigger. The the plus, it's of just getting lost in the composition, but it's a it looks like a fun app.

There's this weird sidebar down the side with emoji.

It looks like it's quick access. If I need a a kiwi or a a ramen, I can just get it in one tap. It's kind of exciting. Yeah. I've never really seen a UI like this with like, I've seen it with the letters, right, like in the contacts app where it has all the letters that you can quickly scroll to. I haven't really seen that as a.

as images before. There's a strange loading indicator. Oh, we missed it that time. It was sort of shimmering effect. Yeah. Yeah. Yeah. That's that's a bit unusual.

It's a bit it's a bit kooky. That can make sense. It depends who the app is for. If your app is for college students who are slamming Red Bulls and working all night, you can totally get away with a more eccentric and fun design.

This is interesting because these sections seem pretty long. You have to scroll pretty far which I guess is why they added this UI on the right hand side to be able to quickly get somewhere.

Let's get two Red Bulls and two Ramens and a Swedish Fish. Okay.

I am not sure. Okay. Drinks. There's a lot of drinks in here.

Maybe I should serve. There's a Red Bull on the side. Come on, there's a shortcut for that. It's gotta be here somewhere. Okay. This ties back to an earlier point. If you have a call to action Got it. That shows a preview of some content, like the food that you're about to order, when you tap on that, you really want the user to see the thing they just tapped on.

It's very disorienting to to tap on something to get it and not get it.

Alright. I'm doing the plus on Red Bull. Okay. And what else what else were you looking for? One more Red Bull. One more Red Bull. And then let's just get Swedish Fish. Swedish Fish.

I don't see a picture of Swedish Okay. Gotta search a We gotta search. Okay. Swedish Fish. There we go. Add it to bag. Alright. We'll add it to our bag here.

That took a little bit and there wasn't a confirmation it was added, so I'm unclear if it was actually added to our bag. Okay. We have three items though, so I think we're good. Alright. View bag. You'll rank up to duffel Okay. Gamification. I like that we're getting some some rewards here.

And here we go. How it works. Order duffel, rank up, find hidden duffel cache.

Here's a a subtle point that we can make about design. The secondary text for these is way too light. Yep. You want more contrast. It doesn't hurt to make the text more legible. Make it darker.

Now it's taking me to start playing, which I'm a little worried about because I was about to give them some money. Now I'm about to go down a rabbit hole of playing a game. So let's hit start playing. Okay. Just takes me back. So maybe that's just a weird CTA. It should just be like closed. It's a bit strange.

Or got it or something like that. Okay. So we got our items, promo code, subtotal, your total could be. Why? Another game of Okay. Duffle pass. Now you're upselling me duffle pass.

So I imagine as a customer, I'd wanna complete one successful duffel order first before I get involved in rewards programs. So that's something you have to balance, like incentivizing people to go deeper into the gamification and just making them successful for the first time. I think we're hitting a few too many interaction roadblocks.

Yeah. Here we were. We were ready to buy our three things and we keep getting distracted on these side quests of other things that are taking us away from giving them money. You also have to know your user. If you have distracted,.

hungry college students, you gotta make it even more obvious.

That's a great point. Yeah. You mentioned this earlier around the context that these apps are gonna be used is really important. Yeah. And that was a great point with Blue Dot earlier that they should go and watch people actually use it. If they have not Right. I would assume they have. Same goes for Duffel.

Alright. So what high level feedback do we have for Duffel here?

I think you wanna simplify the interface a little bit. I think we had some trouble navigating this very innovative emoji quick link sidebar. Usually I see those as, a few standard categories at the top. Yep. Like at Airbnb, say, do you wanna stay at beaches or in the mountains? Here, energy drinks, chips, candy, you know, what are the what are the core categories? Distill that down.

And I would just make the interface a little bit more regular.

I I actually had some anxiety when you were like, we're gonna get two Red Bulls and Swedish Fish. And I was kinda like, oh my gosh, there's so much going on here. How do I find that? And scrolling made me feel like I was gonna be scrolling forever to try to find it. So yes, I agree with that.

Simplifying, making the categories more obvious, and maybe making search more prominent too if people know exactly what they're looking for. Awesome. Thank you, Duffel. Next up, we have Bold Voice, which is Hollywood Coaches and AI feedback to improve your English. So let's take a look. Alright. Let's go through the onboarding on this one. It might be interesting to see.

I'm your accent coach, Eliza.

What's your name?

I am Erin.

Nice to meet you. And what's your native language? Since,.

this is for learning English, let's go ahead and pick Spanish as my native language. What is your motivation for starting your app? Yeah. Want to get this because how did you hear about Old I don't know. Like, just let me get into the thing. Facebook. Don't do market research right at the Oh, no. Okay.

Got a referral code. No. Next.

Alright. Now we're in. So probably half those steps could have been removed to get us in faster. It's really tempting to ask your users questions when they first sign up because that data is so valuable. But if you ask them too many, you're gonna lose them. Yeah. We are motivated users to get in here.

Okay. Let's see how your free trial works. Today, get full access. Day six, day seven subscription starts. Okay. Let's try it for free.

For our first lesson, we will cover the letter h. We're going letter by letter here.

Tap the next button to begin.

I am noticing a change in quality of the design from the onboarding to the actual app. So the onboarding was very clear. It was a little bit too long, but there were there was a big CTA on the screen. It was easy to interact with and the elements were really large. And now we have these kind of itty bitty elements.

I don't understand this multilingual icon to the left of this e s indicating that this is Spanish. I'm a Spanish speaker. You don't have to tell me that these words are Spanish. It's a little bit strange, the design here. Yep.

And I think the most important interaction on the screen is probably to hear the h sound, which we get to by pressing the audio icon, which again, it's a dark icon on a dark background. It's very subtle if that's the main interaction.

Yep. How does it know if we did well? Okay. Here we go. Now tap mic to In English,.

the h is pronounced like the Spanish jota. Say the word below and use the breathy sound.

Honey. Let's listen to that. Let's.

keep going. Very good. Okay.

Alright. So they're giving more examples. Okay. So it seems like the format is give an example of the sound, and then ask the person to say it. This little indicator is good because it's calling out what I should be touching. Let's try to not say the h sound and see what happens. Okay. Eight.

Ah.

Alright that's pretty good. Oh there's a, it has a book for you. There's some Alright,.

so it's teaching me something as I go Okay, the definition. Alright, there, so we've reached the end. 76%. What we did well, what we didn't do well. We can bookmark the one we want to come back to and practice later.

And we want a star. Great. This is more of a game than a business app or an ordering app. It's a custom design. It's kind of free form with special purpose elements. It is more challenging to design something like this. And I think that there's there's definitely a lot of room for polish and finesse, but we got the idea. We got through it.

Yeah. Yeah. We figured it out. And I think something that's interesting that I'm just noticing here is we're dropped on this For You homepage,.

which it probably would have been tempting to make our default start page when we first opened the app. And they actually made the choice to not do that and instead just get us right into a lesson, which I think is smart. I thought it was great. Bold voice. Thank you. Great job. Alright. Next up we have EdenCare, which manages group health care in Africa.

So let's take a look. Okay. Looks like a nice contemporary app.

I'm noticing that, I think again this might be a web app and it might not be native. What's the clue that gives it away for you? Well, the first thing for me, one was the launch sequence. So if you wanna show that again by quitting the app, we had a black screen and then a different screen. Mhmm. And then a loading and then again, asynchronous content load.

So we had like four loading There were four different transitions there. But then inside the app, the thing that tips me off, I don't believe in the native iOS toolbar at the bottom that you can have wrapping tab names. See how health and wellness is split across two lines? Yep. This is just a simple thing. Also, those icons are a little bit nonstandard and the strokes are too thin.

You want the names of the tabs in your app, which are the primary areas of interaction, to be simple short words. Health and wellness, I might just call that health. Find care, care. I also don't see why find care couldn't just all be on one line. Yeah. I think that there's a some sort of margin issue the distribution of That's that's another good point. Yep. But that's okay.

Your app doesn't have to be a native app. But sometimes it will cause you to make strange interaction choices that will frustrate people on mobile. Yep.

Okay, so let's see steps you took today. Okay, so it's like a step counter we got here at the top. Quick actions. It's also interesting if this is for finding a facility or booking teletherapy or booking telemedicine or whatever, that a step counter would even be the primary thing that you would want to show people. At least it's some data, it's interactive.

Let's, I think the primary thing that you do in this app is you find care. So let's go to the find care tab and let's get some care. Okay.

Find a medical practitioner. Okay.

So it loaded some suggestions. Is that what just happened? It looks like it. Okay.

NBC coming up. And it just gives me an address. I'm not sure what I'm supposed to do with that. And the trading hours, which I assume means the hours that they're open, do not appear to be correct. Very brief. Okay.

I think the find care section of this app is work in progress, so maybe we could try a different interaction. Let's go back to home. Should we book telemedicine? Yeah.

I think my high level reaction to this and the tab that we were on previously is a lot of this just feels like a text dump. It feels like things were just kind of thrown in there without too much thought or care. And it's a little overwhelming with all the text that we have in here. So far I would characterize this app as a website.

masquerading as an app. Yeah. Kind of a It does feel like It's information dense, there's search, there's useful information about getting care, but the actual interactions to do these things are only described. Yep. They're not actually available to us. Usually in a mobile app, have special functionality you can't accomplish easily on a website, like having your own profile and signing in.

It's obviously a continuum. There are websites that have more features than mobile apps and mobile apps that have fewer features than websites. But usually if your app is just about content and doesn't have very many interactions, it's often better off as a website. Yep.

And one of the benefits here, you know, with a mobile app is you can get somebody's location. So you can show them maybe hospitals that are near them if they need to go somewhere. Seems like maybe the focus here is on telemedicine, things like that. Helping people to take actions I think is ultimately the goal of the app. And this feels a little bit more like a brochure than an app I think.

Alright, let's go back. Is there anything we can do here? Book teletherapy. Okay, book. That's an interaction. Alright, let's say tomorrow. Let's pick a time.

Like we're losing some taps. So you wanna make sure that anything that users are tapping in your app responds immediately. And just to take extra care, responding after a second is almost as bad as not responding at all. Okay. Seems like this is work in progress. I like the concept. It's a little bit, needs some more actions available to the user. Yeah.

Seems like a super valuable product,.

but maybe spending more time watching somebody actually use it and go through with it, you may find that there's more actions they can embed directly in the app here to make it even easier for people to get the care they need. Alright. Great. Thank you, Eden Care. I appreciate it. Thank you. Alright. That does it for this episode.

David, thank you so much for joining us. It was awesome having you. Cheers. And thank you to all the founders who submitted your apps for review. Help us out by letting us know in the comments if there were any tips or reviews that you found useful. It'll definitely help us shape future reviews, that we film here. Alright. Thanks for watching, and we'll see you on the next design review.