The Reveal!

We finally get a walkthrough of Colleen's image management service in this special audio-and-video episode.

See Colleen's product! Video at


Michele Hansen  0:00 
We're doing something a little bit different. Colleen's product is ready to have a little walkthrough of it. So this will be the first time I'm seeing it. So we're doing something different. This week's episode is going to be a podcast as normal, but it is also going to be a video. So you can see what Colleen's product looks like. So hopefully this is just as enjoyable as whether you're listening to the podcast, or you're watching the video, we'll put a link to the YouTube video in the shownotes. Definitely let us know what you think of the format. And hopefully, it's interesting. 

Colleen Schnettler  0:49  
Okay, this is great. I'm super pumped to show you this. Michele, I'm going to share my screen with you so you can see it. Alright, can you see my screen? Yes. All right. So let's start from what the very beginning kind of what I'm trying to accomplish here. So this window right here that says new listing details, let's say this is your existing user interface. So your user is adding listings for I don't know, an event or a real estate site or something like that. So what you a typical kind of quick, easy implementation is just your typical HTML file tag, which is what you have right here. Now, I have found this to be like, really ugly, and I just don't care for it the way it looks. And plus, even if you're importing a file, this way, you still are responsible for setting up your cloud storage account, as we've talked about ad infinitum I know, but basically, you still have to get all the other back end stuff set up. So what you do is you would go to Heroku, you'd provision my application, and then you'd sign on to my application. And I would give you this script, like so basically, and I have not finished or like really worked out the documentation yet. But basically, I'm going to have a site, like once you've signed up for my application that says, Put this script in the head of your file of your website. So then you add this script to your site, save it, I'm running this locally, so we could see the changes kind of as they're happening. And now you get something like this. So Oh, thanks.

Michele Hansen  2:29  
Well, there's a drop file.

Colleen Schnettler  2:31  
Now there's a drop file, boxy

Michele Hansen  2:33  
way of having, right.

Colleen Schnettler  2:35  
So and I think one of the things that's really important here is I think, Heroku, I could be wrong, but like, it's mostly like Node and Rails developers. So there's people that are more focused on the back end. So anything I can do to make the UI less painful for you, is what I want to do. So So I worked for an events company at one time, so we had to deal with tons of images. And we implemented a drop zone like this, but we had so many problems with users trying to drop files that were too big files of the incorrect, you know, format, things like that. So what this does for you is if I wanted to drop some images, so if I try to drop a file, right now, I want to say I have a two Meg limit. And I'm probably going to change that I haven't worked out that detail yet. Let's say I have a two Meg limit. So if you try to drop a file that's bigger than two Meg's you're going to get this exe. And it's going to tell you the files too big. And then it's going to remove the file from the drop zone. So your user can drop a new file.

Michele Hansen  3:36  

Colleen Schnettler  3:38  
okay. So I mean, even that I have a lot of like thoughts about like, right now you drop it, you and it's a timeout, like, I don't know if I should wait and let the user exit out. Or, you know how

Unknown Speaker  3:51  

Michele Hansen  3:52  
quick I didn't get to fully read read it the text until the second time. You did it, because you

Colleen Schnettler  3:59  
need to look for it the second time. Yeah, I

Michele Hansen  4:02  
didn't really know what was going to happen. But I knew there was some errors. So yeah, I would probably try to upload it twice just to see what that error was.

Colleen Schnettler  4:13  
Okay, that's good feedback. And again, I can slow it down. I mean, maybe I should slow it down a little bit.

Michele Hansen  4:20  
I also wonder about accessibility for that.

Colleen Schnettler  4:24  
Right. That is an excellent point. I will look into that, because that's definitely something I need to address. That's a really good point. So that's kind of what I have now. And those are two good comments for a bad file. But what I really have gone back and forth, and left and right about is what about a good file. So let's drop a good file in here. And so there's all kinds of things I can do here and I'm probably just overthinking it, but like how opinion Am I going to be like that little green checkmark? Should that stay? Should I go? Should I keep the reason I kept I went back and forth on keeping this dashed blue line. And the reason I kept it was to show you if you change your mind, you can just drop a new file in there, right? You can,

