Design For Others

Summary

Redesigning some of the pages of the website “Technocopia” was a task with a variety of goals that needed to be achieved. The overarching aim of this mobile version of the pages from Technocopia was to modify both the presentation, and contents of the website to appeal to an audience of retirees who are amateur sculptors, carpenters, or metalworkers. Therefore, our design objectives were tailored after what made most sense for our audience, some of those included: making the navigation layout as user-friendly as possible, and making the text as readable as it can be on a smartphone screen.

Contextual Inquiry & Task Analysis

Before being able to discuss what design choices and graphics we should utilize, we first needed to pick one of the three sites that were offered to us. Since we were prompted with an audience comprised of retirees who are amateur at handcrafts, we decided that choosing the website “Technocopia” would be the most fitting option for the aforementioned audience. Once that was established, we proceeded to narrow down the website’s pages that were most fitting for our situation. After some discussion, we settled for:

1. The homepage, as it is a basic requirement and sets the mood of the website.
2. The menu page, as it is a basic requirement for navigation.
3. The “Directions / Parking” page, since it would make sense for the user to know where they should go if they wish to partake in the activities offered on the website.
4. The “Our Tools” page, due to the fact that most handcrafting enthusiasts may want to become familiar with the type of equipment that they might encounter if they choose to visit the Technocopia facility.
5. The “Tool Training” page, as it might be the case that amateur retirees have the free time to take lessons to improve their skills when utilizing the machinery in the facility.

After everyone in the discussion agreed with the decisions listed above, we began the sketching process.

Sketch, Ideate

The initial sketches for our paper prototypes were mainly to test how the user would navigate the individual screens, and how each screen would interact with each other. We tried to avoid “dead ends” on pages, meaning that we aimed to always include some sort of link in every page that re-directed the user back to the homepage or to the menu page. Since these rough sketches were mainly created to emphasize navigation, the details and contents of the pages did not get introduced until the later stages of the design.

Figure 1: Initial rough sketches of 3 our pages.

After the paper prototype, while we were brainstorming ideas of how to tailor our website’s design to our audience, we considered things such as page content and organization, text density, text font and size, color scheme, and relevant content, among other things. For text size we decided to go with relatively large fonts because older users generally have trouble with their eyesight. Along a similar line of reasoning we had started with a curly font, but decided to to switch to a clear and easily legible one. Another design choice based on the age of the potential user was in the menu bar. In order to appeal to both retirees who are familiar with technology and not, we had two labels on the menu bar. One which spells out what the bar is a menu and the other is the standard image containing a line with three bars, representing an expandable list of options.

In order to make page headings stand out more we decided use the principle of contrast by changing the text color to orange, bold-facing the text and increasing the font size. For subheadings we did the same process, but without the color change. We also decided that because we were targeting an older audience we did not have to severely limit the amount of text in a continuous block, as would be the case with a young demographic. Another design choice that our group made was to leave most of the color palette from the website the same because it was comprised of earthy and wood-like tones, reminiscent of the types of handcrafts visitors would be interested in, such as carpentry or sculpture. The same color palette was used throughout all of the pages to utilize the principle of repetition.

Color Scheme:

Figure 2: Website color palette.

Moodboard:

Figure 3: Moodboard for the mobile website.

Evaluate (Prototypes)

Paper Prototype:

The day of the paper prototype offered our team useful insight as to know a real user may interact and navigate within our mobile website. Every member from the visiting groups seemed to be able to navigate through the website by using the prototype without any issues. Team 13, who requested the members of our team remain quiet, praised our layout and was able to navigate each page freely despite us not saying anything during the duration of the testing. The only minor change that team 11 encouraged us to make was to either to remove the word “Menu” or the hamburger icon from the menu task-bar, as it may confuse the user and cause them to be unsure of which option to tap on to open the menu page — Dr. Roberts suggested otherwise.

Figure 4: Part 1 of the paper prototype.

Figure 5: Part 2 of the paper prototype.

Figure 6: Our classmates testing our paper prototype.

Figure 7: Our professor testing our paper prototype.

Demo:

