How a test became a side project over a weekend
I didn’t mean to, but I got carried away and now I want to see it through.
So what is it?
I work as a senior product designer for a large E-commerce company. We have a large range of products: apps, websites, internal systems etc.
The department I work for has introduced a concept called ‘Research Fridays”. At the end of our sprints, on every second Friday, we have these research days where we are free to spend the day on whatever we want, as long as it’s marginally relevant to our work.
Sadly, you can’t spend your day looking for the best pizza dough recipes.
I came to work on Friday with an idea of wanting to test an app I found called Details Pro.
It’s an app that allows you to build SwiftUI views using a visual builder. I figured it could be a useful tool to improve the collaboration between designers and developers.
A while back I was testing a similar tool called ‘Judo’ and made prototype of a crossfit WOD (workout of the day) in SwiftUI also. It worked fairly well, but the design was functional but not exciting.
I didn’t like that app design I made back then, so I figured I would redesign it in Figma and build the new design using Details Pro.
I came across these great illustrations from blush.design and really liked the Mexican-wrestler-colorful style they had, so I created my designs around them, making sure to keep the design simple so I could build it myself afterwards.
No need to make it harder on yourself than necessary, right?
I spent a few hours getting familiar with Details Pro, creating my pages and importing them into Xcode.
It was fairly straightforward. The code from Details Pro is very well organised and easy to edit.
I’ve been using Figma and it’s Autolayout feature for a long time in my work so building layouts in SwiftUI code is not that different. If you can build responsive layouts in Figma, then with a bit of practice you can create responsive layouts in SwiftUI as well.
After building a few pages in Details Pro, I ended up building the rest of the pages by hand in Xcode as I found it be much quicker.
Now what?
I would like to be able to click around it in and get a feel for how the design works, but I’m not good enough in SwiftUI yet so that I can build out the functionality myself.
I could do one of two things. Either spend hours looking through YouTube tutorials and blog posts and figured out how to do it myself or ask ChatGPT for help.
I’m very impatient, so I opted for ChatGPT.
I spent a few hours on Saturday and Sunday hacking the functionality together using ChatGPT and my MVP app is now almost ready to be released.
I still need to implement a few things, but I’m hoping to release the first version sometime this week.
I have a lot of ideas on how to monetise the app, but first I just want to release it and see if it gets any traction at all.
It’s amazing how much ChatGPT has enabled me to do in such a short amount of time. It’s crazy.
I also created a pick-a-winner-randomiser website using ChatGPT because I needed to figure out who should be allowed to go to a design conference in Barcelona next year. We all want to go and couldn’t get to an agreement, so I build this randomiser tool that picks two winners.
You can try it out here, if you’d like: https://codepen.io/froessell/pen/WNPGrge
Tune in next time for an update on this little app project and I’ll also tell you how I built a few custom plugins for Figma that saved our marketing department 100s of hours of work per year.
Thank you for reading.
Frederik Roessell
Creative designer with 20 years of design experience working in startups and agencies in Copenhagen. Currently pushing pixels as a Senior Product Designer at a large ecommerce brand.