Michele Hansen  5:18  
yeah. And I guess, to me, a dashed line around the image implies that it's in a draft state and that they need to do something else in order for that to be saved.

Colleen Schnettler  5:29  
Okay, that is what you think. Okay. Yeah, cuz I went back and forth on that. Like, should I read, because what I had originally, is I actually removed the drop zone and just put the image on the page. But when I removed the job zone, I then had to add a button so that they could bring the drop zone back up. So it started to get more complicated.

Michele Hansen  5:53  
And I noticed that it shows the file size, even when the file size is an acceptable size. Yes, you walk me through why that is?

Colleen Schnettler  6:03  
I think that's partially like, you know, when I started this, I was just trying to kind of keep track. So I would know immediately, like, Oh, this one is one fits, this one doesn't fit. But I, you know, have no strong opinions about whether that's helpful or whether the user even cares, which probably they don't care, right. They just want to know if it's successful or not.

Michele Hansen  6:28  
Yeah, I, I would be curious to I mean, maybe there are people who get value out of that, maybe I won't discount that.

Colleen Schnettler  6:36  
So I was showing this to a friend of mine. And he has a few apps on Heroku. And he suggested accepting other file types. Because his point was, if you have a really image heavy site, you're probably already using one of the big players in the image, site market. But there's a huge problem with like, if you want to email someone a PDF, or, you know, you're collecting resumes, or all the other kinds of file types that people might want to upload. So that kind of gets interesting, because then I was thinking, Okay, let's say we want I have a PDF here for my children's school, welcome newsletter. So if I try to drop a PDF, that works, but I don't ever have any kind of preview image. So you think that I mean, should I just leave it like that? You have thoughts on that?

Michele Hansen  7:24  
Is there some sort of icon you can use for the image or file type like,

Colleen Schnettler  7:30  
like a PDF icon? Yeah, that's a good idea. pdf. And maybe like, same thing for like a Word document or something like that.

Michele Hansen  7:42  
I, you can even just have an icon that just represents a document in general.

Colleen Schnettler  7:47  
That's way easier. So this is what I'm talking about. I like it, simplify one.

Michele Hansen  7:51  
One, I upload something that isn't a document, like an Excel file, or

Colleen Schnettler  7:58  
Well, I'm not. That's what I got to decide to. And maybe I don't, I'm not at the point now where I really need to, to, like, specify that. But I can just touch like, this is

Michele Hansen  8:10  
really where you listen to your early users, right? So like, yeah, somebody who starts using it. And, you know, somebody sends you a support email and says, Hey, I love this, but I really need it to support Excel files, like Can you do that for me? Thanks. And what I would do, when that happens, is saying, thanks so much for reaching out. Can you tell me more about why you need Excel files? And like, how does this fit into your process? And like, what you're currently trying to use and why it doesn't work, and really drill into what their use case is. And it could turn out that somebody with weird file types that you haven't thought about, or I mean, Excel is not a weird file type, but it's not an image. Right. Right, um, that they could have a use case that is actually much more valuable to you as a business owner than something else. Yeah. I mean, it's a good sign that, you know, if you're getting feedback like that, I wouldn't necessarily need to say you need to support every single file type under the sun. When you launch. Yeah. Especially if that first hurdle is getting 10 users. So like, you know, find people who need images or you know, adding PDFs is something that someone has already expressed a need for. Then Then do that, but

Colleen Schnettler  9:29  
Okay, yeah, no, that's, that's great. In a way,

Michele Hansen  9:32  
yes. add things to the pile before launching,

