Leah Rhodes Luxe Design, formally Leah Rhodes Luxe Interiors, specializes in enhancing homes by combining furniture and antiques for a modern look. Their focus is on transforming empty rooms into well-designed spaces that reflect clients' tastes and practical needs. The owner has also previously assisted my family with interior decor.
What Problem Are We Trying To Solve?
The client recently started her own business, aiming to diversify her portfolio and oversee projects independently. She created a basic website named 'House of Luxe' for her interior design venture. However, the current website design is considered simple and somewhat cumbersome compared to competitors, who feature more advanced designs for both mobile and desktop platforms.
A friend informed me about Luxe Interiors, a startup with a basic website design. I approached the owner and offered to help redesign the website for improved functionality. The main goals were to ensure clarity, conciseness, and ease of use for visitors on both desktop and mobile. The design aimed to meet user expectations, facilitate smooth task completion, and follow modern design patterns while maintaining a distinctive and practical appeal.
The Solution:
Let’s Do Some Research To Start!
Leah Rhodes,
Owner of Leah Rhodes Luxe Interiors
What Kind Of Assumptions Should I Have?
Before initiating the website production and conceptual research, it was crucial to engage in discussions with the business owner, Leah Rhodes. Understanding her specific needs and expectations was a priority.
Through exploration of design trends, competitors, and overall expectations, a perspective emerged for a design that is simple, bold, and distinctive. Additionally, there was an interest in incorporating new features, which will be elaborated on later in this showcase.
In the initial meeting, I gained insights for the design but identified potential challenges:
Direct Competitive Analysis: What’s Her Competition Like?
After understanding the project dynamics, I studied traditional interior design websites and analyzed competitors provided by the client. I created a chart outlining their strengths, weaknesses, and specialties in interior design.
When compared to House of Luxe, I found that many focus on multiple screens for their websites, as well as more nuanced design choices that help stand out from their own competitors and also entice individuals to explore their website. It was quite clear the design would have to encompass a style that would hook users and be welcoming to those who are new to the interior design world.
What Would The Clients Think Of A Redeveloped Website? - Interviews For Information!
I conducted interviews with individuals familiar with the client's business and interested in interior design to understand user interactions with such websites. The questions aimed to uncover motivations and preferences for exploring interior design fields.
Some of the questions asked here included:
These answers were then compiled into themes that I found similar to one another, which included interest in interior design, characteristics of interior design, user needs & pain points, how information is presented to users on a website, and how a design should function to the user. These responses were then developed into an affinity map, which highlights each point brought up within the interviews.
You can view the affinity map in further detail here:
The answers to these questions help me immensely in understanding how a customer looks for businesses to work with, and also gave me insight into an interior design website’s functionality as a whole.
Key Takeaways
Interviews revealed key insights:
“Having as much upfront information as possible helps very much, also any portfolio or pierce list should be sent to me so I can refer back to as to avoid long back and forth conversations. I would also like to avoid waiting a long time for responses. It would also be a good idea to possibly speak to previous customers/testimonials to get an idea of the designer.”
“If I’m looking to redo a room, I would look for a random designer and look up the information on their website and see if their design interests reflect my own. I tend to look for a spark of interest through the designer.”
Who Else Would Use This Website? Developing User Personas!
Through both the interviews and affinity map I gradually developed the characteristics of who would actually be using this website, and compiled the information into two user personas that would emulate potential customers of the website.
How Might We…? What Other Questions Should I Be Asking To Develop A Well-Made Design?
After completing the user personas, I then developed several HMW (How might we) questions that would address how I would further develop my design and articulate the early stages of the backbone of my physical project.
Feature Roadmap: What Features Do We Need?
When discussing features with the owner, we decided that the entire website should be expanded in scope while also providing a well-rounded set of features for users to engage with. In addition, I explained to the owner that the general website should not only utilize customer feedback as we discussed, but should also include an expanded showcase of what she can do through her projects, her services, and a more descriptive/detailed version of her about section, which could overall help users receive a better understanding of her business.
Bringing To Life The Backbone Of My Design Through A User Flow And Low-Fidelity Wireframes!
Following the HMW questions, I wanted to figure out methods for how users would transition from section to section on the website. I planed out each section from start to finish on where users should go, and what they can do between sections. By developing a user flow, I created the UX basis of my design that would proceed the general physical portion of my project.
Low-Fidelity Wireframes
I created low-fidelity designs for the mobile/desktop website, incorporating traditional interior design patterns for simplicity and appeal. The screens include home, portfolio, services, contact, and about me sections. The owner requested a feature allowing users to connect with former clients for one-on-one meetings, initially placed on the home screen but later moved to the contact section as a distinct button.
The desktop iteration of the design focused on similar properties to the mobile design, but the challenge here was to create a flow that worked well when viewed on a laptop or computer. In order to get around this minor issue, I had to apply adjustments to the images, text, and general use of space on the website so each screen could look clean yet also stylized in terms of UX for users browsing said website.
Let’s Bring The Brand To Life!
While the client already had an existing brand to her business, we collectively decided that there should be additional steps taken to have an updated style of design that incorporated a brand personality into her site, hence I created said style guide and UI kit which would be the basis for her brand, which was meant to represent Comfort, Quality, and Luxury.
High Fidelity Screens, Testing, and Iterations
I updated the low-fidelity wireframes with the established brand system, creating the first set of high-fidelity screens. The goal was to maintain a high-quality design that welcomes users and encourages exploration. The desktop and mobile versions feature an open layout with a neutral color palette to highlight the business owner's work. Here are the initial designs.
Here are the high-fidelities of the desktop version of the home screen. The home screen focuses on an introduction to her business and what users can find on the site and also explains how she operates her business. I was looking for an open and clean design that would generate interest through a general showcase of her introduction, her work, and a testimonial which would help elevate the nature of her business.
These high-fidelity desktop screens highlight the skills and knowledge the owner has within her business. Users could explore and select one of these services to read a simple description of what that particular service is. This design was made to be similar to the portfolio showcase, and follows a similar pattern of design flow that is meant to feel both formal and inviting to the user.
Here are the high-fidelity screens of the contact section for desktop, which include screens of the toggle turned on and off to showcase the different message users would receive if they decide to speak with a former client. When talking to the owner, she expressed interest in having the design display a simple yet bold showcase for the contact section in order to evoke an open atmosphere within the overall user interface.
This high-fidelity design showcases the owner’s interior design portfolio for desktop. A user can choose one of the topics shown and transverse a selection of rooms she has created in that specific category. They can then select a specific project and view information and additional photos about it. I was interested in creating a professional yet also playful environment with this design since users would expect to find a mature and semi-professional look when exploring her projects.
This screen showcases the about section of the high-fidelity desktop section of the app. This is where users may explore information about the owner and her beliefs as an interior designer, as well as testimonials about her services. Like much of the design flows across this website, I wanted to craft something simple that didn’t distract from the information presented. This is why I kept the colors of the website muted, left plenty of wide but carefully utilized space, and used simple but intriguing text.
Services
The high-fidelity screens of this section display the services that the owner provides to her clients and is meant to showcase the variety of work that she generates within her field. I decided to apply a pop-up-like structure to each option chosen by the user in order to take advantage of the capabilities utilized by mobile devices.
Portfolio Showcase
This high-fidelity design showcases a portfolio section that users can explore which details the types of interior room designs that the owner specializes in. Since this mobile version was meant to display her interior design skills, I simply adjusted the spacing from the original desktop variation and adapted those assets to a phone screen. I also tried to give as much space and breathing room as I could with each portion of the design.
Contact
Here are the high-fidelity screens of the contact section, both with and without the feature to reach out to former clients. Both the owner and myself discussed the ability to have users talk with former clients via a three way consultation, which was reflected in the design through having two different contact screens in different separate sections of the website that would be used to either contact the owner directly or contact her and also speak with a former client.
Home Screen, Menu, About
Here are the high-fidelities of the home screen, menu, and about section of the owner’s website for mobile. For this version, I wanted to bring a formal yet also playful sense of details to these high-fidelity screens, while also providing a welcoming experience to users through its clean and slick style.
Testing These Designs
Once the designs were completed, I created wireframes which stitched the screens together so that interactive elements could be applied from screen to screen, of which also allowed me to proceed with testing my high-fidelity prototype.
For this test, users were assigned to preform several simple tasks for both the mobile and desktop versions of the website:
- Explore the homepage & about sections (select the contact previous customer button and go through the contact process).
- Explore and select sections of the service and portfolio sections.
- Select the general contact button and follow through the contact sections.
- Follow all three above mentioned task flows but on the mobile section.
Each of these tasks were applied in order to understand how users would transverse each section of the website, all while documenting any issues or pain points that would come up when they utilized the design.
My success metric would follow these tasks accordingly:
What Are The Results Of These Tests?
Once testing concluded, I then fully recorded and compiled the data into information that would help me further elevate the efficiency of the website and general design.
The overall design feedback was positive, with users finding the home, about, and contact former client screens to be simplistic and user-friendly. The service and portfolio sections were also well-received, with minor suggestions for better box viewing. The contact section was straightforward, and the mobile version had good user interaction. Improvement suggestions included combining the contact and former client sections for convenience, adjusting text boxes for better image visibility, and making minor edits to the design.
Getting Back To The Drawing Board With Revisions/Iterations.
Thanks to the feedback I received from the test interviews and recommendations from the business owner, I went to work developing adjusted screens that aided in further updating the design.
Below here are some examples of the applied adjustments I made to these screens:
Bring All The Elements Together
Final High Fidelity Wireframe Prototype
After redesigning, reediting, and applying numerous adjustments to my screens, I finalized the entire design, and finished my high fidelity wireframe prototype.
Below is both iterations of the completed product with all features, screens, and designs completed.
Conclusion & Reflection
After completing the overall design, I showcased the website to the business owner, who was quite happy with the overall look and was interested in using said designs as references to rebuild her website. Through this process I was able to gain further insight into the business world and its functionalities, all while also delivering a product that met the expectations of the client. I learned through this process that the needs and expectations of the business owner are not only guiding points for a project, but also important in understanding the mentally of the consumer themselves who are looking to use the services of the business, which serves as a feedback loop to developing a superior design overall.
Next Steps
My next steps are to actually send these assets to the client (which I did), and further aid her if necessary to help build her website. I also plan to help in other ways:
- Help aid in writing descriptions for rooms and services in order to give open and honest descriptions of the business’ work and how she operates.
- Run tests and continue to apply updates to further improve and further efficiently run the mobile and desktop versions of the website.
- Possibly send further suggestions for any design changes that could be made in order to keep website up to date on design trends and overall modern website design.
