The 7 Redesign Challenge
I challenged myself to redesign the same app every day for a week
Ideation is one of the core design skills I feel compelled to train as a designer. Being comfortable enough to iterate through multiple creative solutions to the same design problem can really boost the quality of UX/UI design work. I believe that only through generating a volume of potential options can a designer push solutions beyond “acceptable and satisfactory” to arrive at something “exceptional and unique.”
So when I had a week off of work for personal development, I challenged myself to ideate a new solution to the same problem every day. The brief I gave myself was to redesign an app that we use to get into the Fuzz office building, a tech installation lovingly named Igor. The app is extremely simple, and can only do a few things: unlock the front door, and raise or lower the gate.
To make it extra educational, I would use the opportunity to test out a variety of emerging UI design tools, including Principle, Flinto, Figma, Unity, and InVision Studio.
Sunday
Tools: Sketch, Principle
I kept the UI design minimal starting off, building black and white screens in Sketch and then importing the elements into Principle to animate the experience.
Because I’m a Principle newbie, the minimum goal I set was to simulate a force touch interaction, letting users access the main controls from the home screen.
Once I was satisfied, I continued to my reach goal of programming the transitions for unlocking the door (the primary user flow) and using the gate controls (the secondary user flow).
Animating the UI as I worked forced me to consider the timing as a core part of the user experience. A colleague recently recommended The UX in Motion Manifesto by Issara Willenskomer, which breaks down motion design into a set of 12 principles. Referencing the principles as I worked helped me think through how I was enhancing the usability with motion.
Monday
Tools: Figma, Principle
Since I have been seeing so much buzz around Figma I wanted to try it for myself. On creating an account there is a sample file provided with tutorials on the basic controls. Even though it’s a web app the performance is not bad, and everything feels intuitive: like a slower, less-powerful Sketch. The cool thing is the effortless version control, which basically works like a Google Doc, endlessly saving the version history. It seems like it has a lot of potential for team collaboration and I look forward to see how the product evolves.
After setting up a basic prototype within Figma, I hit a wall with the animation capabilities. Since I had a specific Material-Design flavor transition in mind, I took the designs into Principle for more elaboration. The Figma-to-Principle workflow wasn’t nearly as seamless as with Sketch, so I ended up having to reconstruct a lot of the elements natively.
I so badly want to advocate for Figma, but first they need to prove that they can support power users for demanding product design.
Tuesday
Tools: Flinto
Years ago I tested out Flinto when it was just a simple web app, but returning to it now I found the program has come a long way. In my assessment the UI design tools aren’t up to par with Sketch, but the prototyping capabilities are advanced. It was nice to be able to build and animate the entire design within one application.
For this concept I wanted to create a chatbot experience, where Igor talks back to the user like a smart office assistant.
I also tried to force myself out of my graphic design comfort zone, to make something more impactful than I would normally. For stylistic inspiration I referenced Jeremiah Shoaf's wonderful collection of type resources on Typewolf.
The process of building this chatbot prototype inspired ideas for pushing the app further as a true virtual assistant, using the same conversational experience to leverage other tech installations at Fuzz.
Wednesday
Tools: Photoshop, Principle
Perhaps because I was going insane by this point redesigning the same app over and over, I decided to make an app for the original iPhone. I fired up Photoshop and began gratuitously applying shadows, gradients, and textures.
I wanted the graphic design to feel as authentically 2007 as possible. While doing research I ran across this great article The Verge published on iOS: A visual history.
The process of constructing the interactive prototype in Principle was time consuming, tediously exporting assets for backgrounds and button states. I felt transported back to the dark ages of UI design inefficiency.
What did I learn? Nothing. This was stupid. If anyone wants me to design a vintage iPhone app for your ironic hipster business model, you know where to find me.
Thursday
Tools: Photoshop, Unity
I knew I wanted to prototype out an augmented reality experience, and I wanted an excuse to become more familiar with Unity, but I wasn’t sure where to start. I ended up downloading an image from Google Maps of the front gate to our office in Brooklyn, and researching how 360 image viewers work.
Venturing into Unity was intimidating, but with the help of some great online tutorials from Adriana Vecchioli and Verónica Valls I was able to hack together a 360 image viewer.
Finally, I built out the project as a Google Cardboard app, and downloaded it onto my phone to play with. It’s essentially a fake app, just one 3D scene with no interactions.
But it’s so cool! Real enough to suspend disbelief for a few seconds. I hope that the proof of concept will inspire more ideas for mixed reality applications in our Labs department.
Friday
Tools: Sketch
By Friday I was beginning to feel burned out from the project and found myself procrastinating all day long. To work smarter instead of harder, I decided to use my laziness to my advantage and design the most economical prototype possible. Within 20 minutes I had skimmed through the documentation on Android Widgets, and “heroically” cobbled together a Sketch prototype from a screenshot of my phone’s home screen.
Even though this one took the least energy, I think it just might be the best minimum viable product of the week. It solves for the main design problem (unlocking the door) with next to zero effort from the user.
Though it’s risky, sometimes procrastinating until the last minute can have positive creative results. It can give your mind time to work out a problem subconsciously, enabling you to execute in one draft right before deadline.
Saturday
Tools: Studio
To really flirt with the cutting edge of UI design tools on the market, I signed up for the beta release of the new product from inVision, Studio. On Saturday I dove in and created the final prototype of the week.
I’m giving the application an early tentative approval. It seems like the InVision team has really been doing their homework, studying what designers want out of their main tool and working towards a well-balanced product. There are definitely still some rough edges to be worked out, but compared to Flinto the UI design features are great, and the motion design features are approaching the level of Principle. I wouldn’t recommend adopting it over Sketch just yet for professional projects, but it looks like it will become a strong contender as it improves.
One bummer was that I couldn’t get custom fonts to work in the prototype. Regardless, I had fun putting together a quirky, sort of modernist interface. Since this was the seventh time I had designed the same app, I felt free to experiment without worrying too much about success or failure.
What I Learned
The project was a self challenge to exercise my UI design skills and push my creative thinking. By committing myself to make a completely new design every day, I found myself arriving at more interesting solutions than if I had just accepted an early version. I’d recommend The 7 Redesign Challenge format to anyone wanting to make a quick jump in their design game.
A theme in many of the prototypes was working with motion from the beginning, and allowing the motion design to influence the UI design. Often I found small nuances of timing to better communicate the graphic elements.
Working with Unity was a highlight of the week. Now that it’s been demystified, I’m excited to find more excuses to use VR and AR in my product design process.
It was valuable to tour the UI design programs competing on the market, and to discover each tool by applying it to a real project. Principle was easy to learn and it compliments Sketch well, filling in the missing motion design gap. Flinto attempts to cover the entire UI and motion design workflow, but doesn’t shine in any one area. Figma differentiates with their web platform, and the technology just might have the potential to revolutionize how designers construct virtual experiences directly. InVision Studio sees itself as the “Sketch killer” but will need to work out a lot of issues before becoming a viable option for many teams.
Ideation is a powerful concept that drives up the quality of design solutions through sheer number of options. Because Igor’s overall user experience design was essentially solved from the beginning, I felt free to push the envelope with unusual ideas and new techniques. Repeating the same mini-project each day allowed me the chance to focus on the craft of prototyping in a way that I usually don’t with client projects. The next time I’m stuck on a design, I know I can just try doing it over completely differently.
