I recently bought a house and wanted to do some renovations in it. The excitement of buying and wanting to do everything myself led me to search for ideas online.  While there are numerous options out there for interior design, it was hard to find a medium where I can play around to see what options I have to remodel my kitchen or bathroom.  For instance, the different kind of countertops that go with different black splash  and which one looks the best with my floor plan.  So I decided to design my version of the remodeling app to help me compose design ideas all together in one place on one device. 


Design Research


Step I: Preliminary Research

What is it that everybody does in the industry, but does it differently? That is the first question you ask before starting a UX process.  In the early stage we try to get as much information as possible that could cause any inconveniences in case they pop up later. To avoid that it is best to do an early on research to know more about the target audience, their competitors and the existing technology prevailing in the industry. 

  • Customers/ Target Audience:  Home owners that love to DIY, Handyman, Contractors, Architect, Property investors, Real Estate companies are some of the users who benefits from a remodeling/renovations Apps. After doing a little survey, I found out that Homeowners use remodeling/renovation apps more than anyone else.  

Users using Remodeling App

  • Competitors:  The competition has rather increased in the past few years.  Few years ago only interior design apps were just launching but now it has expanded to remodeling apps, Handy man apps, DIY apps, even a Paint tester app. Houzz is one of the Market leaders in the industry. Although their main focus is on Interior design but they do offer in person consultations on renovations. Other Apps like 'Home Design 3D' is also one of the top Apps on iPhone that lets you add and move furniture, import plans, view and/or work in 3D. 
  • Technology:  Introduction of Augmented Reality (AR), 2D, 3D models has completely changed how these apps used to function.  Within the 3-D space, which is displayed on a handheld device, users can undertake a host of actions, from removing old furniture to changing flooring and putting in completely new furniture to see how it looks.  Just few years ago, customers would have to imagine what an item would look like in a different material or whether it would even fit in a room.  Now, with this technology you can do it all in your house — you can look at the entire range of materials/items and colors in your own space, size and all.


Step II: Personas

After conducting the preliminary research of gathering all the information, its time to analyze those findings into insights. 

  • Creating personas help summarize and communicate the needs, fears, motivations, and behavior of  the target audience. In this particular scenario, the primary focus is on Home owners. Home owners are typically short on time to go to different stores or make appointments with contractors/handyman etc. Home renovation apps gives them the opportunity to understand and plan for their projects in their own time. But professional contractors/handyman can also use these apps as an additional tool for themselves to cut time, communicate better and faster with their clients. 
                                                                                Click on the image to read the full description

                                                                                Click on the image to read the full description

STEP III: User Story

Storyboards helps to visualize how the overall customer/user journey will look like. In this scenario the user is using the App to redo his kitchen. His main goal is to find the right design for his kitchen countertops. He chose this App because of the reviews that says, the App gives you the information of the stores that carries the material and the price quotes based on the measurements. It also allows you to order free sample.  The other cool feature of this App is that it also gives you tip on if it is a DIY project or if it requires a proffessional to hire. 



STEP IV: Wireframing and Prototyping

When we have a few good ideas and know how the main structure of the application will look like we start building a wireframe and the prototype. I used Sketch to create low-fidelity wireframes and prototypes in order to be efficient and as quick as possible. Here is the link to a complete prototype of the user browsing through a selection of countertops for his kitchen and also gets to order free samples of the selected variety.

   Click on the Image to see the complete prototype 

   Click on the Image to see the complete prototype 


STEP V: Usability Test

The purpose of user testing was to gain feedback on the over all flow of the App and I got some invaluable feed back which was not possible without completing this exercise. Since the App was designed keeping home owners in mind, I had six home owners test out the prototype. The total time of the test was 30 minutes and was conducted in person. Some of the key findings are as follows:

  • Majority of the participant understood the premises of the App and were able to navigate through it without any problems.
  • Half of the users thought that it would be more convenient if the App can figure out the measurements within than to add manually. 
  • 50 percent of the user were in agreement that the material cost should be displayed according to per sq yard where as for others, knowing the available material location was more important. 
  • Users thought that the extra details on the material selected was quite helpful since it makes the decision easier for them if they want to do it yourself or look for a professional. 
  • The most liked feature of the App was to be able to order samples without any cost because it saves their time to physically go and browse material.
  • Over all the layout of the App was clean and easy to understand. 


STEP VI: Visual Design

Visual design is so important to provide support to your underlying user experience but on its own, its not enough. A user need both great visual design and great usability to achieve excellence therefore after completing usability testing, the final step was to work on the visual representation of the App. 

  • MOOD BOARD:  Creating a mood board gives an idea of what the finished product will look like. Some of the key elements that were covered in mood board are:
    • Color:  The App will encompass a greater use of white space with splashes of bold color to draw users to the specific area. The App has a more warehouse utilitarian look to it and the color palette was chosen according to it. 
    • Font Style:  A basic yet modern font style was chosen that matches the over all image of the App.
    • Design Elements:  To keep the process smooth and flowing, design elements were kept simple yet bold for the user to understand. 
    • Product Pages:  Product pages will use a lot of white space and clean page elements so that users can quickly get the info they need on the product and are encouraged that it is a simple process.
Screen Shot 2018-08-15 at 11.41.18 PM.png
  • MOCK UP: After gathering ideas from mood board, It was time to put them to use. Appropriate visual design means that the fonts, icons, colors and layout help the customer complete common tasks and that pages do not contain information that is irrelevant or rarely needed.  I decided to select few slides from the wireframes and create mock ups.