On demo day we had a fairly satisfactory outcome. Of the four groups, three of them guessed at least a part of our target demographic. With one group guessing that we were targeting an audience with skills in engineering, another guessing that we were targeting relatively older people and another guessing that we were targeting retired people skilled in handcrafts. Team 2, who guessed we were targeting teens/engineers, reasoned that they had technical expertise because of the color schemes used and the long list of tools without images on the our tools slide. They also believed that the group could be teens because of the tool training slide being all images. Team 10 guessed that the audience was older engineers. Some of their reasoning for choosing this age group was the larger font size because older people have bad eyesight and the content of the our tools page focuses solely on the types of tools Technotopia has available. The only group that was wholly incorrect in their guess was team 14, which believed we were targeting people in their 30’s. Their reasoning was that we focused on the tool training and our tool slides meaning that users might have some experience with using the tools listed, but not have experience with them, which is why classes were included. They believed this implied someone early on in their career, effectively their 30's.

Additionally, the testers were able to navigate without any issues, and the overall website layout was well-received. Yet we still obtained feedback that made us rethink some of our early design choices. The main piece useful feedback that we got was that some of our fonts differed among pages, so we needed to ensure that we used a consistent font across the entire website (repetition). Some of the other feedback pertained to the colors picked for our headers and sub-headers throughout; specifically, there was not enough contrast in between the header and the background in our tools page (see Figure 11). So we changed said colors in the “Our Tools” and “Directions / Parking” pages.

Furthermore, the menu page underwent major changes, as we needed to include drop-down menus within it, despite not all of the options being working links. Also, the text in the menu was too light in color and did not effectively contrast with the orange background, thus establishing another change that needed to be made for the final prototype.

Finally, the “Tool Training” page. The testers were satisfied with the page layout design, but pointed out that the font should be enlarged, and the pictures and descriptions aligned. However, we chose to break the design principle of repetition in this page, to make the screen more aesthetically pleasing.

Figure 8: Testers navigating our prototype.

Final Results & Changes Made

Figure 9: Changes to our homepage from demo day to our final prototype.

Figure 10: Changes to our menu page from demo day to our final prototype.

Figure 11: Changes to our directions page from demo day to our final prototype.

Figure 12: Changes to our tools page from demo day to our final prototype.

Figure 13: Changes to our tools training page from demo day to our final prototype.

To view the entire mobile website please refer to the following hyperlink: https://projects.invisionapp.com/share/HFOXF5LEUBV#/screens/330035143

Conclusion

Overall, the design process that we followed to adapt the original version of the website to a mobile platform guided the development of this project. By deliberately thinking about our design decisions, we ensured that every change done was meaningful and was also accompanied with the purpose of improving the user’s experience. Additionally, the feedback that we were provided with during the prototyping stage was useful and geared the improvements done to our website’s design.

The strengths of this mobile site mostly revolve around the ease of navigation that our layout and menu page offered. None of the tester’s had any issues when navigating the website, which indicates that the layout was effective and did not interfere with their testing. Additionally, the mood and tone of the website fit and appealed to our audience. Despite the mobile site’s color palette being identical to that of the original site, we reasoned that this already was a design choice that appealed to our audience, thus we kept it, and focused on modifying the graphics instead. This not only preserved the integrity of the original website, but also allowed us to steer our time and resources into improving other aspects of the website, like (as mentioned above) the layout.

However, there are still weaknesses present in this final prototype. One of them includes that not all of graphics and texts are “truly” aligned from page to page. Due to the fact that we were all working on different machines, we could not quite ensure that every change made on every one of our ends was perfectly aligned with the other person’s. Therefore, despite this being barely noticeable at times, it is worth mentioning, since it may compromise the professional appearance of the site. Furthermore, one thing that could’ve been added if there was more time would have been the ability to continue viewing the menu bar button at the top of the page as the user scrolls. This was suggested to us during the paper prototype and it could go a long way to making the website more user friendly, by always having the other pages easily accessible without having to go to the top of the page.

Ultimately, this project was insightful and eye opening to the entire process of adapting websites to mobile platforms, and even developing one from scratch. Appealing to our audience proved to be the main priority when thinking about our design decisions, and we hope that if a member of our audience ever gets the chance to try our website, they have a pleasant user experience.