For this Design Sprint, Alp, Devon, and I redesigned the website for Knotty & Board, a local furniture store, focusing on the needs of a specific user group. The website redesign targeted improving both the landing page and a secondary furniture page, ensuring the design could serve users of different ages and technological abilities. The goal was to create a user-friendly interface that is intuitive, visually cohesive, and budget-conscious, offering a smooth shopping experience across multiple devices: desktop, smartwatch, and large multitouch displays.

User Group

The first step of design is identifying the user group and their needs. Therefore, each of us crafted a persona that could be a target user for our website.

• Debby (51 years old): A teacher from Cornelius, Debby wants to modernize her mismatched furniture with cohesive pieces. She prefers high-quality but affordable furniture. While she’s good with technology like laptops and large displays, she struggles with visualizing how furniture pieces would look together.
• Catherine (22 years old): A recent graduate with a low budget, Catherine shares a living space with three roommates. She’s proficient with technology and wants to ensure the furniture fits her small space. She also cares about her roommates’ opinions and seeks a cozy, homey feel. Her main frustration is determining the right size of furniture for her space.
• Rose (74 years old): A retired accountant living alone in Huntersville, Rose has an existing collection of antique furniture. She wants new pieces that match her current collection. However, she struggles with technology and has difficulty seeing small images on screens. Affordability, knowing the origin of furniture, and continuing her collection are her key concerns.

Despite their different needs, all personas shared common goals: budget-friendly furniture, cohesive design, and the ability to see how furniture fits into their home. We tailored our design to ensure each of these aspects was addressed for all personas.

Needs & Features

We identified the unique needs of our personas and developed a unified approach to meet their goals while ensuring that the design catered to their diverse technological abilities, preferences, and challenges.

1. Visualizing Furniture Together

All three personas shared a common frustration: not being able to easily visualize how furniture pieces would look together in their spaces. To address this, we introduced a “Room Preview” tool across all devices:

• Debby, who wants a cohesive, modern look, can upload an image of her room and virtually place selected furniture pieces within it. The website’s AI suggests additional matching pieces based on her style preferences.
• Catherine can also use this tool to visualize furniture in her small shared space. Rather than guessing the sizing she needs or measuring herself, the website will automatically input the furniture into the image of the room proportionally to how it would be in real life.
• Rose can use the same feature to see how new furniture items will match her existing antique collection. Because she is not as good with technology, the larger display would allow her to see and compare pieces better.

2. Customizing the Search Experience

Each persona has specific requirements when browsing for furniture, and our design ensures a tailored search experience:

• Debby values high-quality, budget-friendly pieces that work well together. The search feature allows her to filter by style, quality, and price, while also suggesting decor that matches her existing selections.
• Catherine, on a tight budget, needs to find affordable, space-saving furniture. She can filter by price, size, and style to ensure that she only sees items that fit both her budget and her small space. The system also suggests homey, cozy furniture styles, catering to her desire to create a warm environment.
• Rose looks for vintage pieces at a low price point. Her search filters include price, material, and furniture origin, and the system highlights items that match the classic, antique aesthetic she prefers. Because Rose cares about the details of the items, there is a “Read More” link to see more information about a specific piece.

3. Simplified Navigation

Considering the wide range of technological literacy, our design focuses on clear, simple navigation and visual accessibility:

• Debby, comfortable with technology, can navigate the website via a clean, intuitive layout with large images and drop-down menus.
• Catherine, being tech-savvy, can quickly access filters and adjust them for price, style, and size across different pages, with features like “Room Preview” to visualize how the furniture fits in her space.
• Rose, who is less experienced with technology, benefits from simplified search functions, making it easier for her to navigate and find pieces that fit her existing collection.

4. Budget Management

Since all three personas have budget constraints, we implemented a price range filter that allows users to input their budget and view only the furniture within that range.

• Debby can balance quality and affordability, Catherine can stick to a tight budget as she shops for her shared space, and Rose can find reasonably priced vintage or antique-style furniture.

By integrating these features seamlessly into each version of the Knotty & Board website, we ensure that the unique needs of Debby, Catherine, and Rose are met, providing an efficient, personalized, and enjoyable shopping experience.

Design & Sketches

We designed the Knotty & Board website for three types of devices: desktops, smartwatches, and large multitouch displays.

Desktop Design

Landing Page:

• Large, clear images indicate the difference between the Furniture Market and Interiors Market and display their Design Services. Images of best-selling pieces help users get a feel for the kind of pieces Knotty & Board has.
• A top navigation bar, featuring drop-down menus for furniture and decor categories helps users easily navigate to other pages and access information such as store locations, hours of operation, and their accounts.
• A search bar is prominently placed at the top to allow quick access to specific furniture or decor items.

Furniture Page:

• The top navigation bar with drop-down menus continues onto the furniture page, allowing easy access to specific categories, the search bar, or other pages.
• Users can insert specific price and size ranges as well as select a certain style of furniture they want.
• Pieces are displayed with an image, name, size, price, and a “Read More” link. Users can click on this link for a description of the piece and where it came from.
• The “Room Preview” tool allows users to upload an image of the room, select pieces of furniture, and see how the items match each other, fit in the room, or match the room. The website will add items proportionally to ensure the sizing is easy to determine.