Colleen Schnettler  9:35  
right. And this is, you know, I think I even tweeted about it, like, I feel like that is that is part of this journey is trying to just decrease the scope, decrease the scope, like just get something you can get out there. And then if people use it, see what they have to say about it. Okay, so I want to show you something else. I've gone back and forth on a lot. And I actually had this different than I changed it. Okay, So let's say you have an image great. Woman in pink dress.

Michele Hansen  10:06  
Okay, so what is going to ask you what happens if you try to save it without naming it?

Colleen Schnettler  10:13  
Well, that would depend, I mean it so the image is still going to save. So this would be that would be dependent on the clients on the client's back end, like, I don't have anything to do with that, all I'm doing, what I'm really doing is I'm just replacing your file input with this drop zone. And your image, if it uploads, like it gets, it gets saved. So even if it's, there's like a failure on the client side, the image will still exist, so they can still save the image, even if they don't have a name for it. Like I don't, I don't have any requirements that you have a name for, because I'm keeping track of the name for it

Michele Hansen  10:49  
like mine, you're just using their file name. Yeah. Okay.

Colleen Schnettler  10:52  
So this is something I wanted to show you, let's say that you go in, you have this in your form, your user drops an image, it's good. And they create, okay?

So little slow, because I'm running it locally. Okay, so let's say this is, so this would all happen. This is pretend this, this site we're looking at is a user's website, right. So they can choose whether to show the image here or not. Now, if you go into edit it, look what happens. So I went back and forth on whether to send the image in here. And the reason I decided not to is because if the user wants to show the image, they can just add an image tag here with the image. Like I say, user, I need to I'm gonna use the term client to refer to the person putting this in their website. So let me show you this. So I can like make this more. So this is like, all you had before. Now, if you want it, you can add the image tag if you want. But that's something they would have to do in their HTML. That is not something I am doing for them. The reason I didn't is because I thought I didn't want to be that opinionated about what the image should look like. So let's say you want to show the user the image before they change it. But what if you want a bigger? What if you want a huge image right here? or what have you wanted smaller? So you have to add your own image tag? And what if it's a PDF document, you don't want to show anything? Because you don't have a preview for that? So this is all I'm providing right now.

Michele Hansen  12:38  
So are you providing this edit functionality? Or is this just a functionality of the demo? No, you have created

Colleen Schnettler  12:46  
this is just let me show you something. So, um, let's just like, I just want to show kind of show you what I'm talking about. So let's say you upload an image. Alright. So what's happening is your image is getting put to, you know, put behind a CDN, and I just give you a URL. So you, and by you, I mean, you're my client, you are responsible for saving that URL on your listing associated with this listing ID. So I am not providing like any of the Edit functionality, literally, all I do is I find your file field input, and I replace it with the drop zone. And then I take the URL, and I put it in the value. So you can save it in your form like usual. But I'm not providing like extra, like, so if you came in here, like I said, so this is the thing. Okay, I'm looking at my listing, I hit Edit before, this was a file field. And so I'm just replacing that file field with my widget, and I'm just accepting whatever you drop.

Michele Hansen  13:57  
And so there is no one can say there would be like, they can show the image, right? Like the client can decide to show the image to the user and have that functionality instead be replace,

Colleen Schnettler  14:10  
right? So the user, the user can choose to show the image, but they would have to put it because it's not button activated. They would have to like, it's it's kind of not great, because they would have to like put the image here and drop a new image here. I have no way right now of showing the image in the existing drop zone.

Michele Hansen  14:35  
I guess I wouldn't expect to see an image in a drop zone because a drop zone is an empty vessel. And as long as you know, the client, I guess that's the person who is using your service as long as they have the ability to show the file themselves.

Colleen Schnettler  14:59  
Yes, which they Do

Michele Hansen  15:00  
its storing the file, right? Yeah, yeah. You know, they can recall the file. Like they can design whatever UI they want. But like thinking about drop zones we have on geocode do. Like none of them have any content in them. Like they're designed to just be some somewhere that you

