Web Design Project
Timeline: 10 weeks
Needfinding, User Research, AdobeXD, and User Testing
Background
For a Design Interaction course, I decide to create a webpage prototype dedicated to my dream truck, the Toyota Land Cruiser FJ & BJ40. The Toyota Land Cruiser FJ & BJ-40 series is an offroading legend built from the early 1960s until late 1984. Land Cruiser enthusiasts arond the world have long seen and appreciated this trucks enginuity. This Cruiser has been established as one of the worlds most reliable, most capable offroading vehicles of all time and remains coveted around the world. With the 40 series gaining in popularity amongst offroad and cruiser enthusiasts, the price to outsource an FJ or BJ40 restoration has reached an upwords of $200,000. Withe the growing pricetag of specialized classic automotive work, many have decided to learn to restore their own cars with the help of others DIY guides and conversion kit setups. Because the restoration of any vehicle is extremely detailed and lengthy process, it is not common or easy to find all the information you will need, start or finish, on one restoration site. There are a limited number of forums and database like websites that do a sufficent job making their wealth of information attainable or accessable to others in the Land Cruiser community. With this in mind, my goal was to build a webpage that will have done the digging and research for you, having links and infromation accessable all on one webpage every step of the way.
Problem Statement: The process of restoring the off-road legend, the original 40 series Land Cruiser, is the dream of many people around the world. But, there aren't any straightforward guides or centralized information on how exactly the ordinary FJ enthusiast can achieve this task.
A commonly asked question found on a FJ40 Reddit forum.
Need-Finding & Research
Needfinding and doing research for this project pushed me to get out of my comfort zone in order to engage with people in the Land Cruiser community and to expand my knowledge of automototive mechanics. Due to quarantine put in place, because of Coivd-19, I was unable to have direct contact with individuals who have experience restoring their own FJ40, but I started my search with the "Common Questions" section of forums, such as forum.ih8mud.com and FJ40 subReddit. Here, I was able to pin point some common road blocks people ecnountered during their restoraion. The questions asked ranged from knowing the right Land Cruiser to finding an engine that works best for their engine swap. Questions surround parts and specific system setups were particularly the most asked and viewed posts.
The most viewed questoins on the forum iH8Mud.com, referencing FJ restoration.
We see here, by plainly looking through these discussions, its common and more convenient for individuals to simply ask for where they can find proper parts or kits, rather than sift through the vast amount of information that is available on iH8Mud. I've found that people seem to feel that information is burried below page after page, so it makes more sense for others to simply respond with links to where they've found the answers through previous lengthly searches or a thread they had previously had been apart of.
The depiction to right is the Home page of iH8mud. There is no search function that is avaliable on this page. There is a section of tags, which only legably show the most popular forums. The less popular the thread, the smaller the texts gets, making finding less common information less commonly used by default. Only after clicking one of the other tabs do you get the ability to search. Though this site is great for having the ability to ask other Land Cruiser enthusiast and experts in the trade questions that holds a wealth of information, it's not an entirely easy to use tool.
The Home page for GearInstalls.com; a site with essential part conversion information.
Though nearly every bit of information anyone may need for a full at home restoration is can be found with a lot of time and patience, that is not iH8mud's purpose. So, I wanted to find a page that may come close in its amount of essential information for DIY at home restorations. One amazing source I found was GearInstalls.com. Gear installs has detailed step by step instructions for at home installations and rebuilds for components such as differentials, disc brakes , and even engine swaps. But, sifting through the numerous amount of information available is quite a chore. After reviewing a number of other Land Cruiser focused site, I saw that none of them made it easy for their users to utalize their sites to the best of its ability.
Though I personally contacted a few people over social media (one via mail), I received only one response. This response came from a well known YouTuber in the Land Cruiser community, who shares his FJ40 restoration journey and troubles on a YouTube vlog called “Project Wrong Way.” I was able to ask him a could brief questions about his restoration experience and how it can me improved.
1) Is there any resource you wish you had available during your restoration process?
2) Has there been a part of your restoration where you couldn't find what you needed through online resources or had to consult with a friend in order to find the answers or resolve a problem?
Below was his response to these questions.
There is a statement in Bengamin's email response that seems to perfectly summerize the user issue I was observing throughout my research. His restoration would "have been much easier if [he] had a quick resource to show [him] exactly what parts [he] needed and where to get them." This became my main goal for this project. Helping individuals know exactly what parts they will need and possibly where these parts would be available would be a pain reliever for many individuals in the Land Cruiser community.
With the information and perspective I gained through this research, I was able to understand that there was a need for more clear and accessable information for individuals to refer to during their restoration journey. With not much interaction with those who strive to complete their own at home restorations, I felt a user persona would help me to zero in on the needs. This would help me keep in mind the experiences of real users who are in need of better centrailzed resource sites.
Prototyping
After gaining a clear understanding of the user need, I was able to focus on creating a site that could begin to fill this need. I started this process by first creating a thought flow, so that I could have a broad understanding of what does and does not need to be on this new FJ/BJ40 focused site. Not having any experience with car repair or not even having the base level knowledge of how cars worked became a large challenge early in the start of this prototype. Thankfully, I had the help of a friend who worked as a mechanic and managed several shops for over 6 years. With his help, I was able to put together a thought flow chart that included the most baseline information I felt I could suffenciently discuss in the timeframe I had.
Each pink sticky note represents a page title and tab, which are Starting Point, History, Components & Parts, and finally Resources. Bellow those are blue sticky notes, which represent the subsections for the corresponding title page. Each of the blue sitcky notes would incompass detailed information on the topics below them. Once I had a clear idea of what content would be avaiable on the page, I began by drawing a low-fidelity prototype. This, in turn, helped me to gain perspective on how the site would flow.
The difficulty in usuability and clearity we discussed with forum.iH8mud.com and GearInstalls.com was a motivating factor when thinking of the function of my low fidelity prototype. With iH8mud and GearInstalls.com initially not having an available search function, I wanted to ensure a search function for my prototype was clearly seen and accessable from every page. With such a information based website thats most likely going to be extremely wordy, I was finding it a challenge to visualize the main design of the content pages. But, despite my uncertainty, I had a clear understanding that what was important in this process was making sure the flow of the site was functional and easy to use. Another student had gievn me the suggestion to add a before and after picture, so I added a feature where the user can click and drag the small black ball (a slider function). This would allow the user to see the before and after picture simultaneously. I also added a simple picture of the FJ40 that allows the user to click a part of the truck and be taken directly to that area's information. The object underneath the pop-up box is blurred so that the information on the pop-up is the focus.
Design & Flow Testing
I was able to test the low fidelity wireframe only a few people, but their feedback was curtial in the improvement of my design.
My dad’s feedback was very minimal. I would ask about specific features such as the layout and ability to navigate between interfaces and he would simply say “looks good.” He breasily clicked through the webpage and handed me back the computer once we viewed each page. Due to the fact that it is often very difficult for him to meneuver through webpages, this was a clear success to me.
My mom’s feedback on the other hand worked in usability testing for over 20 years and is very thorough in her review and very clear in expressing her thoughts. On the home page, the first interaction she took issue with was the click and drag function that would show the before and after. Though the user could click and drag the dot, she expressed that the simple black dot and the line did not clearly relay it’s function. Simply put, she felt that users would not intuitively know what the purpose of the click and drag function was by simply looking at it. My mom also felt the page titles, seen in the navigation bar, should be listed sequentially. She made a valid point that Components was a much more important feature than Resources and should therefore be listed before the Resources tab. She added the history should also be listed closer to the end of the line, sense most users are there for information on restoration, not the history of the FJ Land Cruiser.
Kaspar’s feedback was very honest and exponentially helped me to improve some details going into the high fidelity prototype. 1) The first key characteristic he noticed was the sizing of the images and text in the wireframe. He stated that the sizing of the content on the home page were not the standard size of an ordinary website. 2) He felt there was a consistency issue with the navigation bar location. He noticed the navbar was below the main comparison image on the Home page, but at the very top of the screen on the rest of the pages. 3) I also asked his opinion of the load-like styling of the difficulty ranking and he felt that these could be very useful if done well and with cleaner styling. His input led to me making the navbar consistently at the top of the page and bettering the sizing, as well as the spacing in all of the pages.
Design Inspiration
Initially, I really struggled trying to find the design direction I wanted to go in. I wanted a nice and simple design that could visually represent the building, and connectivity involved with Land Cruiser restoration; this is the thought I tried to keep in mind. I also tried to base the site's colors around the colors of the Land Cruisers I used on the page. A lot of pinterest and articles were involved to try and grasp a better understanding of good and easy to navigate web designs.
I was able to find a webpage (seen on the left) that was beautifully designed and was Land Cruiser inspired, but had a few animations and features I felt were counter intuitive. This site has a beautiful background and great sketch-like picture of the Land Cruiser. The one feature I was odd was that thought it has arrows to the left and right of the screen, the next photo of a different car pops up from the bottom of the screen. That odd occurrence made me very careful of small inconsistencies such as that in my own project. Something that influenced my design from that page above was the soft colors that really made the Cruisers stand out. That’s something I attempted to integrate within the design of my prototype.
The Home page was more of a challenge for me to design compared to the other pages. I think this was due to the fact that I had to make more stylistic choices to make rather than functional. I wanted there to be a clear separation between sections on the Home page, so I made use of layered rectangles of different colors. There are design aspects I was unsure of, but I was able to gain more feedback through more user testing, which undoubtedly helped me to make better design decisions. I was really disappointed that I was unable to find a picture of an unrestored FJ in the same angle and direction as a restored FJ for the before and after slider function. But, nonetheless, I’m going to keep searching.
Feedback from additional User Testing.
Additional user testing helped to make final changes to the webpage design. Commonets on the text readability on the "Starting Point" and "Components & Parts" page lead to a bluring of the background that overlaps with any pictures or section boxes. This has decreased the possibility of the background being a distratction to the material, therefore, increasing readability. I also made to some adjustments to roundness of the the corners of the boxes containing text. Because containers with very rounded or circular ends are often used as buttons or clickable functions, it is better for me to use a container such as that is not so easily confused with a button or icon. By squaring off simple text containers and leaving the clickable components rounded, this should give the user a better indication as to what containers are clickable or buttons and what containers simply contain text.
Final Design
When choosing colors for each page, I picked the first couple of base colors from the pictures of indivdual Land Cruisers seen on each page. From those couple of base colors, I blended, lightened, and darkened to find different variations of the same colors. I feel that the layering gave an added element of depth. The toned down variations of the base colors complimented the FJ40s and BJ40s found on each page, really making the Land Cruiser the star of the page.
