top of page
Side Cover.jpg
CoverPage2.jpg
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

Google

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

​

Project Overview
Laptop_Screen 04.png
Mobile Pixel 5 Just Black Screenonly.png
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
Empathy Maps.jpg
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.”

Happy Bunch - Desk.png
PERSONA:
Martha Rohe

“I love building things on my own and test out the products I sell. Tutorials about construction excites me.”

Martha_edited.png
Personas
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.

User Journey and Ideation.jpg

Mapping Kumar journey revealed how an organized construction tutorial website would be a productivity tool to increase his collaboration with coworkers.

Ideation
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
DigitalWireframe 05.PNG
Tablet
Mobile
DigitalWireframe 06 RWD1.PNG
DigitalWireframe 07 RWD2.PNG
Paper Wireframes
Information Architecture

Information architecture on designing the responsive website is mainly based on the need for easy searching and viewing tutorial videos.

Portfolio Project 2 - Information Architecture1024_1.jpg
Information Architecture
Light and Shadow
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

Portfolio Project 2 - Digital Wireframes1024_1.jpg

Horizontal scrolls of contents based on the topic users choose

Responsive Web Design for Tablet

Portfolio Project 2 - Digital Wireframes1024_2.jpg
Portfolio Project 2 - Digital Wireframes1024_3.jpg

Step by step tutorial transcript that goes with visuals

Responsive Web Design for Mobile

Portfolio Project 2 - Digital Wireframes1024_4.jpg
Digital Wireframes
Usability Study

I conducted unmoderated usability studies remotely with 5 participants.

Each study took about 30 minutes.

Usability Study
Affinity Diagram.jpg
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.

Filler 01.png
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.

​

Portfolio Project 2 High Fidelity Mockup.pdf 

Portfolio Project 2 High Fidelity Prototype1024_6.jpg
Portfolio Project 2 - Digital Wireframes1024_1.jpg
Mockups
Filler 02.png
Portfolio Project 2 - Digital Wireframes1024_3.jpg

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.

Portfolio Project 2 High Fidelity Prototype1024_7.jpg
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:

Contu(re) - Find and View Tutorial Videos

Hi-fi Prototype 01.jpg
Google Pixel 5 Menu.png
Google Pixel 5 Menu 2.png
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.

Accessibility
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.

Desktop02.png
Laptop_Screen 04.png
Google Pixel 5 01.png
Responsive Designs
Light and Shadow
Google Pixel 5 01 long.png
Google Pixel 5 02 long.png
Google Pixel 5 03 long.png
Google Pixel 5 04.png
“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.”
Desktop02.png
Mobile Pixel 5 Just Black Screenonly.png
Laptop_Screen 04 Clear.png
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. 

Takeaways
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

Next Steps
bottom of page