Colleen Schnettler  15:19  
drop a files. Okay? Yes, that's kind of what I've been going back and forth on is how opinionated should I be? And I kind of came to that same conclusion plus, like I said, that gives them more control over the size of everything and the aspect ratio and whatever else they want, whatever else they care about. But yeah, so they would show the image like right here, or they could show it wherever they wanted. And then you could just have an update image. It's not button activated, because I didn't want it to be button activated. But it's another thing that I was like, Should I add that functionality? So you can open it with a button? Or should I just show it?

Michele Hansen  15:58  
What do you mean by open it with a button. So

Colleen Schnettler  16:00  
instead of having a drop zone here, I think in my first time, I just had a button that said, upload file, and that then populated the drop zone here?

Michele Hansen  16:11  
Oh, so it opened up the person's file is sitting on their computer, and then they have to search for it. Rather than dragging something in?

Colleen Schnettler  16:19  
Well, no, it like there was a button here. And you clicked it. And then it put this here. Instead of starting with it here, like because right now it loads. The drop zone is already there. When it loads instead of most of the widgets do a thing where like, you have to click a button. But I don't like my users don't like I don't know

Michele Hansen  16:39  
why you would put another step in between. But I guess I do wonder about people who aren't familiar with drop zones.

Colleen Schnettler  16:50  
But you can still click here. Like I just shortened the language. Yeah, I mean, you don't have to drop it. It should as I say that, yeah, you should just be able to click it. And it'll open your local file system. There you go. So yeah, so that's kind of where I am with all of that. I mean, you know, so much of it is opinionated, like, what does it look like you What if you don't like the color, I go back and forth, so many times between allowing them because they could theoretically specify all of that. But I'm trying not to get ahead of myself and give them right now they have zero configuration options, just because that makes their integration super easy, right. And I think I call it a calling it simple file upload. So let's not give you 100 options.

Michele Hansen  17:38  
I think at this point, allowing them to change colors is not an essential feature, like the ability to change the colors on the widget, maybe important to some clients or you know, really to the clients, clients who, as I mean, people who have both dealt with clients, we know that clients can be very opinionated about colors, and especially the matching branding and everything else, right. But is that a feature that will prevent you from launching to 10 users now and determine whether people find the functionality of the service? And ultimately, the time savings? and frustration savings of the service valuable? Does the ability to customize color impact that? I don't

Colleen Schnettler  18:29  
think so? When so I was trying to think back to like, what are the most frustrating things for me with this process that I'm taking away from you. dropzone, some callbacks, like errors, checking for all those errors. That's kind of always been a pain and getting the you're getting a UI that you like, with with error checking. And then again, like this, in this way, you don't have to set up the cloud storage, you don't have to set up the CDN. Like that's all already provided for you out of the box.

Michele Hansen  18:58  
Can your customers specify what the maximum file sizes like? I can let have a reason.

Colleen Schnettler  19:05  
I mean, I can let them I thought about that. I don't think I'm going to do that now because I want to keep it small because you know, I'm happy to say that

Michele Hansen  19:14  

Colleen Schnettler  19:18  
but I mean they could theoretically yeah I guess I'm just stuck in all these like loops of like, should I do this? Should I do this? And like I kind of just I kind of want you to tell me it's fine just the way it is. What do you think fine, just the way it is?

Michele Hansen  19:33  
No, um, no. So like, let's go through those things. Okay. Now, right that like you said, You've been going back and forth on the the ability to replace the images it but it sounds It sounds like you have a you know, a strong reason why the image should not populate in the drop zone. You talked about the error messages and kind of going back and forth on on that, and maybe there's a little bit needs to be done there. And and I would probably say the accessibility just think that at least looking into that should be should should be checked before you launch. Okay, um, what else is an outstanding? going back and forth on it item at this point?

Colleen Schnettler  20:24  
Do I need to allow them to have more than one on a page?

