In this exercise, I find a cool-looking design. Recreate it, and make a new page for it, intending to keep the design and content consistent with the original.

Chosen Design

Above is a one page design I found on Dribbble. It's supposed to be a planner app for people who live in a city.

It has a sleek design and nice colors, but unfortunately, it lacks in accessibility and UX.

• Much of the text is too small to easily read.

• Information and features are inconsistent with the app's intuitive purpose (What would a search bar be doing here?).

• Some of the text doesn't make sense ("Trips, ONLINE??") 

• What even is the purpose of tracking trips?

But the purpose of this exercise isn't (yet) to remake it to enhance its UX. It's to practice deconstructing an existing design, and to then put it back together, and use what was learned to create an original design, in a consistent style. 

So let's do that! (and maybe redesign it after)

The Recreation Process

My process was simple, but ohh was it flawed. I just designed one block at a time, from top to bottom. Slowly going by ear. Auto-layout made the modularity of this design simple, so this process didn't take long.

The Problem with My Process

Unfortunately, I waited until AFTER I had finished the recreation, to create the appropriate styles and variables. As a result, the recreated design features some inconsistencies, and going back to fix these was a bit of a pain.

The Correct Way (I think)

Looking back, here's how I would have redone this:

• Begin with adding color variables.

• Start big-picture, then break into smaller pieces (like a family tree)

• Looking for patterns in the design like big components, repeating type styles, margins & paddings, or even the ways that icons are used.

• Nail the type-styles. A sure-fire way to do this is to overlay your text over the desired one, and use a different color so they don't merge. Once you've found the desired style you can drag it over future text to see if it truly is in the same style.

• Plan Components AFTER your type styles have been set. This way you don't accidentally create inaccuracy within your design.

• Then I could go forth and conquer.

Expanding the Design

The beauty of a defined design system is that it forces consistency across designs.

Fortunately, I created my styles, components, and variables, before starting the expansion, and as a result, I think it turned out well.

Reflection

• Recreation was great for practicing identifying repetitive aspects which leads to more efficient, and consistent design.

• My first step should have been cutting up the original's different text styles, adding appropriate color variables, and measuring margins.

• Instead, I created them after completing the recreation, but before the expansion.

As a result, I found plenty of inconsistencies with the recreated page and had to go back and fix them.

• The design expansion was simple and required only a few basic wireframe sketches before I began the final design.

• The original app design lacked polished features. As a result, the design (both pages) suffers from weak purpose, and therefore, poor UX.

Overall, this exercise was fun and an effective way of changing how I view designs—enhancing my ability to recognize patterns and repetition, which will improve the efficiency and consistency of future designs.

Thanks!