Challenge C – Final

tanujd

Build Your Own Server: From Parts to Power

Authors: Ali Raffi, Tanuj Dargan
Updated: November 21, 2025

Our Final Website: https://buildaserveredci337.framer.website/

This resource would help learners (students, hobbyists, small businesses) to understand and complete the process of building a custom server, making IT infrastructure approachable with the help of clear explanations, multimedia and hands on activities.

PHASE 1: UNDERSTAND

DESCRIBE THE CHALLENGE

Building a server is often seen as complex and intimidating. Many learners struggle to identify the necessary components, understand compatibility, and navigate operating system setup and basic network configuration. This project will break down each step into manageable, accessible modules using visuals, video, and interactives.

CONTEXT AND AUDIENCE

Who is this for?
Tech Students: University or college students enrolled in IT or computer science studies. They have probably never actually created a computer, but they are aware of the theory behind what the hardware. Their classes have inspired them to seek practical experience.

Tech Hobbyists: people who are familiar with computers yet inexperienced with server hardware. They have a specific goal, such as creating a personal cloud or a Jellyfin media server. They are looking for an easy “shopping list” and a guide that helps them reach their goal without using a lot of technical jargon.

POV STATEMENT:

Learners who want to understand server assembly and setup in a hands-on, approachable way, accessible regardless of prior experience.

LEARNING OUTCOMES:

  • Determine the functions of key server components (CPU, RAM, storage, PSU, NIC, Cooling etc).
  • For different server applications, select appropriate and compatible hardware.
  • Build the server in an accurate and safe manner.
  • Install and set up a server operating system (Linux: Ubuntu Server).
  • Understand the basic principles of networking (IP addressing, granting access) and maintenance.
  • Identify common server roles, such as web hosting, file sharing, and video streaming.

PHASE 2: PLAN

IDEATION

Brainstorming Process

We first looked at the main pain points that face learners looking to create a DIY server: hardware compatibility, assembly and installation, network configuration, and long-term maintenance of the system. We referred to a “100 Days of HomeLab” challenge that challenges participants to touch and work on homelabs every day.

On a large sheet of paper, we drew out a mind map with three main branches: Hardware, Software/OS, and Networking/Maintenance. Subtopics were listed under each of these headings, such as under Hardware: CPU, RAM, motherboard, PSU, cooling; under Software: Ubuntu Server, virtualization, services; under Networking: IP addressing, access permissions, server roles. Then we used sticky notes to categorize which components need to be interactive, which video, and which quiz or hands-on activities.

View the Mind Map here: Click to view

We evaluated best-practice guides from hobby homelabbers to see how they communicated compatibility (i.e., which CPU socket fits into which motherboard) and avoided technical vernacular. In the end, we would combine an interactive part-selection quiz, step-by-step assembly video/photo tutorial, and network-setup animation with short quizzes to reinforce learning in our final resource.

At the start, we explored a couple of prototype ideas for teaching server assembly.

Prototype A:
A drag-and-drop activity where users pick parts for a virtual motherboard, get immediate feedback on their choices, and then watch short clips showing how the real hardware is installed.

Prototype B:
A story-based module where the learner acts as someone hired to set up a business server. In this scenario, they choose the hardware, put it together, install an operating system, configure the network, and select the server’s job (like file sharing or media streaming). This prototype included choices with feedback and quick quizzes.

We chose Prototype B because the story-based format makes the experience more engaging and gives learners useful context. It also allowed us to use ideas from Prototype A, like clear step-by-step visuals and parts selection.

Storyboard Outline (Website Sections)

  • Introduction: Title banner introduces the project. Brief overview explains what a server does and why learning to build one matters.
  • Why Use a Server?: This section clearly explains the benefits of having a server such as always-on access, storing files, or hosting websites and helps beginners see why someone would want to build one.
  • What is a Server?: This section briefly explains what a server is, highlighting its main functions in simple language so beginners can understand the basics before moving further.
  • Step-by-Step Build Guide: Each server part (motherboard, CPU, RAM, storage, power supply, case, operating system) gets its own section. For each step, there is a short explanation with easy-to-follow visuals and hardware photos.
  • FAQ (Common Questions): Expandable section at the end gives learners quick answers to the most common beginner questions. This keeps the main content uncluttered, but still provides help when it’s needed.

While our original storyboard included interactive scenarios and quizzes, the final site focuses on a clear, scroll-based guide with lots of visuals and step-by-step instructions, making sure beginners can follow along confidently.

Principles Applied

  • Coherence: Each section focuses on one main idea, letting learners go step-by-step without extra details getting in the way.
  • Signaling: Key parts and instructions are clearly labeled. Visual highlights help users find what’s most important on each page.
  • Modality: Images and short text explanations work together so learners get information visually and in writing.
  • Contiguity: Visuals and instructions are placed close together, helping users connect explanations directly with the hardware shown.
  • Redundancy Avoidance: Clear explanations are paired with images instead of repeating information or crowding the page with too much text.
  • Accessibility: The site was built with easy navigation and readable layouts to support learners with different needs. Expandable FAQ and simple visuals make sure everyone can find help when needed.

