Renov8r: App for Planning and Visualising Home Renovations
This case study describes the design process and decisions for my first landing page design, which promotes a mobile app that helps users plan and visualize home renovations.
In today’s fast-moving world renovating your home can be a daunting task. With so many choices in the market, finding what you're looking for can be overwhelming!
As an architect, I understand that clients expect us to comprehend their ideas quickly and complete the work within a short timeframe. However, understanding, planning, and visualizing takes longer than clients anticipate.
Renov8r is an application designed to help users plan and visualize their home renovations and aims to make this process easy and stress-free. This app helps you achieve renovation goals and create a space that feels like home.
Project Brief: The objective was to create a visually appealing one-pager website while considering its functionality to attract the market to increase the business.
Deliverables: Research, Wireframes, Visual Design, Prototype
Duration: 14 days
TL;DR Checkout the Final Design
If you’re short on time, you can quickly check out the Final Design below 👇
Let’s get to the Design Process now!
I started with finalising the topic, researching the problem statement (i.e., asking the right question), moodboarding, competitor analysis, wireframing, section wise iterations, feedback, and the final prototype.
Part One: Topic Selection and Research
We were given a list of topics from Nights and Weekends and had to select one topic for our one-pager website.
After going through the given list, I prepared a list of the topics that interest me and then finalized one topic.
In my case, I chose to design a one-page website for an “app for planning and visualizing home renovations”.
But why would a mobile app require a website or a landing page??
Who is this website for??
Studying the Competitor’s and understanding how it works
I studied competitors' websites like Houzz, Roomsketcher, Planner5D, Homebyme, Magicplan, Homedesign, etc. to identify design strategies that could make Renov8r's landing page stand out.
Structuring all the collected data and doing the Information Architecture
I identified the main sections of the landing page and determined what information should be included in each section after the competitors' analysis.
Doing IA simplified the structure of the landing page as I had a clear understanding of sections of the page.
Part two: Visuals
Lets start with the Wireframes
Before jumping into visuals, I organized IA to create low-fidelity wireframes which would help me visualize the structure of my landing page.
- The main objective for iterations in this phase was to nail the layout & content.
Developing high-fidelity wireframes provided me with a strong foundation for visual design, as the layout and content were mostly finalized before I began the visual design phase. Most of the part was done uptill this point and the work on the visuals had to be started from now on.
When I was picking out colors and designing my overall look, my goal was to showcase a professional, modern, and positive attitude. I wanted to make sure that the colors and style I chose were both eye-catching and inviting.
I believe that the way we present ourselves can have a big impact on how others perceive us, and I wanted to make sure that I left a lasting impression that represented me in the best possible light.
Section-wise explanation
I followed a systematic approach and process to refine and enhance the overall design.
1. Hero Section
The hero section is the first part of a landing page that catches the user's attention. At the bottom of this section lies the social proof section, which is meant to show that the app is genuine and has been accepted by many people. This helps to build trust in the user.
2. Target Users
This section of the landing page is dedicated to the app's target users.
3. How it works?
The Stepwise explanation with the visual representation helps the users understand how to use the app and the CTA helps increase the conversion rate.
4. Key Features
Highlighting the app's key features is a way of educating its users about the potential of the app. What all is there and what can be done?
5. Choose your style
Adding themes by default to this section — would act as an incentive and will attract users to use the app.
6. Testimonials
Adding BEFORE & AFTER as social proof to the app to provide some credibility and gain user trust.
7. Final CTA Section
Wrapping it up
“Design is nothing but a humble understanding of materials, a natural instinct for solutions, and respect for nature” — B.V.Doshi
Few learnings from this Project
- One of the main things I learned during this project was to iterate, iterate and iterate.. be it visual design, topic selection, or card information architecture.
- “What you consume is what you create”. I had to refer to many mobile app websites to come up with a basic information architecture for the landing page and moodboarding to get the visual direction in mind .”
- I recognize room for improvement in the problem-solving and visual aspects of the project.
That’s all folks!
Thank you for investing your time in reading this case study — I hope you found it engaging. 🫡
I’m open to new projects and collaborations, so please don’t hesitate to contact me if you’re interested in working together. 🤝
You can connect with me on Twitter or LinkedIn, or drop me an email.