Michele Hansen  20:30  
I think that's something you could ask them?

Colleen Schnettler  20:34  
Well, I don't have any of them yet. because no one's using my theoretical balance. I mean, I could just the problem is net, what would happen now I like,

Michele Hansen  20:45  
couldn't they?

Colleen Schnettler  20:46  
They can I just have, it's actually not a huge deal for me to do it. I just have not implemented that yet. I mean, that's not even a ton of work.

Michele Hansen  20:54  
on it, I guess I'm wondering like, why, like, what is the scenario where they would have multiple on one page?

Colleen Schnettler  21:00  
Oh, so I have a client that does that. And they do it because they allow. They allow their users to upload multiple images, but they have it set up. So they can like upload an image here and give it a caption, and then an image here, they have like five of these things next to each other, whether that's a good UI, or not as a different question. But um, so they, they haven't like, you upload one, and then there's like a box here. And so you're right, you know, your caption, then you upload another one, and you write your caption, then you upload another one, and you write your caption.

Michele Hansen  21:34  
So one of the fundamental jobs of this service from a sort of job span perspective, is to reduce your frustration when dealing with your clients. And you saying, oh, one of my clients has an experience where people need to be able to upload multiple ones on the same page. And it doesn't totally make sense. But they want that, and it's how it's set up. That to me says that's something you should add, because that goes for your core reason for creating the service.

Colleen Schnettler  22:09  
Yeah, that's an excellent point. Yeah, I'm excited to actually get to use it myself.

Michele Hansen  22:20  
It's gonna be so great. And that'll give you so much motivation to like, keep going.

Colleen Schnettler  22:25  
Yeah. Yeah, I think so. I absolutely think so because I continue to refine it. As I said, like, even if I'm the only one using it, like, it makes me happy. And, you know, since I'm using it, I can continue to refine it. As as I go forward, and kind of figure out what what I need to do and what I want to do.

Michele Hansen  22:44  
So what else is kind of outstanding? You're trying to think about or stands in the way of you watching at this point?

Colleen Schnettler  22:51  
Um, let's see. I mean, nothing really, I got my AWS budget set up. So AWS isn't going to screw me over. And and

Michele Hansen  23:08  
how did you budget?

Colleen Schnettler  23:10  
Ah, well, I applied for one of their Are you starting a new business grants? And if I get it, it should be like $1,000 towards AWS services? So that would be helpful. I don't know. I guess I should be more worried about it. But it's like a What is that thing? It's like a Lamborghini problem. And like, I don't have any Lamborghinis. Right. My problems are small. I have like Toyota Camry problems. Like, I just want someone to use it. They're like, Oh, when you get 100,000, you know, when you get thousands of customers, and I'm like, that's great. Like, I just don't know if that's anywhere in my future. So I'm not worried about it yet.

Michele Hansen  23:49  
As someone said to me once worried about success when it happens,

Colleen Schnettler  23:52  
right? That's how I feel like I put enough thanks to, you know, to some kind people in some AWS research, I put enough stopgaps in place that if something goes rogue, like, I can handle it, and I did a couple things up front that enabled me like I'm using a custom domain so I can switch off of AWS if I have to down the road. But like, I, you know, I'm not, I'm not worried about it. I'm worried about this first step. And this first step is 10 people pretending to use it, you know,

Michele Hansen  24:21  
so towards that first step, I noticed that the partner portal in Heroku is open in your tabs. shez. Is there a reason why that's there? I mean,

Colleen Schnettler  24:33  
it's there. Look, no add ons. Bam. It's there, man. Like I could Oh, right. Yeah. Yeah. So I could theoretically like get my 10 people today. I mean, I could get my 10 people today. I mean, it's there it works. Um, so yeah, so it's already there. I've already done the integration. As I told you last week, I was going to my goal was to get that integration done. So I got the integration done by Yeah, like I've done the what is stopping me really like I need to look into accessibility are 100%? Correct. But no I can. I don't want to get my 10 people until it works cuz I get maybe five seconds of their attention. So if they try to install it and something goes wrong, then I lose their attention

