The beginner's guide to product design: copying someone else's work

When talking about product design, copying someone else’s work is one of the best self-study methods, very suitable for novice product manager with no work experience and project experience.When you copy a design, you're actually understand the design pattern by a process of deconstruction by which you're recognize every single element in that design.  Beyond that, thinking about whether there is a room for improvement , and then began to build a product that has your own style. Having works of your own is a higlight point for your portfolio, which increases the opportunity to be recruited as product designer or manager.

Benefits for coping exisiting apps:
  • In the process of coping, you're gradually mastering the tool 

                                                                      Image by Sparringmind
Sharpen your tool before achieve your work. Before you start, you have to find an appropriate prototype design tool. You can either choose such a mature and powerful prototype design tool as Axure, but its learning curve is a bit high. Or you can choose the rapid prototyping tool - MockingBot, it is simple and lightweight, within 10 minutes you can complete a mobile App prototype, greatly enhancing the efficiency of interface structures prototyping.

Use MockingBot to create a mobile prototype is like painting, just by manually dragging  components to the corresponding position to complete the basic screens, organizing the interactive links, setting gestures and transition effects, make a prototype done in 10 minutes.

  • Develop design thinking and product management thinking by deconstructing of product design and interaction
                                                                            Image by lifehacker

Copy is a deconstruction process.In the process of copying, the products were broken up and then reconstruction, by practically dragging a component elements (icons, pictures, buttons) to form the entire page, in such a "hands-on experience" process, we consciously understand and recognize each single elements, page interaction relationship, experience flow and interaction logic, and reflect on what the product is in an overall view. Doing so will enable us to realize how the design is brought into life.

  • Think more to identify the product highlights for our own use.
Tools are tools, not the design itself. Copying is more than copying, it's about thinking about why it's impressive to you. While copying, think about what the product you're choosing is special about? What struck you about this app?  List what you think they are good, are they fuction design, UI layout, visual design, copywriting, color schemes or else? 

                                                                    image by UserTesting

As a product manager, focus on what the interaction highlights are? Are there any more possibilities and room to get improved? Accumulate all these bright spots and put into practice into you own project.

  • Copying is not a plagiarism, but an efficient learning method.

The so-called standing on the shoulders of giants to learn, do more with less. This is one of highest ROI activities you can do.You probably have a dozen ideas you want to try your design skills on. But for an inexperienced product novice,  it's a bit difficult to start in a white paper . 

By copying the prototype version of existing works from others, you put yourself in the shoes of the app’s designers, and naturally understand why they're designed in such patterns,  helping us quickly master the design skills.

  • The output of mobile application copying is a huge plus for your portfolio.

There is no need to say much on how important is the portfolio for a product manager to get a satisfying job.

 Step-by-step Tutorial: how to use rapid prototyping tool MockingBot to copy an app 
Here we take Instagram as an example to go about practicing-through-copying.

Step 1: Select the appropriate App

  • Copy what you're interested in as it'll be fun. Select apps you love or use on a daily basis, then copy them. You'll find much detail you never noticed before.
  • It's better to choose apps which are already launched.
  • Lean product is preferred, and too complex products is not recommended for copying.
  • Expose yourself as much product information and news as possible. Save impressive interaction design screenshots and even record the screen animation as a collection library. 

Step 2: Comparing to the app, sketch out the page structure on paper.
Below is the Instagram's top-level page sitemap, namely the home screen, explore, camera, news and profile.

Step 3: Open MockingBot into workspace, create a page level list in the right list area according to above sketch.

Step 4: Drag each product screenshot into the workspace, detail by detail, copy the size of objects and layout, color scheme, size design specifications.

Step 5: Copy the interaction relationship.

MockingBot, a very easy to use prototyping tool.It’s intuitive, just drag and drop, WYSISWYG. It enables you to structure the interactions with visible links that are pulls and connect the pages. Pretty neat.

Here is what we’re copying about Instagram prototype: 

Home - Comments - Private Message - Send to

Explore-Infinite scrolling view

Camera—— filter



Note: The main idea is to not to create perfect drawings, but rather to reproduce the skeleton of the design quickly, to achieve a clear display of the product concept.

Redesign of an existing app
When copy to a certain extent, you've comes to the next stage——redesign. Pick a few of apps you feel uncomfortable with, optimize, improve it and give their own solutions. By this way, not only can you learn from others and slowly began to develop your own style, but gain peer attention and professional approval in the field.

                                                                   Twitter Redesign App Idea by graphek

Knowledge comes from experience
With the first two stages of cultivation and accumulation, now you've gain huge plus points on your resume, and it's time strive for real project opportunities. In an actual project, you can clearly understand what it actually is woking as a product manager. 

If not now, when?

If you want to become product manager, then after reading this article, you must immediately get started.  Observe, think and accumulate, but only the practice is the most effective learning method, and memory through practicing is difficult to be forgotten. 

For newbie with no academic background and with no experience, the best way to learn the product design is Learning By Doing. 

For zero-based students, the best way to learn the product design is "Learning By Doing". As a rapid prototyping tool, MockingBot thoroughly implements the concept of learning by doing, is obvious the best tool for novice product designer.

Final work👇
Comments 0