Project Overview
Contu(re) is a website where users can view construction tutorials that are categorized according to building materials, building parts or building products. While many architects and DIYers search tutorials on YouTube, they are all scattered with other irrelevant distractions. A few construction channels upload videos to YouTube but reach to the users are low. Our website consolidates them so that it saves time for our target users in getting what they need with minimal efforts. Finding construction tutorials by the specific topics the users need will save them time searching and get their job done quickly. They can also easily share, bookmark and take notes on the site. Keep their focus on their job and increase their productivity by streamlining the search for them.
Project Duration
11 Jan 2022 - 27 Jan 2022
2.5 Weeks
​
​
​
Course
UX Design Specialization
​
​
​
​
My Role
Designing a responsive website from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, iterating on designs
​
The Problem
With many construction tutorials scattered across the internet, users waste a lot of time searching for what is relevant to their needs. Finding what they need endlessly becomes unproductive on their job.
The Goal
Design a website where users can find construction tutorials easily through according to building materials, building parts or building products so that users can find and view construction tutorials with step-by-step instructions and related product information to boost their productivity on their job. Less searching, more getting job done.
User Research
I am designing a website where users can view construction tutorials that are categorized according to materials, building parts and products. I noticed that our main competitors' websites are not well-organized and do not offer a clear user journey. Initial competitor audit reveals that our competitors upload videos to YouTube channels and link their website to them, but they are unorganized and searching what users need does not clearly provide a smooth user journey.
To smoothen the user journey, I want to find out what specific roadblocks they may have in finding construction tutorials. What, why, and when do they need to find tutorials? What do they require when they find the tutorials they need?
User Research: Pain Points
Wasted Time
Users take a lot of time searching for what is relevant to their needs, oftentimes get into a rabbit hole.
Scattered Videos
Users have to search the internet and YouTube as they endlessly fall into infinite scrolling and searching.
Unorganized Contents
Current construction tutorial websites offer unorganized contents which is not helpful when user need to pinpoint a product, a material type or part a building.
Revisiting Contents
Users bookmark a variety of sites on browsers but browsers bookmarks are not user-friendly to organize and share.
PERSONA:
Kumar Hadid
“Sharing construction tutorials that I found with colleagues helps us work correctly and efficiently.”
PERSONA:
Martha Rohe
“I love building things on my own and test out the products I sell. Tutorials about construction excites me.”
Problem Statement
Kumar is a busy architect who needs to find and view construction tutorials quickly that can be shared easily with coworkers because an organized one-stop tutorial website will save him time and allow him to focus on designing.
Problem Statement
Martha is a hardworking salesperson who needs to find and view construction tutorials in order to DIY home renovations herself because she can improve her skills and be a better salesperson in construction materials.
User Story
Kumar is a 35-year-old architect in Mandalay who has to manage many projects that range from schematic design to constructions. In coordination with designers and contractors, he has to communicate effectively on some of the simple but crucial parts of building. There is a need to educate unskilled workers and labors on construction techniques.
Kumar is frustrated that super long tutorial videos are not paid attention to by many. There are also too many videos to filter himself since the tutorials are from different sectors of the construction industry. Sometimes, he couldn’t find the topics needed when he quickly needs to reference during meetings or discussions with clients, contractors and colleagues.
Goals
​
-
Find construction tutorials to share with coworkers so that designing details for projects are based on proven methods
-
Sending the tutorials as references to contractors
Frustrations
​
-
Long videos get less attention from colleagues
-
Too many videos to watch and scan because there aren't proper categorizations
-
Can’t find according to the topics needed
User Story
Martha Rohe is a 26-year-old salesperson for a bathroom fixture company who goes business to business to market her company’s products. She has to travel a lot to various parts of the country. She loves to update her homes with latest building materials trending in the market. She is a hands-on person and like to build on her own.
​
She is frustrated that there are too many videos to watch on various platforms that it takes her a long time to find tutorial videos she needs. She is also not sure if the videos are legit or are just viral pieces of false information. As she has to spend a lot of money to upgrade her homes, she needs to make sure that the information and tutorial videos are verified and proven techniques.
Goals
-
Want to build DIY renovation for homes
-
Watch tutorials that teach how to lay tiles, waterproof walls, etc.
-
Designing and assembling cabinets using tutorials
Frustrations
​
-
Confused at which tutorials is legit since there are many ways of building
-
Spends too much time finding what she needs to watch
Endlessly scrolls the videos to find what she need.
Mapping Kumar journey revealed how an organized construction tutorial website would be a productivity tool to increase his collaboration with coworkers.
Paper Wireframes
The wireframe explorations set the guidance for responsive web design by creating an organizational structure of finding and viewing tutorials that can work on multiple devices, both mobile and desktops as users may start their journey on a desktop but may end up watching it on tablet or mobile on site.
Desktop Variations
Desktop
Tablet
Mobile
Information Architecture
Information architecture on designing the responsive website is mainly based on the need for easy searching and viewing tutorial videos.
Digital Wireframes for
Low-fidelity Prototype
After ideating and drafting web responsive design on paper wireframes, I created digital wireframes to test out the ideas and layout on different type of screen sizes. These are tested as low-fidelity prototypes in a usability study. The study focus on finding and viewing the videos and sharing them with colleagues.
Menu topics organized by
materials, products, and building parts
Horizontal scrolls of contents based on the topic users choose
Responsive Web Design for Tablet
Step by step tutorial transcript that goes with visuals
Responsive Web Design for Mobile
Usability Study
I conducted unmoderated usability studies remotely with 5 participants.
Each study took about 30 minutes.
Findings
Big Menus
Users like the big menus as an initial search but when submenus are as big, they get frustrated as both menus and submenus remain static on their screen. The sizes and location of the menus and submenus should be optimized at the later stages to give viewing tutorials videos priority rather than the menu to find them.
Contents
Most users are not seeing enough content on their screens above the fold although there are quite a few. The layout of the content screens should have emphasis on contents, either scale them bigger than others or make them more prominent on the screen.
Mockups
Based on the insights from the usability studies, I applied design changes like making changes to the menu size and allows it to open only when users hover on it since users need to see more contents above the fold. I also made the contents bigger to draw more attention and give them the priority in terms of scale.
​
Additional design changes included adding an option to view on YouTube as well as reorganization and resizing of various buttons to give them hierarchy on the screen based on usage and importance.
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View high-fidelity prototype:
High Contrast
High contrast colors are incorporated into the final high-fidelity prototypes for users with visual impairments.
Accessibility Considerations
Labels
Clear labels for all the tools in addition to iconography so that users can read as well as screen-readers.
Icons with text
Major iconographic buttons are accompanied by texts to ensure readability and understanding of the interface for all users.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop, I optimized the designs to fit specific user needs of each device and screen size.
“The mobile and website works seamlessly. It is good that the tools are mobile-friendly because I can use in on the go without the need to be with my laptop.”
Takeaways
Result/Impact:
​
The website collection of video tutorials and resources should provide productivity to users as they cut down their time on finding/viewing what they need endlessly. It is also made easier to organize and share the sources all in one place.
What I learned:
​
I learned that the problem I was trying to solve requires participation of many different stakeholders and require successful generations of contents for users. While the tools created along the design process align with different users' needs, they mainly focus on the needs of DIYers and architects who need these resources while on the job. This case study solves one part of the users' journey mainly.
Next Steps
-
Conduct research on how to further improve finding and viewing the tutorial videos.
​
-
Integrate information on the tools needed in the tutorials as to how viewers can use the tools and where users can purchase.
​
-
Find out what other resources and information the users need for collaboration with other entities like suppliers and contractors.
​
-
Find business opportunities to integrate commerce to the tutorials so that users are provided with what they need when they need it while businesses can provide the tools relating to the tutorials that the users seek.
Back to Top
Home
See Another