The 7 Redesign Challenge

I took a week off work and redesigned the same app every day

Ideation can be intoxicating. Generating multiple creative solutions to one problem is a joyful process, and hunting for that enjoyment is what draws many into the field of design. By producing a volume of options, we 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.

Low fidelity wireframe for the door-opening app, Igor

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.

Force Touch interaction

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).

Main user flow prototyped in Principle

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.

My Figma setup

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.

Card transition fleshed out in Principle

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.

Igor reimagined as a chatbot 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.

Photoshop setup for my vintage iPhone app

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 vintage prototype

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.

A 360 image download from Google Maps and modified in Photoshop

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.

Unity 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.

Screenshot from Google Cardboard app

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 came close to skipping. After procrastinating all day long, 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.

Android Widget design

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.

Sketch prototype setup

Though it’s risky, sometimes procrastinating until the last minute can have positive 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.

Editing a transition in InVision Studio

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.

The prototype in InVision Studio

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.

Resources