How I built and launched my first iOS app that helps you get better haircuts.
Intro —
Over the past 4 months, I’ve been working hard on building my first iOS app that I’m launching today. The app, called FreshCut, lets users save and show their favorite past haircuts so stylists can re-create them flawlessly.
I wanted to share my journey building this app to inspire others to start a side project and enjoy building something from the ground up.
I built FreshCut in three versions. In Version 1, my goal was to just build a functional app that I could test. For V2, I used feedback to make functional improvements and build a more useful app. In V3, I focused on the design to create a beautiful looking mobile app. After finishing the app, I designed and built a landing page as I prepared to launch FreshCut.
Along the way, I had to learn how to use several new tools. I learned how to code iOS apps from scratch, create designs in Sketch, and build websites using Webflow.
This project was definitely tough time-wise since I had to work mostly on weeknights and weekends due to having a full time job, but it was absolutely worth it. Looking back, I was surprised by how much I learned and accomplished in a short few months.
This project made me realize that I really underestimated how much I could achieve by spending a bit of my free time everyday making progress towards a goal. I hope my story inspires others to learn new things and have fun doing it too!
0 — Brief backstory: why I started this project 👶
I’ve been working for a consulting firm in the San Francisco Bay Area for the last 1.5 years now (at the time of this writing). During this past year, I became so inspired by various product teams I worked with that I sought to build and launch a product of my own.
My goal was to learn more about the process involved in creating and launching a software product from start to end. I studied Computer Science and Math in undergrad and built a few small software projects before, but I had never built + launched a full mobile app to the public.
Around that time, my friend/mentor Max Deutsch (former Product Manager at Intuit) was piloting a 1-on-1 mentoring program and I signed up. Conveniently, Max had experience building and launching tons of products, so I asked if we could center my learning around building + launching my own product from the ground up. Max has helped my journey tremendously by recommending resources, guiding my next steps, and providing invaluable feedback the whole way. (Since then, Max has recently launched a full-scale mentoring platform for mentors and mentees so check it out at OpenMindLearning.com!)
Inspired and driven, I started my project by first deciding what “problem” I wanted to build a solution for.
1 — Version 1 (V1): the first functional prototype
1.1: The problem to solve ❌
The problem I decided to solve was a personal pain I experienced before— “It’s difficult to communicate a past haircut you’ve gotten to your hairstylist.”
Like some people, I try to get roughly the same haircut every time. But whenever hairstylists used to ask me, “So how do you want your haircut today?”, I never had a great response. I would point to my head and say something like, “Um… Can you cut it like this… but shorter?” That definitely wasn’t very helpful.
Because of my inability to communicate my haircut well, I would end up getting slightly and sometimes widely different haircuts every time.
One day after a haircut, I asked the stylist, “Hey I really like this haircut, how can I explain this to the next stylist so I can get the same cut?” She smiled, scribbled down a quick description of my haircut, and said “Next time, give them this.”
That was the start of my “haircut profile”. From there, I improved my “haircut profile” by getting haircuts with different stylists and asking them each time how I could better communicate my haircut for the next time. After a few haircuts, I found what worked best for me was this — showing the stylist a short description of my haircut, plus a few pictures of my head right after I got my ideal haircut, taken by my previous stylist.
Since then, I’ve had pretty consistent and satisfactory haircuts no matter where I went. I felt like I finally found a good “formula” for my haircut I could show my stylist without having to say or memorize anything.
But that’s where I started thinking, “Could other people benefit from this?”
1.2: Validating the problem 🔍
Before I dove into thinking of a solution, I spent some time “validating” the problem — It’s difficult to communicate a past haircut you’ve gotten to your hairstylist.
I wanted to make sure I could confidently answer “yes” to these questions:
- Is this a problem that other people might have?
- Can I provide a helpful enough solution to this problem?
I spoke to several friends who agreed this was definitely a problem they’ve experienced before. I also found several online articles addressing this issue. This comment on a Reddit post titled — “What do you ask for at the barbershop usually?” sums up the issue in a funny way.
At this point, my rough idea of the app was this:
- “Haircut Manager App” — Once a user got a haircut he/she liked, the app would guide the user through a series of steps (including pictures) to create a “haircut profile”. Once created, the profile could easily be shown to any hair stylist to get the perfect haircut you wanted, every time.
After some more research, I was confident enough to start thinking about what to build for my first prototype — V1.
1.3: Deciding what to build first 🔧
There were so many directions I could’ve taken the first version, but I had to stay focused on my immediate goal — building the minimum set of core features needed to solve the problem.
As a starting point, I used Balsamiq, a wireframing software, to turn my ideas into wireframes.
Creating these wireframes helped expose the areas I needed to think about further.
From here, I made a list of big questions I wanted to answer, such as:
- What information do hairstylists want from customers for the ideal haircut?
- What other information would users need to record?
To answer these, I needed to talk to specialists.
1.4: Talking to actual hairstylists 💈
To get answers, I went to talk to actual hairstylists and get their expertise. I was initially a bit nervous to just walk into a barbershop and start asking questions, but everyone was kind and the feedback was helpful.
Amongst other things, the hairstylists agreed that the “problem” I was trying to solve was something many customers indeed experienced. They helped me figure out the minimum set of information a customer could provide that would make it easiest for a stylist to replicate a certain past haircut.
The “haircut profile” I decided on was this:
- 3 pictures — (front / side / back) in great lighting, right after a haircut.
- A brief description of the haircut — in hair stylist jargon. Example: 2 inches off the top and sides, tapered on the back, etc.
Talking to hairstylists also gave me the confidence I needed to move on.
1.5: Dilemma: striking a balance 😵
One challenge I faced here was trying to cater for ALL the possible users who could use this app. I got caught in a mental tornado thinking about how I needed to cater each feature for every kind of user I could think of. What if a parent wanted to use it for their kids? What if someone wanted to name their haircut first? What if someone wanted to upload ten pictures instead of three?
However, Max gave me great advice here — “One thing I always think about when designing products: what’s the right balance between making the app accessible to as many different users possible and ensuring the optimal experience for each person? Both extremes are bad.”
This made sense. On one end, the app could be perfectly tailored for one person who would have the perfect experience, but no one else would find it useful. On the other end, I could build an app that solves the problem somewhat for any given person, but everyone’s experience wouldn’t be great. I had to find a good balance.
This also got me really thinking of the “value” of my app. I mean, why wouldn’t people just rather take some pictures on their phone and save it to an album like I did? Why not just carry around a small notecard scribbled with their haircut measurements in their wallet?
Because for some people, it’s easier if there’s an app that shows you what you need, how many pictures to take, and presents it neatly for you.
So I had to really focus on this question — “How can I make the process of creating a haircut profile super easy and quick for my users?”
Equipped with my wireframes, I moved on to start coding the app.
1.6: Building the App 🔧
To learn how to code iOS apps, I took an Udemy video course. The videos were really great and the instructor gave tons of small assignments for me to build up my confidence.
After the course, I began coding in Xcode (a set of developer tools by Apple, used to create iOS apps). This wasn’t easy since I had very little iOS coding experience, but having wireframes that showed me exactly what I needed to build made the process smoother. After continued persistence, I finished coding my first prototype.
As for the app name, I landed on “FreshCut”. I liked its simplicity and it portrayed what I wanted my users to get out of the app — a nice, fresh haircut.
I also bought a suitable domain name for my future landing page — FreshCut.co (FreshCut.com was already taken ☹).
I finished up V1 by making a quick logo with my sister’s help (she’s great with photoshop)and submitted it to the App Store. Shortly after, the app was approved and available to download!
At this point, the app indeed worked as expected, but I was still unsure about its usability. It was time to gather feedback.
2 — Version 2: functional improvements 🔩
2.1: Usability testing 💬
My next goal was to see if this version of the app actually worked with real users. Did users understand how the app worked? Could they easily use the main features?
I asked four friends if they were willing to test my app and answer questions for 30 minutes. I hoped this would expose gaps in my app that I would improve in the next version.
Before the interviews, I prepared by doing the following:
- Listed out my goals for this round of interviews.
- Drafted a clear list of questions I’d want to ask each user.
- Set up iPhone screen recording + video calling software I planned to user during the test.
After getting valuable feedback from all 4 users, I compiled my notes into one big list of issues. Now came the tough part.
2.2: Prioritizing feedback 📋
Seeing all the feedback I got in one big list was a bit overwhelming since I wanted to fix them all. But I had to stay focused, prioritize, and define a clear plan for what to build in V2. I had to be very selective with which potential improvements to pursue next. I had to really think not only about WHAT to build but also WHY I was building x over y.
My goal for V2 was this — Improve the app so users could use the two main features (create haircut + present haircut) effectively and easily.
Next, I prioritized the issues based on how much estimated impact solving each one would have. I also factored in my estimated difficulty of implementation for each issue. I was able to get so much good feedback, but only a handful were important enough to make it into V2.
After condensing the feedback, I realized there were still major obstacles that prevented users from easily using the two main features of the app.
The main issue was essentially this — Users were NOT sufficiently comfortable or confident in the app to engage with the hairstylist. However, this interaction was crucial for the app’s purpose, mainly for the pictures. It was best if the stylist took pictures of your hair right in the salon since the bright lighting in a salon was perfect for this purpose. Plus, users wouldn’t have to remember to add pictures later on themselves.
It was critical that users felt comfortable with asking their hairstylists to help. The app had to be very easy and quick to use.
The “Create a Haircut” process was the most confusing to users. They didn’t understand what to do at each step. They didn’t know when exactly that was was supposed to be used. Uploading pictures had too many steps. The on-boarding experience (when a user first opens the app) also proved to be confusing for users.
At the end of the day, no one wants to ask their hairstylist to help fill out information on their phone if the app itself is super confusing and unfriendly.
Looking back, the interviews were successful. It’s amazing how helpful a few user interviews can be. Equipped with fresh insights, it was time to build V2.
2.3: Building V2
I headed back to Balsamiq to sketch potential solutions for each issue. This step was difficult, since there were several different ways I could fix each problem.
One thing that helped me create the wireframes was drawing inspiration from “mobile design patterns” I found online. These are essentially libraries of mobile app screenshots, categorized by common functions like logins, searches, newsfeeds, etc.
As I browsed through different design patterns, it was tempting to start thinking about the aesthetics and colors of the app as well, but I had to stay focused on functionality first. I would work on the “looks” of the app in the next version.
After I finished the wireframes and got more feedback from friends, I built the improvements back in Xcode.
Next I was ready to focus on design. It was time to make my app look nice.
3 — Version 3: design improvements 🖌
3.1: Learning design + Sketch
For V3, I focused on improving FreshCut’s design with Sketch, a popular design software. After I took an online Udemy course to learn the basics and build a few practice projects, I was ready to start creating design mockups for V3.
The design process was a bit challenging for me, because:
- I wasn’t comfortable using Sketch yet.
- I had no idea how to structure my approach in creating designs from scratch.
- There was no “correct answer”. Since this was about the look and feel of the app, there wasn’t any definite criteria for completion, which made it difficult to know how I was doing.
The design process took some time, but eventually I was able to develop my own “framework” for creating designs:
- Find Inspiration: I dug around online and picked out a bunch of mobile app designs with visual styles that I liked.
- Create Initial Designs: I used the inspirational designs I found and picked out bits and pieces I liked to start re-designing each app screen from V2 in Sketch.
- Pick Color Scheme / Fonts: There were tons of great online tools to help pick a color scheme that works. I played around with coolors.co and found a palette I liked.
Once the designs were done, it was time to actually convert them into code.
3.2: Converting design to code ➡️
Implementing the designs in Xcode was a bit tricky since there aren’t many well-documented resources about this online. But, with the help of some YouTube videos, I managed to pull through without much problem.
Here are a few side-by-side comparisons from V2 to V3 below:
I also added a “loading screen”. It’s amazing how much nicer an app-opening experience feels when you add one of these.
After V3 was completed, I was almost ready to launch my app! But first, I wanted to test out the app personally one last time.
4 — Preparing for Launch 🚀
4.1: Testing the app in real life 💇
After getting V3 approved in the app store, I coincidentally needed a haircut. It was a perfect opportunity to try FreshCut again in the field and make sure it worked (at least for me).
The trial went smoothly. I showed my stylist the cut I wanted and she said it helped a lot. After the haircut, she helped me create a new haircut profile. She took pictures for me, described the measurements, and I was done! My haircut looked pretty good to me.
4.2: Pre-Launch: Building a landing page 📄
Before I launched my app, I needed a landing page. I was already one step ahead since I bought the domain “FreshCut.co”.
First, I needed to design the site. I was happy to see my time investment in Sketch pay off so soon. I followed my previous design process and quickly finished the mockups.
After that, I used Webflow (a designer-friendly website builder) to actually build the site. As with all the other new tools I had to learn to use, I invested a decent bit of time learning to use it. Webflow’s video tutorials were really helpful though and I managed to build the site with no major obstacles.
After the landing page was done, I spent a week writing this story, using my daily journal entries and project notes. I hope my story is helpful to others!
5 — A few lessons I learned
- Work on one thing at a time. At every step, I was tempted to start working on various aspects of the app at the same time. My mind would easily get overloaded from trying to balance several thoughts simultaneously, and I often had to stop myself and really think — “What’s the single important thing I should be working on right now?”
- Set deadlines for yourself. Without deadlines or a clear criteria for completion, it’s easy to get lost, find excuses, and slowly lose the momentum you worked hard to build up. Throughout this project, I learned to set deadlines for myself through each step to help me stay on track and keep moving forward.
- Stay confident and get uncomfortable. Don’t let your small fears get in the way of your progress. There were several times during my project where I was a bit afraid to move forward. It felt uncomfortable walking into a barbershop and telling them about my weird app idea. It was a bit tough to show my friends the early versions of FreshCut before I added design since they looked awful. But I stayed confident in the time and effort I put in, and kept moving forward.
6 — What’s next?
I felt like I learned so much building FreshCut and, more importantly, I had a lot of fun doing it.
What will I do next? For FreshCut, I’ll see what feedback I get from users and go from there. It might get popular, it might not. Even if it gets just 1 user, that’s okay. My goal was to learn and enjoy the process, and that’s just what I did. One thing know for sure is that I’ll be taking my lessons from FreshCut to build/launch another product. I’m not exactly sure what I’ll build, but whatever it may be, I know I’ll keep growing and improving every day as I continue my journey.
I hope my story inspires others to learn something new and pursue a project of their own. It can be anything you’re interested in. Don’t be afraid to step outside your comfort zone and try something new. With focus, grit, and a clear goal, I’m sure you’ll be surprised at what you can accomplish.
Thanks for reading! — Kai
To learn more about FreshCut, check out https://www.producthunt.com/posts/freshcut
To download the app, click here for the App Store.
If you enjoyed this and have any feedback or thoughts to share, please email me at kai@kaikuroda.com.
***Update (6/1/18)***
Thanks to everyone’s support, FreshCut was able to get “#5 Product of the Day” on ProductHunt with 15,000+ downloads in the first month!
