One of the first things I started after becoming a designer was to start collecting inspiration. I would download new apps everyday and constantly screenshot interesting features and flows. This was back in the day when the iPhone had released just a few years ago and apps had skeuomorphic elements.
I loved coming across an app with a leather texture, taking a screenshot and then figuring out how to make my leather ‘more real’ in Photoshop. Same with brushed metal and lighting effects.
Then iOS 7 happened and all apps moved to flat design. I still continued taking screenshots and filling up my camera roll with more screenshots than photographs. I often used sites like Dribbble to find design inspiration. Over time however, I discovered that there were a couple problems with this approach.
Screenshots work for UI but not for UX
Collecting static screens leaves out nuances like its context in the overall flow, entry and exit transitions, animations and microinteractions. As apps became more flatter and smartphones got more powerful, apps got smoother and started to rely on animations to create captivating user experiences.
“If you’re a designer, please learn motion design skills. At 60fps there’s 58 frames you need to design between Mock A and Mock B” — Paul Stamatiou
The best apps don’t just have good visual design, but take you from A to B in the best way possible. As designers, we perceive apps as clean sequences of screens in Sketch. But to real users, apps are a continuous space where elements appear, information is conveyed and tasks are done with efficiency and often with delight.
Finding stuff in your camera roll is near impossible
As you can tell from the above screenshots, my camera roll at any point has a mix of photographs, screenshots and memes. Over time it gets harder to reference an app that I’d taken screenshots of. I tried creating folders, using third party apps and even creating a tumblr but it didn’t have the most efficient structure.
If I ever needed to check out say, how Headspace did onboarding, I’d have to scroll through my camera roll all the way and hope to catch a glimpse of it.
Introducing, UI Sources
To solve this problem for myself, I started documenting apps as videos. Then, I started sharing these videos with my team. Eventually, I realised that the best way to document these for later, is to put them up for everyone to see. Thus, UI Sources was born.
I began designing and developing UI Sources sometime in June/July. Within a month, I had a pretty good functional site that I started sending out to friends. This helped in early feedback and understanding how other designers research apps in their design process.
Then on July 30th, I submitted UI Sources to ProductHunt. I received some amazing feedback, over 100k page views, 1000+ upvotes and ended up as #2 product of the day. I’ve documented that whole process is a separate blog post, check it out here if you’re interested in the story!
So far, UI Sources has around ~500 interactions from apps I’ve admired and looked at for inspiration. There’s some interesting categories you might want to check out including Augmented Reality, Gamification, Onboarding, Microinteractions, Chat bots, In App Purchases and more.
Back in 2009, I watched the Social Network. A few months later, I enrolled in Computer Science at college so that I could build the next big thing. A year and a half later, I realized that college wasn’t going to teach me how to build great products.
I began to teach myself design — starting with posters and t-shirts. I also began freelancing online and several low value projects later, began to get app and website projects from all over the world. This was a few years after the first iPhone came out. I got the chance to work with aspiring entrepreneurs and designed a new app every other month for the next three years.
Eventually, I decided to work on something of my own. My co-founders and I built an app in a field we were passionate about — music. The app was a way to listen to music together in a chat room, just like sharing earphones. Over the period of a year, I went from designer to founder to growth hacker to a hundred different roles I had never done before. We eventually shut it down after realizing that cracking viral growth for a social app was one of the hardest things ever. Add music licensing to the mix and it becomes even more impossible.
Somewhere along the way I realized that I didn’t just want to be a designer all my life. Design was not the answer to building great products. It was a mix of having a great idea, executing on it really well, launching, finding distribution channels, getting the communication right, continuously iterating and a lot more.
I see design as the meta-skill that I can apply to every single thing I work on. Every user facing product needs design to communicate its value. Design might not be a deal breaker to most users, but can definitely give the product an unfair advantage. Some of the things I’ve done since learning design:
- Worked with over 60+ early stage founders in designing apps, websites and more
- Made a successful online course on motion in app design
- Run a music startup that I grew to to 8k users before shutting down
- Write a book on freelancing that was published by Bloomsbury
- Started a YouTube channel to teach design that now has over 6k+ subscribers
- Led the design team at a series D funded ed-tech startup with a few million users
- …and more! But that's for another blog post.
UI Sources is my current side project to build something in design – a field I know inside out, for users I understand. The goal is to build the most useful repository of mobile interactions. I also constantly receive recommendations from all of you and have an ever expanding spreadsheet of apps that I’m slowly working through. If you ever find an app you enjoy, be sure to drop me a tweet at @abnux or @uisources