Large Multitouch Display Design

Landing Page:

• This design is very similar to the desktop design. With such a large display, overloading the home page may overwhelm the user. Therefore, images of the two locations, popular items, and information about the Design Service ensure users can find what they are looking for.
• The top navigation bar with drop-down menus continues in this display

Furniture Page:

• Similar to the desktop display, customizable searches can be done with drop-down menu selections and inputting price and size ranges. Based on the information, furniture pieces will be displayed.
• The “Room Preview” tool is more interactive on the large display. A camera on the top of the large multitouch display can display the room in real-time. Users can drag items into the room and the website will place them proportionally. Users can more easily drag the furniture into different places in the room and see how it looks.
• Using information from the customizable search, selected items, and how the room looks, the website suggests other furniture and decor items.

Watch Design

Landing Page:

• Displaying information on such a small screen can get cramped, so many of the sketches use icons to display a link that will take the user to their desired page.

Furniture Page:

• To ensure some customization of the search, users select which kind of furniture they are looking for, and popular pieces will come up. As users scroll through, they can add items to their cart.
• Using their phone, users could hold up their camera to the room they need furniture for. Then, they can send the selected furniture from their watch to show up on their phone screen. So, they can see how the furniture looks in the room.

Testing

We tested our design with Alice, James, and Jeremy. They gave us many good suggestions and asked questions that helped us refine our sketches closer to the final prototype. The following are the highlights of their feedback:

Desktop

• Landing Page: The top bar is liked, but some designs felt crowded. Breaking up sections with location images worked well. A horizontal layout was confusing for some users.
• Furniture Page: The drop-down menus are useful, but showing too many furniture types at once made the page feel cluttered.

Large Multitouch Display

• Landing Page: A simple design worked best. They liked the layout that used location images to separate content.
• Furniture Page: Drop-downs helped prevent clutter, and having more options displayed at once was useful. However, whether furniture pieces “match” can be subjective.

Watch

• Landing Page: The Apple Watch-style layout was favored for its organized information. Some screens felt either too plain or unsuitable for a watch display.
• Furniture Page: Having back/home buttons for easy navigation was preferred. Customizable search options fit the personas’ specific needs.

Based on this feedback, we focused on simplicity, reducing clutter, and improving navigation.

Final Sketches

Using the feedback and focusing on our target user group, we combined aspects of our different sketches to create a better end product.

Desktop

• Landing Page: Rather than having the furniture and decor items displayed next to each other, we broke them up with images of the Furniture Market and Interiors Market. This provides some division and variety to the page. We made the top bar large and spread out because it is easier to read and use.
• Furniture Page: We focused on finding the balance of a customizable search because too many options can burden the user and crowd the screen. Therefore, users can only select one kind and one style of furniture to see.

Large Multitouch Display

• Landing Page: We used the same philosophy we used in the computer landing page design. Therefore, we displayed all the information in a format that readers can easily glance at and find what they need.
• Furniture Page: Some of our sketches had the feature of using AI to tell users if the furniture they selected matched, however, this is very subjective. So, we prioritized giving suggestions for other furniture or decor that relate to the selected ones.

Watch

• Landing Page: The watch interface is inspired by the Apple Watch’s home screen, featuring “bubbles” that link to different pages, such as the furniture page, decor page, Furniture Market location information, etc. Users can scroll around to reveal different “bubbles.” This design allows for a lot of links to be displayed, but not too crowded or small.
• Furniture Page: The first page users see has three links: Furniture Type, Price Range, and Size Range. Clicking on them goes to another page where the user can customize their search more. Based on the user input, suggested pieces come up. Clicking the Knotty & Board logo returns to the landing page and clicking the chair icon returns to the first furniture page.

Visual Design

We developed a mood board to capture the aesthetic direction of our redesign. The goal was to create a modern, stylish look without overwhelming users with too much visual noise. After analyzing competitor sites frequently visited by our target demographic, we chose:

• Color Palette: Neutral tones like sage green, terracotta, and natural browns create a rustic, warm feel without distracting from the furniture.
• Font: We opted for Times New Roman to give the site a more elegant feel while maintaining readability.
• Visual Simplicity: Given the personas’ focus on the furniture itself, we kept backgrounds clean and simple to avoid overwhelming users with design elements.

Prototypes

We created prototypes for desktops, smartwatches, and large multitouch display interfaces using Figma. These prototypes were created with a combination of our target users’ needs, many sketches, and feedback from our classmates. Here is the link to our Figma page and images below.

Desktop

• Landing Page

• Furniture Page

Large Multitouch Display

• Landing Page

• Furniture Page

Watch

• Landing Page

• Furniture Page

Conclusion

Our Knotty & Board website redesign successfully incorporates the needs of users across different ages, technological abilities, and goals. By focusing on simplicity, personalization, and interactivity, we created a shopping experience that works across desktops, smartwatches, and large multitouch display interfaces. Through iterative design, testing, and feedback, we refined the experience to provide a cohesive and budget-friendly solution for furniture shoppers. If we were to continue developing this design, we could test our prototypes with more users of diverse backgrounds. We received feedback from three senior computer science majors. Therefore, we could expand our testing to people of different ages and technological backgrounds to create even better interfaces.