Phase 3: Prototyping

Design Process – Step by Step

  • Planning the Structure: We began by outlining the website’s main sections to align with our learning objectives which included – introductory overview, a step-by-step build guide, real-world examples, and an FAQ. We reviewed previous Framer projects to identify layouts or components that could be reused and adapted to fit the server-building theme.
  • Assembling Components in Framer: Using Framer, we combined elements from earlier prototypes with new sections developed for this project. Workshop plugins in Framer were applied to add interactivity, including the 3D card featured in the “What is a server?” section.
  • Sourcing and Editing Images: Server hardware images and other visuals were selected from Canva’s stock photo library. Canva’s background removal tool allowed us to tailor each image for a clean look that would blend seamlessly with the website’s overall design.
  • Refining Visual Elements: Custom notification-style boxes, highlighted content areas, and section headers were designed for easy navigation and quick understanding. We focused on color, spacing, and contrast to make sure everything remained clear and accessible.
  • Improving Text and Flow: We continually revised the instructional copy to keep the language direct and professional. We adjusted the order of some sections, simplified headings, and highlighted key points to help users grasp the material quickly and confidently.
  • Iterative Testing and Revision: The site was previewed regularly to check navigation and readability. We made small adjustments—like moving visuals, refining transitions, or updating the FAQ—based on feedback and ongoing review to keep the learning experience smooth.
  • Final Review and Polish: After building the main flow, we gave the site a thorough once-over to ensure consistency. Interactive features and animated sections were tested for effectiveness, while individual design elements were refined for a cohesive and modern look throughout the website.

Prototype Link: https://araffi.opened.ca/#challenge-c-build-a-server-prototype

Peer Feedback Summary

Ali’s Feedback from peers:

Peer Review – Evelyn:
Evelyn liked how the website breaks down the server-building process into smaller steps and the prototype’s clear structure. She pointed out how the content is accessible for beginners by using real hardware images and simple graphics. She added that the interactive flow improves the learning process and that the layout feels well-organized.

Since the final website changed from the initial prototype, I applied her suggestions directly to the new design.  I made the explanations easier to understand, improved the spacing between sections, and clarified each step. In order to help beginners understand the goal before starting the build process, I also improved the “What is a Server?” section.

I added additional details to the “Common Questions About Servers Answered” section in response to her suggestion to help struggling students. Without overcrowding the main content, this optional help section provides learners with additional guidance.


Peer Review – Hailey:
Hailey liked the prototype’s clear, well-organized layout and how it simplifies the server-building process into simple steps. She thought the use of simple pictures and clear instructions reduced confusion and made the material very accessible for beginners. According to Hailey, the smooth transition from one step to the next keeps students interested.

I included her recommendations into our new design even though the final website’s structure differs from the original prototype. By improving and simplifying the “What is a Server?” section for non-technical readers, I enhanced the introduction. In order to provide beginners with a better understanding of real-world context before to diving into the build steps, I also included more useful examples of server uses.

Tanuj’s Feedback from Peers:

Peer Review – Emma:

What I take away from this feedback is that using storytelling as part of our narrative structure and informal tone has effectively reduced barriers to entry for technical content. Secondly, I acknowledge the need to adhere to guidelines on Universal Design for Learning. As I tackle the particular feedback regarding accessibility and closed captions, I learned that our platform plays a significant part in meeting this criterion. Since we transitioned to using an entirely interactive website instead of video, I was able to implement this feedback recommendation more effectively, making it easier to implement features within this platform to ensure that it is more user-friendly for our audience.


Peer Review – Nico:

I understand from this review that my prototype effectively incorporates the concepts related to Contiguity, Feedback, and Personalization to ensure that technical hardware assembly can be accomplished by a beginner effectively. I appreciate how my review has validated my approach to drag and drop functionality and conversational style, but I also see where they can improve in terms of navigation and assessment to improve the structure of learning. Specifically related to how to improve on suggestions for Signaling and Segmenting, I learned about how important it is to map out the experience for the user and applied this to my website by using a center line tracker to track progress.

Reflect and Refine

To achieve our objective of presenting hardware assembly which is a a complex topic – to beginners, our group debated different formats and ultimately decided that an interactive website would best support learning. By selecting this platform, we could offer a scroll-based step-by-step guide where learners explore each part of the process in detail. Instead of relying on passive instructional videos, we prioritized direct interaction, visuals, and modular explanations that encourage active participation. Integrating features like image comparisons, structured progress, and clickable elements allowed us to better support diverse learning styles and drive engagement throughout the site.

Peer feedback played a critical role in shaping our final website design. Suggestions around Signaling and Segmenting helped us realize that learners needed a clear sense of progression through the content. To address this, we added clear headers, visual steps, and a logical navigation flow so users could easily track where they were in the learning process and access any section directly.