Michele Hansen  25:18  
to what we were talking about last week, I think it's worth remembering that in a professional context where if there's somebody who has similar frustrations as you, they might be willing to send you a support email and say, Hey, I was really excited about this. I really wanted to use it. But I noticed that I went to install it and x happened, or I tried to use it in this case, and it didn't work. Like they will have motivation to use it in a way that if you're doing a consumer app, that's that is often not present.

Colleen Schnettler  25:57  
Yeah, right. You're saying yes.

Michele Hansen  26:00  
And, and so I think that's, like, we still have bugs that we're squashing like no fire? I don't

Colleen Schnettler  26:07  
believe you. Oh,

Unknown Speaker  26:13  

Colleen Schnettler  26:15  
No, I, I understand your point, like,

Michele Hansen  26:18  
the 4:30am. Phone calls we get from different, not too often.

Colleen Schnettler  26:25  
Oh, my goodness.

Michele Hansen  26:27  
Not right, like nothing is perfect. Like, that's how it is. But if you have built something that somebody needs, or they can see is going to reduce some frustration or friction for them. And it turns out that there's, you know, something is wrong with it, and you need a week to fix it, and you come back to them in a week, like, their process that annoys them still exists. Right? And you're not just making you know, something for consumers, that is entertainment, where I mean, we both been, that's a good point, you have them for five seconds. And then if you don't help them right away, they're gone. Gone. That is not this scenario, and that's something I love about being in b2b is that you are like creating things that are just making existing processes better or cheaper, or faster or less annoying. And and so that process exists, regardless of whether your product exists, or not. Right? Mm hmm. And, you know, of course, in you know, in consumer, they need to be entertained or whatnot. Like those things always exist, but they are filled in so many different ways. But right, if somebody is creating a product for a client, and they need these image uploads, and then they have some more frustrations as you then then I think they would be more willing to give you some time to fix it. That then you might be able to imagine,

Colleen Schnettler  28:00  
okay, I'm open to that. I like it. So I really think that like then there's no reason I can't start getting people like Monday. So I like doing weekly goals. I like doing weekly goals with you. Let's say by next Thursday, when we have our next podcast. I will try to have gotten those 10 people or at least be looking for them.

Michele Hansen  28:25  
You will be live in the

Unknown Speaker  28:29  

Colleen Schnettler  28:29  
Ah, that's so exciting. Yeah, that's super exciting. Yeah. All right. So that's my goal for this week. That's awesome.

Michele Hansen  28:39  
stuff will go wrong. But stuff will go right. Yeah. And the most important thing is reducing your frustration with this problem. Right? Right.

Colleen Schnettler  28:49  
Yeah, absolutely. That was the whole this was the whole reason.

Michele Hansen  28:53  
Even if you're the only user.

Colleen Schnettler  28:55  
Yeah. Awesome. Awesome. Well, thanks, Michele. I really enjoyed going through this with you. And I really appreciate your feedback.

Michele Hansen  29:05  
I love doing this. Like, I love workshopping with people. And you know, I always find that when I'm creating something. I don't ever really fully appreciate it or understand it or see all the issues with it until nobody else is looking at it. And you know, having a friend that you can do a tear down and then demo and everything with is. Yeah, it is just always so helpful.

Colleen Schnettler  29:31  
Yeah, awesome. Yeah.

Michele Hansen  29:34  
Okay, so listeners, we hope that you've enjoyed this little walkthrough of Colleen's simple file upload service, soon to be available on Heroku. And we hope you enjoy the video podcast component of it as well definitely. Let us know what you think.

Won't you join us?

Get an email when new episodes post. No spam, we promise!

Got it. You're on the list!
2020 Software Social