UI OH MY is a design resource that compares iPhone and Android app screens side by side, organized by tags and by app.
As a mobile designer, there were many times I'd find myself looking for inspiration in other apps. And as a designer who is constantly thinking of multiple platforms, I try to design for many devices. Oftentimes when I would look for inspiration in an iPhone app, I'd be curious to know what that same app looked like on Android. What was the same, what was different and why? The huge pain point was manually screenshotting each app and keeping track of multiple images in a Google doc. It was very inefficient, and not scalable. That's where the idea for UI OH MY came from, was from a need to have a pattern repertory that showed an iPhone app screen next to an Android app screen. Gone were the days where I had to copy paste screenshots to a Google doc, with UI OH MY images are saved together, tagged, and available for everyone to use.
How did I build it?
I started out with a vague idea of what I wanted to create… a site that compares iPhone and Android screens...ok but how do I begin? I researched best database practices for storing TONS of images, and consulted a dev expert. Deducing that the images should instead be stored on an ftp and their paths stored in a database, to help the callbacks stay fast. Don’t want a slow site. Then I sketched out what it would look like to have tags associated to every upload, as well as multiple tags associated with a single upload. Getting tricky.
The hardest part about building this site was the tagging system. I wanted to upload a new set of images, with their appname, image paths, and date to one database table as well as have another table for just tags. After a lot of sketching it out and thinking I created a third table that would house only the uploaded id and create a new row with a tag id for each selected tag. This let me be able to assign multiple tags at once! After the database system was figured out it came down to design. What did I want to show, and where?
Sketch for initial concept
Sketches of beginning structure exploration
Design phase 1
Design phase 2
In a span of about 3 weeks UI OH MY was developed and released into the wild. I wanted to get feedback from users as fast as possible, so I didn’t spend too much time on the design, and instead launched the site, tweaking as needed. Not too long after it was featured on Product Hunt, Web Designer News, UX Design Weekly, Hacking UI, with mentions on Reddit and Twitter. This site was really taking off! I was so thrilled with the feedback from the community, and the community was providing some valuable insights for improvements! Now was the time for me to take a better look at the design, what was working and what was confusing to users. To get answers on this I used Hotjar, a tool that records user behaviors, where I learned a few things. For example, users were clicking a lot on the images themselves, did they want to go to that app's page? To resolve this I made the app name under the images look more like a clickable link, and when clicking the images I enlarged them with the thought that maybe users wanted to see the images in more detail. After these changes I saw a higher click through to app pages! It was valuable learning about iterating designs based on real user feedback.
Product Hunt feature