We paid close attention to Universal Design for Learning (UDL) principles throughout development. Moving away from formats that rely on captions or traditional video, our website-based resource made it possible to integrate a variety of accessibility features such as descriptive text, responsive layouts, and easy-to-read visuals, so that users with diverse backgrounds and needs could interact with the content comfortably.

As we applied the principles of Contiguity, Feedback, and Personalization to our project by maintaining our conversational tone and feedback features, we managed to create content that is both fun and informative. We are very proud to say that our end product not only explains complex hardware concepts but also meets lofty standards in terms of design.

Individual Reflection – Ali

The feedback I received during peer review for this server-building assignment was really helpful as it helped me stay focused on a creative/technical direction. It reminded me to keep theory connected with useful features and clear visuals and it helped me concentrate on making the website user friendly and accessible for everyone. After a few different redesigns and website updates on framer, I came to the realization that even small modifications to the content’s structure or the way steps are described can significally help new user’s learning experience. For example, I changed the what and why sections on the website and it made so much sense for a beginner to start with “what is a server?” rather than “why a server?”

I had a lot of room to experiment with the design, visuals, and interactive elements asI used Canva for images and Framer for the website. Making my own graphics and modifying them to match the site’s aesthetic forced me to come up with original ideas, especially when stock pictures were not enough. I was forced to use AI to create me pictures while I used canva + photopea to modify these pictures (such as remove backgrounds/ change texts etc) so that they matched the desired aesthetics. Each time I revised/updated a section, I found new ways to make complex ideas seem easy and not as overwhelming.

Working on every part of the project allowed me to see how design, arrangement, and clear examples work together to support students from different backgrounds. I learned the value of being flexible and constantly improving the project from testing pages with actual users. I became more skilled at designing courses and more aware of the little things that go into making a comfortable, effective learning environment as a result of working on this assignment. 

DISCLAIMER : AI was used in certain parts of the process and in creating the website on framer.
1) Gemini Nano Banana was used to generate the featured image for the Challenge C Prototype, which helped in achieving the desired aesthetic of that post.
2) ChatGPT was used for assistance in creating the notification-style boxes that appear in the scrolling animation at the top (Hero section) of the Framer website, making the elements visually distinct.
3) Chatgpt was used throughout the website to rephrase sentences and to have a more professional outlook on the wording in different sections.
4) Canva’s AI feature was indirectly used while using the background remove feature in canva.
5) Framer’s Workshop plugin was used in creating certain components such as the 3D card on the “What is a server” section of the website.

Individual Reflection – Tanuj

After reflecting on our journey from our original storyboard to the final version in Framer, for me, the biggest learning experience has been understanding how to implement concepts related to Universal Design for Learning. For our original project, I was only concerned about making our video content more accessible by adding captions to it. Then, with Emma’s comments, I was encouraged to look at our content from a completely new medium. So, I felt that by switching from our video project to create content on this interactive site, we are able to include so much more than we would on our original video project.

Another turning point for my design came from feedback on the Signaling Principle from Nico. Although I started out concerned with the engagement element of the drag-and-drop tasks, I saw how, absent any kind of guidance for navigation, it was very simple for learners to become disoriented within complex procedures. The addition of the center-line progress tracker is one method where this need was directly addressed, rather than being solely for aesthetic purposes.

Finally, working to balance the technological density of server hardware with Personalization ensured that this project was also a rewarding experience. Through maintaining our own conversational and informal tone, I am confident that we eliminated any intimidation factor that most likely comes with technology projects. This project has also taught me that quality education technology is more than just technology itself, whether it is AI or something else such as Framer.

DISCLAIMER:
1) Used Gemini Nano Banana 2.5 (Standard pre gemini 3.0 release version) to generate components used in storyboard.

References

  • Kaplarevic, V. (2025, November 19). How to build a server. Knowledge Base by phoenixNAP. https://phoenixnap.com/kb/how-to-build-a-server
  • Lynch, M. (2024, April 5). Building my first HomeLab server rack. https://mtlynch.io/building-first-homelab-rack/
  • Lab, V. R., & Lab, V. R. (2023, November 3). How to set up a server at home | Veepn Blog | Online Security and Privacy News. https://veepn.com/blog/how-to-set-up-a-home-server/
  • Linus Media Group. (2024). Your old PC is your new server [Video]. YouTube. https://www.youtube.com/watch?v=zPmqbtKwtgw youtube.com+1
  • Geerling, J. (2025). I rebuilt my home server — quieter, faster, and ready for 2025 [Video]. YouTube. (URL not located) jeffgeerling.com
  • https://www.istockphoto.com/photo/server-gm668285572-122027671 Isakov, D. (n.d.). Server with cloud symbol. iStock. https://www.istockphoto.com/photo/server-gm668285572-122027671