Midnight Express is an "Uber-for-busses" service that offers late-night bus service from San Francisco to Silicon Valley. And get this: it was developed and launched in less than TEN DAYS by Bloc UX Design student Michael Horton.
Are you interested in launching your own business or website? Or maybe strengthening your UX Design skills with a mentor? Learn how by talking to Michael about his experience in a free, live Q&A!
- How Michael and his co-founder came up with the idea for Midnight Express and launched it.
- How the Bloc bootcamp helped get Midnight Express off the ground.
- Plus, ask your own questions about Michael's process and experience!
Check out the full transcript of our webinar below:
Hello everyone and thanks so much for tuning in to this live Course Report Q&A. My name is Liz Eggleston and I work on Course Report which is a resource for finding the coding boot camp that’s right for you. Like I say in all of our webinars, if you haven’t checked out Course Report yet, use our directory to find the school that fits your needs and check out our blogs for interviews with students, instructors and founders of boot camps around the world. You’ll also find application tips and tons of other valuable resources.
Today’s Q&A is a little bit different than some of our past ones. The story that we hear about a lot of boot camps is about career changers and people who do boot camps to get a new job and that’s awesome. But there are also plenty of people who are doing boot camps to become technical cofounders or to build their own websites or to launch their own startups. These are some of the most interesting boot camp graduates that I get to talk with.
Today we’re joined by Michael Horton. Michael started his career as a freelance video producer. He went to Clemson University, he studied communications and he’s had some pretty cool clients like Disney and Hearst and the San Francisco 49ers . But Michael wanted to learn a new digital skill set so he enrolled in Bloc’s UX design course and he actually launched a new startup with a cofounder, using those skills called at Bloc, called Midnight Express – and he did it in less than 10 days, which is mind-blowing.
We’re excited to chat with Michael about his experiences and to take your questions.
One other reminder is that we have a really great exclusive $200 scholarship to Bloc- take advantage of that!
Michael, thanks so much for being here. Tell us about what Midnight Express does.
Midnight Express is a way to solve a problem here in the Bay area. There’s a really big lack of late night transportation after public transportation closes around midnight, especially going from San Francisco to any of the surrounding cities and any of the areas going down towards Silicon Valley. There’s really no public transportation that runs past midnight. That was a problem that has been around for years and years and no one’s really solved it.
Midnight Express started off originally as a way to solve that problem by just running late night shuttles from San Francisco, making stops at key locations, heading down the peninsula all the way to San Jose going right through Silicon Valley. We’ve since changed and updated a little bit here and there. We’re crowdfunding buses to run late night transportation routes to help people find a safe way out of San Francisco down to Silicon Valley and hopefully expanding even further than that in the near future.
Awesome. If people want to follow along, the website is midnightexpress.io.
Who’s the team behind Midnight Express?
The team behind Midnight Express is just two people; myself and a good friend of mine who I’ve worked on projects with in the past. He’s a little bit of a serial entrepreneur. He’s done a few things here and there but this is the first thing we’ve gone in completely together on. He has some background in development so it helped to have somewhat of a technical guy in the team but his background is more in programming algorithms to deal with big data and things like that. It’s not really in building or design so that was left up to me. It was a really good experience to use my new design skills and front end skills from Bloc to create this project.
Had you built a site like Midnight Express before or was this the first time really diving in to a full project like that?
Only in projects with Bloc. At the time that I started the Midnight Express site, I was in the last third of my UX design program so all my experience was just things that I had built at Bloc.
Did you have the idea for Midnight Express before you started at Bloc or was it something you came up with during the class?
The idea was one that grew over time. Like I said, this was a problem that we had run into so many times, myself and my co-founder Cory. We live down here in the southern part of Silicon Valley. It’s about an hour from where we live to get up to San Francisco. There’s a train that runs during the day so we would take the train into the city and at night we would have to leave by 11:30 to make sure we catch that last train home or we’re stuck. There are really no other options. It’s too far to Uber or Lyft or anything like that.
It’s a problem that we had thought about long before I had started Bloc but we hadn’t really had the idea of solving it on our own until it just came about one night while we were in the city and we were facing that issue. We were at dinner with some friends discussing this problem and we all started talking about ways that we could solve it, and it all snowballed from there. That was a couple of months ago when I was in the middle of my program at Bloc.
How did you know that it was worth investing time, effort and potentially money into this project and really taking it to the next level?
The main thing was that we knew the demand was there. We knew this was a need that lots of people were facing. That was mainly from being in this area and talking to people. We knew lots of our friends that would use this service. We knew that the demand was there; then it just came down to researching and figuring out how much it would cost to do these things.
We went out and handed out fliers, talked to people at the Caltrain stations at all the different stops along the way in Silicon Valley like Palo Alto and San Jose. We just got out there and figured people would be interested in this service, and the response was really good. We realized that it was something worth putting a little bit of money into and a little bit of time.
The great thing about this project was that it wasn’t something that took a lot to get going. It took a lot of time and effort but it didn’t take a lot of money to start it up and that’s what helped us in the beginning. We knew that we could find out from the start without spending too much money – especially since we had all the skills we needed to build the website and all that already – we could figure out pretty quickly without spending too much money whether this was something people were going to be interested in.
What did you spend money on? Was it just marketing?
The biggest cost is getting the buses because we don’t own our own buses; so chartering buses to run those late night routes was the biggest cost.
What technologies did you use to build the site? Like I said earlier, people can follow along and look at Midnight Express.IO to see the actual site that we’re talking about.
The site itself was built pretty quickly. I ended up staying up one night and just turning the whole thing around. I did all the design work in Illustrator and Photoshop, like all the icons you see on the site and the logo; I built all of those with Adobe Illustrator then the background images, the layout design and all that I built with Photoshop because at that time I wasn’t familiar with Sketch.
What is Sketch?
Sketch is another software that web designers will use – a newer software so it’s kind of replacing Photoshop a lot in the current web design market. Whereas Photoshop is built more for photo editing, Sketch is actually built to design websites. It the direction a lot of people are going now and I ended up using that on some later projects in Bloc.
So I was using Photoshop, Illustrator; the site itself was built with HTML, CSS and it was pretty straightforward from there. We got our domain name from ‘Godaddy’ and just took off.
That’s awesome. There are a few terms that beginners may not be familiar with in UX design. A couple of those are wireframes and user flows. Can you tell us what a wireframe is and if you created one for Midnight Express can you show it to us?
For Midnight Express I did create a wireframe. I can go ahead and pull that up for you guys. I created what would be your first go at a wireframe for Midnight Express since I turned it around so quickly and that was just a sketched out wire frame that I did on graph paper that you can see here. I sketched a wireframe and then I did the design in Photoshop and just took it from there. I didn’t create a wireframe using Axure which I did with a lot of my other Bloc projects to create a more professional and finished wire frame.
This was my wireframe for the site; you can see what the site looks like. It’s pretty different to how the site looks right now but it’s got the same idea. It’s actually very similar to what the original site looked like when I first made. It’s got all the same sections.
Basically, getting the wireframe down on paper is your first attempt at getting everything out there of what sections you want where, what the basic layout of your site is going to be. This probably has a lot more detail than a lot of wireframes in that I actually put some wording in there and everything. I didn’t create a user flow for this site.
Can you just take us through what a user flow entails?
The user flow is basically a diagram that shows how a new user coming to your site or web application would navigate through it, going from login to what they would click on and what they would see next. It would be a diagram showing what screens they would be seeing as they flow through your site.
Did you decide that Midnight Express wouldn’t need that user flow?
Midnight Express mainly is a one-page site so in terms of a user flow it wouldn’t be too detailed. It’s basically all right here on this first page. It would be just entering the site and scrolling down then using Tilt as third party service to actually sign up for the bus.
Tell us about the relationship with Tilt and how people use Tilt.
Tilt is a crowdfunding site, in some ways similar to Kickstarter but what makes Tilt a little different is you can set minimums – that’s called the Tilt amount – and unless you hit that minimum amount, the bus or whatever campaign you’re running doesn’t tilt and nobody that doesn’t sign up is charged. So we have a minimum amount of donations that we need to hit for each bus then once we hit that we reserve the bus and people can continue to donate and sign up. But if we don’t hit that minimum amount, nobody gets charged and the bus just will not run for whatever night or whatever route.
We use Tilt the same way anybody else can use it. We just sign up for an account, create our campaigns and they give us a little bit of code that we can embed in our site to get little widgets. As you can see we have our Friday night bus up there right now that people just get directed to from our website.
It’s awesome to see the wire frame and how it changed. It became a really cool-looking site; that’s neat. Can you tell us about a couple of UX issues you ran into while you were creating Midnight Express – if you ran into any – and how you resolved those?
I would say I ran into a few issues creating the Midnight Express site. A lot of it was just from my inexperience. Probably the main issue for me was creating the site in a way that it was responsive, so that it would look good both on your desktop and when people would pull it up on their mobile phone because that was really important to us. We knew that people would be wanting to reserve their seats and read about Midnight Express while they were either on the train or out in the city and we wanted them to be able to sign up easily on their mobile phone.
Making sure that it was responsive was one issue that I ran into. How I resolved it was just researching, talking to some people and figuring out how to do it. I don’t think I mentioned when I was talking about building the site, I used Skeleton as the framework, which is an open source framework you can download, similar to Bootstrap but it’s a little simpler and doesn’t offer as much as Bootstrap does. It’s pretty easy to make things responsive with Skeleton once you figure it out.
We went back and forth, Cory and I on things like whether we should have this button right here, how we should lay out the sections, which section is most important and the hierarchy, how high up should we have the ticket section, the call to action to sign up for our email list. Things like that we went back and forth on and we tried to figure out a few different things to figure out what worked best.
Was Cory your mentor or your partner at Bloc?
Cory was my co-founder but I also worked on the site with my mentor from Bloc as well. He gave me his input so that was really helpful as well.
Was your mentor helpful specifically to this project once you started on Midnight Express and had the idea? Did you all get to focus a lot of time on it?
I created Midnight Express during a project and then I worked on it throughout the last few weeks of my course with Bloc. My mentor gave me his feedback on it and was able to help me out when we ran into specific issues.
I want you to share your screen again because I want to talk about the branding for Midnight Express because it’s awesome; it looks great and fun. Can you tell us how you created the logo and how you approached the branding and what programs you used and what your thought process was like for that?
Creating the branding, coming up with the general look and feel of it, the way it started was just discussing what we wanted it to feel like and what we wanted it to look like; how we wanted it to come across to people that viewed the site and from there, I went and did my research. I looked at other sites that would give me inspiration to get an idea of what I wanted things like the logo to look like, the general layout of the site.
Did you choose the colors for any particular reason? I think it’s cool because it kind of looks like midnight, the purple.
I went back and forth on a lot of different colors before I landed on these ones. I had the dark purple in mind, as you just said to kind of look like midnight and give that feel. I went back and forth on a lot of different shades before I landed on this one.
You can see my screen now. This is my working style guide, I would say; this is in Adobe Illustrator. This is where I build all of my icons and you can see a bunch of icons here. These aren’t even on the site anymore or used for social and things like that. This is where I built the logo, the icons the background images. I have my colors that I used up there, the fonts that I use on the site and for other social pages and things like that.
Generally what I do is I’ll find things that I like or that inspire me then I’ll bring them all into Illustrator, look at them then start building something that I want in here. That’s what I did with the logo. The logo that we have now wasn’t built originally as a logo; it was just built as a little image for the site then I liked it better than our initial logo so I just used it.
You can see what one of these in progress looks like. This is one I’m working on right now, some art boards I’m using right now for my portfolio site. Midnight Express looked more like this when it was still in the working phase before I settled on specific colors and icons. You can see different colors that I’m trying out with different parts.
That’s what I do; I just build everything, try out different things, different colors then decide what I like best.
When you were showing the website, you could see that there was a great press section. How did you all market Midnight Express? It looks like you all got some really good press. Was that all luck or did you have a marketing spend?
The way that we went about it was just being really aggressive in both reaching out to people and getting out them ourselves and talking to people. Initially what we did was made up some fliers for Midnight Express explaining a little bit what it was and when it was going to run, when we were launching. We went out to the places we felt we would hit our target market, and that was mainly the people that were taking the Caltrain into the city.
So we would go to all the different Caltrain stations, we would hand out our fliers, we would talk to people.
That was getting a really good response but we knew that we needed to get into some local media as well to really get the exposure we wanted. I went about that by first reaching out to any local bloggers, people that had a pretty good Twitter following or had a lot of subscribers to their blogs – especially people that talked about nightlife or transportation; just sent them a little message telling them about this new service that could be interesting to their readers.
A couple of people mentioned us or wrote little blogs about us and once we had a few people talking about us, we were able to get some of the bigger media outlets to write a piece on us.
The first one that wrote a piece on us was The Bold Italic and they have a pretty big following here in the Bay area; it’s an online magazine. They wrote a nice little article on us and it just got so much traction that it really took off from there in terms of other media outlets wanting to talk to us. We were actually on KTVU, which is our local station.
We were on their morning broadcast without even knowing it. They ran a piece on us and put the website on their morning news and people were like, “Oh, we saw you on TV in the morning, that’s how we found out about you” and we were like, “What? We didn’t even know we were on TV.” So it kind of all snowballed once we had one good press that gave us some coverage. It just all took off from there.
Have you grown as you expected? Do you have the user base that you wanted when you started?
We definitely had more of an initial bump when we first came out when everybody was talking about it. Our growth has leveled some but it’s still continuing to go up, just not at the rate that it did at the very beginning. We’re still growing every day. We’re still getting some news coverage, too; people are still talking about us. We just had an article the other day in the Los Altos Town Crier. The local newspapers are writing articles about us and we’re still getting new users every day.
Do you have plans to expand? Are there other markets that you think Midnight Express would work in? What would that require from a technology or marketing perspective?
The initial plans to expand would be just adding more routes locally here, heading out of San Francisco in different directions. Right now we just have the route going from San Francisco down into Silicon Valley all the way to San Jose. But we’ve also gotten a lot of people asking for a route heading east, which would be going to Oakland or Berkeley.
So our initial plan would be to add more routes and times here in the Bay area; maybe in the more distant future adding in other markets in other cities that face the same issues.
In terms of technology, we definitely want to eventually turn this into a mobile application. That would be the next step in terms of the technology side of it. I’ve already started working on the designs for that so we just have to keep working on that and take it to the next step.
I want to ask you a little bit about your experience with Bloc as well because you made this while you were doing the Bloc class. You spent the first part of your career as a freelance video producer and Bloc offers between 7 to 10 different courses; what made you want to take a UX design course specifically as opposed to a web development course?
I spent a while researching what I wanted to move into before I decided on UX design. I decided that I wanted to do UX design before I knew about Bloc. It was then just a matter of finding the best route to teach myself or be taught UX design most efficiently.
Moving from video production to UX design, I always was interested in it and I always dabbled in Photoshop and did design as a hobby on the side, little things like photo editing. Not really UX design but more like building graphics and editing photos. I did that a little bit for jobs in the past as well.
When I was researching and figuring out what I wanted to do next, I came into UX design and it seemed like a great mixture of all the things I liked to do; a little bit of business, a little bit of marketing, understanding the psychology of the user.
Bloc just seemed like the best option to me because I was able to continue doing my freelance work, which I needed to do to continue to bring in money. I could schedule my time in a way that I could do Bloc remotely from my house and do my UX work at the same time.
Did you look at other offline boot camps or other online boot camps and why did you decide on Bloc specifically? What stood out to you about it?
Like I said, I did a lot of research into how I could learn UX design. I looked at both bootcamps that were in person, online; I even was researching what kinds of certificate programs that local universities were offering – they weren’t necessarily UX design but there was a lot of digital courses I could take.
With Bloc, one of the main things was that I could continue to do my freelance video work and do the UX work. I guess the main thing that made me decide Bloc over some of the other online boot camps like Thinkful, for example, was being able to choose my mentor, which was something that was really important to me. At the time I was looking at it, Thinkful didn’t allow you to choose your mentor but Bloc did.
So you could look at the portfolio of mentors and choose which one?
Yeah. That was really important to me because I wanted to choose a mentor that really matched up with both my personality and that I thought we would get along well, and one that was doing something similar to what I wanted to do. UX is an area where the experts come from a very different background. Some of them may be graphic design background, some of them may be from a programming background.
My mentor that I ended up choosing is a UX and UI freelancer and he also does a lot of illustration work which matched up really well with what I wanted to do. I wanted to learn UX completely but I also wanted to touch on UI. I wanted to get some work with graphics and building logos and all that stuff. That was the tipping point for me in deciding between the two.
It’s a really good point that UX and UI and really, any of these topics are so huge so it’s nice that you got to narrow it down to someone that would fit your skill set and develop the skill set that you wanted.
So who was your mentor? Who did you end up choosing?
My mentor is a guy named Mike Decker. He’s a freelance UX/UI designer living in Australia but he’s from the Netherlands. It ended up being a great relationship. He does a lot of the things that I want to do and we got along really great too; we had similar personalities, liked to do a lot of the same stuff outside of work as well.
What would happen in a typical mentor session? Did you all do it over Google Hangouts or were you using a different program?
I did the 18-week course so that meant that we would meet for 30 minutes twice a week on Skype. Our general meeting would usually start off just talking about what we were doing that weekend; we would just be chit-chatting for a little bit then we would get into what work I had done since our last meeting, reviewing my work. We would do a lot of screen sharing where he would show me what he was working on and how it relates to my projects or I would show him mine and ask him any questions I had.
Then we would go over what the next step was that we would like to get done or the next meeting. During the week, we would communicate a lot through email, just sending messages back and forth or through the Bloc website. I would ask him any questions that I had during the week before our next meeting.
Since Mike was in Australia, were there ever any time zone issues or did it work out?
We set up our Skype meetings in a way that worked for both of us. Sometimes I would send him an email in the middle of the night so it would take him a while to get back to me but our Skype meetings were on a set schedule every Tuesday and Thursday; it was the afternoon for me and the morning of the next day for him so it worked out. And he travelled a lot so part of the time he was actually in New York.
Bloc also has this 4-week job prep class. Are you doing that now?
Yes. I’m actually in my second week of the 4-week job prep section right now.
What do you do in that job prep course?
I’m working with a different mentor, a guy named Chris Courtney. He’s another UX mentor at Bloc. We’re really focusing on the beginning phase of the job prep, narrowing down what types of jobs I would be interested in because like we mentioned earlier, UX is a really broad area so there’s job titles: Project designer, UX designer, UI designer, visual designer and what those all mean, how they differ and which ones would interest me and best fit my skills.
Then we go into refining both my portfolio and my resume, getting everything ready for an employer. The next phase we’re going to get into is actually practicing what I would do in phone interviews and in person interviews and doing mock interviews to help prepare
How many hours a week do you spend on that?
I spend a couple of hours a day on it. It’s not as strenuous as the projects. Right now I’m working on building my portfolio site so that is pretty time-consuming, getting everything ready to go and making sure everything looks good and actually doing all the coding work for that as well. That part of it is time-consuming but the other art of job prep isn’t too bad.
What is up next for you, Michael? Will you do Midnight Express full time? Do you think you’ll take on freelance UX projects or are you thinking about interviewing for a full time position?
Midnight Express, for now it’s just going to continue to be my side project that I’m working on. I definitely think it could get to a point where it’s showing enough growth and potential that I could take it on full time. But right now, I’m going to continue working on that on the side. Since I already had a freelance network, I’m offering some UX and UI services out there now and talking to some people about picking up a few freelance projects to just get some more experience under my belt and have some more things for my portfolio.
I do think I’m going to start applying to positions once I’m done with this job prep section because I would like to spend a couple of years getting some experience in the field.
Do you think you’ll start phasing out the video freelancing or do you think that will still be a part of your skill set?
I’m not sure yet. I do think I’m going to start phasing it out but it is something I enjoy so I’d like to keep it around. It depends somewhat on the type of work I’m offered. If I get a position where they want me to do some video work, I can do that. I think having both of them is definitely a benefit. Being able to do both those things is something that’s going to help me.
It sounds like you have a ton of options going forward. Do you think the Bloc mentorship was worth the time, money and effort that you put into it over the last few months?
I would definitely say it was worth it, it terms of time and money. The skills that I learned from Bloc are really extremely valuable in the job market right now. UX design especially is huge in this area. That alone, being able to get a job that’s in demand and pays well and is something that I enjoy doing is definitely worth it to me.
It was great to see your process in designing Midnight Express and how Bloc and the mentors factored into that. We really appreciate you joining us, Michael.
Thanks to everyone else who’s joined is for this live Q&A. If you all have more questions for Michael about Bloc or Midnight Express or his process there. I’ll send out contact information after this. If you have any questions about Course Report, don’t hesitate to reach out to me. I will also send out the recording of this webinar and information about the exclusive $200 scholarship to Bloc so check your inboxes for that and you can share it with your friends who may have missed the live Q&A.
Visit Coursereport.com and sign up for our email list; you’ll get all of our updates on future webinars and interviews and you can tweet us and tell us which school or topic you’d like to see on the next live Q&A.