From 46118512b071e3f91869996a3b2e59a267a285d4 Mon Sep 17 00:00:00 2001 From: Yangshun Date: Sun, 6 Aug 2023 19:58:59 +0800 Subject: [PATCH] [Site] Nit fixes --- website/pages/coursework.mdx | 6 +- website/pages/coursework/mobile.mdx | 4 +- website/pages/coursework/product-design.mdx | 50 ++++++------- website/pages/coursework/project.mdx | 77 +++++++++++---------- website/pages/coursework/seminar.mdx | 48 +++++++------ website/theme.config.tsx | 3 +- 6 files changed, 99 insertions(+), 89 deletions(-) diff --git a/website/pages/coursework.mdx b/website/pages/coursework.mdx index 1962954..7bc8d7b 100644 --- a/website/pages/coursework.mdx +++ b/website/pages/coursework.mdx @@ -1,14 +1,14 @@ # Coursework Overview -## [Assignment 1 - Product Design](/coursework/product-design) +## [Assignment 1 — Product Design](/coursework/product-design) In this assignment, you will put on your designer hat and learn how to design a software product, and come up with ideas, features and designs. -## [Assignment 2 - Innovation Seminar](/coursework/seminar) +## [Assignment 2 — Innovation Seminar](/coursework/seminar) In order to build good and original applications, it is important to learn what other people have already done, and think critically about what is good and bad, as well as explore ways to improve and to generate new ideas. In addition, it is important to learn how to articulate one's ideas in a clear and succinct way both orally and in writing. The innovation seminar is designed to help students (i) identify innovative ideas; (ii) gain a better understanding of existing applications; (iii) learn how to present (or sell one's ideas) and (iv) learn how to articulate their ideas in writing. -## [Assignment 3 - Mobile Cloud Application](/coursework/mobile) +## [Assignment 3 — Mobile Cloud Application](/coursework/mobile) The high-level goal of this assignment is simple: a working Progressive Web Application that utilizes the capabilities of a mobile device and is able to persist the users' data in the cloud. Your task is to demonstrate that you can design and implement RESTful APIs, as well as build a Progressive Web Application that consumes your API. You can use any backend language and/or framework you desire. diff --git a/website/pages/coursework/mobile.mdx b/website/pages/coursework/mobile.mdx index f61c9c2..6ecde84 100644 --- a/website/pages/coursework/mobile.mdx +++ b/website/pages/coursework/mobile.mdx @@ -2,7 +2,7 @@ import { Callout } from "nextra/components"; import assignments from "~/utils/assignments"; import FormattedDate from "~/utils/FormattedDate"; -# Assignment 3 - Mobile Cloud Application +# Assignment 3 — Mobile Cloud Application {assignments.mobile.show_updating_notice && This assignment is currently being updated. Details are tentative and will be finalised soon.} @@ -713,7 +713,7 @@ UX is not just the job of the UI designer. Just like a good UI, you will know if ### Google Analytics -You should be interested in the usage statistics of your application. Google Analytics is one popular way to collect insights. It can be set up easily -- the following examples are using the `analytics.js` snippet, part of Universal Analytics. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services. +You should be interested in the usage statistics of your application. Google Analytics is one popular way to collect insights. It can be set up easily — the following examples are using the `analytics.js` snippet, part of Universal Analytics. We will discuss Google Analytics in the following section, but feel free to use any alternatives that you may prefer. More recently, there has been increasing focus on more privacy-centric website analytics services. If your application's interface is predominantly built with a JavaScript MVC framework, it is very likely that you have a Single-Page Application; one HTML page with all transitions handled by JavaScript code and URLs managed by HTML5 `pushState` API. Pages can still be tracked using Virtual Pageviews by executing the following code instead. Refer to https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications for more information. diff --git a/website/pages/coursework/product-design.mdx b/website/pages/coursework/product-design.mdx index 795b33a..1450b07 100644 --- a/website/pages/coursework/product-design.mdx +++ b/website/pages/coursework/product-design.mdx @@ -3,7 +3,7 @@ import { Bleed } from "nextra-theme-docs"; import assignments from "~/utils/assignments"; import FormattedDate from "~/utils/FormattedDate"; -# Assignment 1 - Product Design +# Assignment 1 — Product Design {assignments.product_design.show_updating_notice && The final project write-up is currently being updated. Details are tentative @@ -98,7 +98,7 @@ Whatever tool you choose, it has to be able to produce a prototype that fulfils -## Phase 1 - User Requirements Gathering +## Phase 1 — User Requirements Gathering Every good app/platform/website/service begins with a problem they are looking to solve for a target user. As this assignment is due on , we recommend you pick a target user who is abundantly available around you, e.g. your fellow NUS students. This way, you can easily conduct your user testing. @@ -151,7 +151,7 @@ Once you have listed these down, it is time to proceed to user interviews. The g -## Phase 2 - Prototyping +## Phase 2 — Prototyping After your interviews, list down at most three **primary user goals** your product should achieve. As a team, brainstorm features that would lead users to achieve these three primary user goals. @@ -229,7 +229,7 @@ Wireframes are ["low-fidelity" designs](https://www.nngroup.com/articles/ux-prot _Source: https://www.flickr.com/photos/anthonyarmendariz/4448219885/in/pool-1070674@N20/_ -Use any tool you want - we recommend just plain paper, markers, and pencil. At this point, we value speed over quality since you will likely need to change them based on user feedback, so use whichever tool that allows you to do up wireframes the fastest. +Use any tool you want — we recommend just plain paper, markers, and pencil. At this point, we value speed over quality since you will likely need to change them based on user feedback, so use whichever tool that allows you to do up wireframes the fastest. Whichever tool you use to design your wireframes, make sure you can "transition" from different screens and states easily. If you are designing on paper, this means using a different page for each screen and sticky notes for modals, popups and other ephemeral UI elements, and if you are designing on PowerPoint, make each screen or state a slide. When you create your design, keep your user personas in mind. @@ -242,7 +242,7 @@ Whichever tool you use to design your wireframes, make sure you can "transition" user. Please ensure that your wireframes are **low-fidelity**. -This set of wireframes will be shown to the user during testing. As such, keep a copy without the links between buttons and screens and without more than one screen showing at once - after all, users can't do that in the actual app! (You may add annotations or comments for your own reference, but remember to hide them before starting user testing.) +This set of wireframes will be shown to the user during testing. As such, keep a copy without the links between buttons and screens and without more than one screen showing at once — after all, users can't do that in the actual app! (You may add annotations or comments for your own reference, but remember to hide them before starting user testing.) ![Example Web Wireframe](./product-design/img/wireframe-web.jpg) @@ -264,7 +264,7 @@ These are some examples of user flows you may want to sketch out. In some cases, - When users login or use the app for the _first_ time, what do they see? What can they click on? - When users login or use the app for the _second_ time, what do they see? What can they click on? -User flows should naturally intersect with each other. This is fine - real apps do not artificially limit the user in the ways they can be interacted with. +User flows should naturally intersect with each other. This is fine — real apps do not artificially limit the user in the ways they can be interacted with. @@ -272,17 +272,17 @@ User flows should naturally intersect with each other. This is fine - real apps -## Phase 3 - User Interviews + Iterations +## Phase 3 — User Interviews + Iterations -Now it's time to put your draft design to the test! The test we are conducting is sometimes called ["Wizard of Oz"](https://www.coursera.org/lecture/human-computer-interaction/wizard-of-oz-9f0pI) - we will simulate user interactions by taking the place of the computer. This may seem silly at first, but it is an important tool to validate your design at this stage. Here is a video that shows an example of this form of testing using paper prototypes. +Now it's time to put your draft design to the test! The test we are conducting is sometimes called ["Wizard of Oz"](https://www.coursera.org/lecture/human-computer-interaction/wizard-of-oz-9f0pI) — we will simulate user interactions by taking the place of the computer. This may seem silly at first, but it is an important tool to validate your design at this stage. Here is a video that shows an example of this form of testing using paper prototypes. -
+ -
+ ### Playing the Wizard of Oz @@ -296,7 +296,7 @@ Now show the first wireframe they are supposed to see. Observe what they interac At the same time, keep an eye out for their body language. See if they looked hesitant or disinterested at any point in time. Perhaps, they had to squint and lean in to read certain text that was too small. A lot of times, the users will not report such issues as they would assume that the problem lies with them and not with your design. -For any buttons or screens that you have not designed, you can reuse any existing wireframes and tell the users what they should see - "You clicked the _School of Computing_ link. We don't have those screens today. So please pretend that you see results for the School of Computing on this screen. Okay?". Alternatively, you can describe the result of the action to the user in words instead - "You see a pop up open with a yellow warning triangle, the text 'This will delete your results. Proceed?', and the buttons 'Okay' and 'Cancel'". +For any buttons or screens that you have not designed, you can reuse any existing wireframes and tell the users what they should see — "You clicked the _School of Computing_ link. We don't have those screens today. So please pretend that you see results for the School of Computing on this screen. Okay?". Alternatively, you can describe the result of the action to the user in words instead — "You see a pop up open with a yellow warning triangle, the text 'This will delete your results. Proceed?', and the buttons 'Okay' and 'Cancel'". Remain as neutral as possible during testing. Only ask follow-up questions **after** the user testing session is completely over. This would be your chance to ask: @@ -325,9 +325,9 @@ After you have completed the testing, it is now time to review the results and i -As you iterate on your design, remember to refine your sketches and improve their quality. Be bold in your earlier iterations. It is perfectly normal to throw out entire screens at this early stage. With each iteration, you should solidify your design - while earlier iterations may require large redesign, later iterations should only produce minor tweaks. Of course, make sure these changes are well-substantiated and well-documented. +As you iterate on your design, remember to refine your sketches and improve their quality. Be bold in your earlier iterations. It is perfectly normal to throw out entire screens at this early stage. With each iteration, you should solidify your design — while earlier iterations may require large redesign, later iterations should only produce minor tweaks. Of course, make sure these changes are well-substantiated and well-documented. -## Phase 4 - Design Mockups/Prototypes + More Iterations +## Phase 4 — Design Mockups/Prototypes + More Iterations Now that you have the basic information architecture and user interactions planned out, it is time to add more meat to your wireframe. Convert your wireframe into a mockup using your chosen prototyping tool. @@ -353,7 +353,7 @@ If you are planning to work on a prototype, there is no need to submit the desig _Source: http://www.tifftam.co/goji/_ -A well-developed app has many moving components - login, sign-up, active, inactive states and so on. While you do not have to include every single possibility that your user will encounter, it should be sufficient for your users to test it satisfactorily. +A well-developed app has many moving components — login, sign-up, active, inactive states and so on. While you do not have to include every single possibility that your user will encounter, it should be sufficient for your users to test it satisfactorily. @@ -381,7 +381,7 @@ However, remember that the primary goal of the testing is still to observe the u With the previous draft's user testing results, you should come to a good conclusion on what your MVP should act and look like. The final **interactive** prototype should be complete and sufficiently detailed to be handed off to a developer to realise them. **Your prototype should include the onboarding, first use, and (if applicable) login flows.** Refer to Phase 0 instructions for the expected submission format for each of the prototyping tools. -Now, it's time to demonstrate how your app should work! Come together **as a team** (i.e., all members of your team should be present) and record a demo going through the happy paths of your application, i.e. the main success scenarios for your identified user flows. Keep the video short and sweet - give a short introduction about the problem your team is trying to solve before demonstrating the user flows. The video must be less than 5 minutes long and be submitted as a `.mp4` file. +Now, it's time to demonstrate how your app should work! Come together **as a team** (i.e., all members of your team should be present) and record a demo going through the happy paths of your application, i.e. the main success scenarios for your identified user flows. Keep the video short and sweet — give a short introduction about the problem your team is trying to solve before demonstrating the user flows. The video must be less than 5 minutes long and be submitted as a `.mp4` file. @@ -408,17 +408,17 @@ The broad structure of the PRD is as such: 3. Features (Milestones 4-8) - Describe each feature at the level of interaction designs and use cases - - Requirement traceability - identifying which requirements are in support of which objective + - Requirement traceability — identifying which requirements are in support of which objective - Metrics to be measured (Not covered in Assignment 1) 4. Schedule for Product Development (Not covered in Assignment 1) - Key milestones and overall timeline for product development -In particular, most of the PRD's importance is in the articulation of the product purpose (Milestones 1-3) and the features built to serve its purpose (Milestones 4-8). This is also what we are focusing on in this assignment. Hence, besides being mindful of how and why Assignment 1 is structured in this manner, you should also illustrate (to the best of your ability) how each feature addresses a particular aspect of a problem that your target user faces - what is known as requirements traceability - to demonstrate that your feature was developed and iterated with thought for the problem faced by the target user and not simply because it's cool or funky. +In particular, most of the PRD's importance is in the articulation of the product purpose (Milestones 1-3) and the features built to serve its purpose (Milestones 4-8). This is also what we are focusing on in this assignment. Hence, besides being mindful of how and why Assignment 1 is structured in this manner, you should also illustrate (to the best of your ability) how each feature addresses a particular aspect of a problem that your target user faces — what is known as requirements traceability — to demonstrate that your feature was developed and iterated with thought for the problem faced by the target user and not simply because it's cool or funky. For further reading regarding PRDs during your free time, feel free to check out this [link](https://svpg.com/assets/Files/goodprd.pdf). -## Phase 5 - Growth Hacking +## Phase 5 — Growth Hacking Growth hacking is defined as the process of rapid experimentation across a marketing funnel, product development, sales segments, and other areas of the business to identify the most efficient ways to grow a business. A common misconception about the term is that it has to do with coding. @@ -431,7 +431,7 @@ When should you launch a website for your app? If your answer is to launch only A landing page for an app that hasn't been launched should: - Explain what your app is about and aims to generate interest in it. -- Contain a form that allows you to record a visitor's information (e.g. email). Businesses often promise some sort of deal or promo for the first X users who sign up. Another smart marketing tactic is to allow users to claim/reserve their username on your product, which creates a sense of scarcity (e.g. [Cal.com](https://cal.com/).) +- Contain a form that allows you to record a visitor's information (e.g. email). Businesses often promise some sort of deal or promo for the first X users who sign up. Another smart marketing tactic is to allow users to claim/reserve their username on your product, which creates a sense of scarcity (e.g. [Cal.com](https://cal.com/)). Here are some resources and examples for building attractive landing pages: @@ -456,7 +456,7 @@ A landing page cannot effectively convert visitors into leads/users if there are Positive examples: - Make promotional videos. View past CS3216 final project videos [here](https://www.youtube.com/playlist?list=PL-0mdQVieeceaFm__nZYSQYzhDGF0C9Jg). -- [Griddit](https://www.youtube.com/watch?v=Jo_2aYXixqs&index=2&t=0s&list=PL-0mdQVieeceaFm__nZYSQYzhDGF0C9Jg), a live chat room app, got Prof Ben Leong to do an AMA using their service. +- [Griddit](https://www.facebook.com/griddit/posts/pfbid05iLEy2zMwY7N18yr5MzzaiyozHQPE2G2Z4kgHbQy4jiqtMjei56JxMrHizRo165ol), a live chat room app, got Prof Ben Leong to do an AMA using their service. - [Letterbox](https://www.youtube.com/watch?v=7TnnLeSPnhA&index=6&t=0s&list=PL-0mdQVieeceaFm__nZYSQYzhDGF0C9Jg) had a member going around the school on an Airwheel and giving out flyers. DO NOT: @@ -464,7 +464,7 @@ DO NOT: - Paste unremovable stickers on the benches of the School of Computing. - Put up posters in inappropriate places like restrooms. -Videos are not the only way to market an app - to obtain marks in the coveted 30%, think out of the box for non-disruptive, creative and effective marketing strategies. We want a well-thought-out marketing plan including details on how you would implement it. Your strategy must obviously be realistic, i.e. do not suggest giving out $10 to each user who downloads your app if you do not have a good plan of getting those funds or a millionaire on your team. +Videos are not the only way to market an app — to obtain marks in the coveted 30%, think out of the box for non-disruptive, creative and effective marketing strategies. We want a well-thought-out marketing plan including details on how you would implement it. Your strategy must obviously be realistic, i.e. do not suggest giving out $10 to each user who downloads your app if you do not have a good plan of getting those funds or a millionaire on your team. @@ -496,11 +496,11 @@ By , you should upload the following to Coursemology: - Your final write-up named `group--milestones.pdf` -- Your designs and testing results - zipped together - named `group--designs.zip` +- Your designs and testing results — zipped together — named `group--designs.zip` For submissions that are >1GB in size (which is the maximum upload size that Coursemology currently has), upload the zip file to Google Drive and submit a PDF file containing the link to your designs and testing results. Please make sure the last modified date time of your uploaded ZIP file on Google Drive is before the submission deadline. - + As a final reminder, you should have written answers for **six milestones**, **three or more drafts** comprising separate folders for the design, the user flows and user testing results and conclusions, **one final prototype**, and{" "} diff --git a/website/pages/coursework/project.mdx b/website/pages/coursework/project.mdx index f40962e..fa478ec 100644 --- a/website/pages/coursework/project.mdx +++ b/website/pages/coursework/project.mdx @@ -1,3 +1,4 @@ +import { Bleed } from "nextra-theme-docs"; import { Callout } from "nextra/components"; import assignments from "~/utils/assignments"; import FormattedDate from "~/utils/FormattedDate"; @@ -23,7 +24,7 @@ and will be finalised soon.} Since you have all survived the first half a semester of CS3216, you are now an expert in both product design and software product development. The Final Project is where you will showcase to the world (and the CS3216 teaching staff, since the Final Project is what will mostly determine your final grade) your creativity and talents. -For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the Student Grouping Google Sheet by . Each team is to submit a project proposal by (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester. +For the Final Project, you will work in teams of three or four (fewer is also allowed) to develop and deploy an application (mobile, web or otherwise) of your choice. You are allowed to team up with anybody you want (and mutually willing to work with you). You may also work with external parties. Please update your groupings on the {Student Grouping Google Sheet} by . Each team is to submit a project proposal by (Monday immediately after Recess Week) and the teams are expected to work on the Final Projects during the second half of the semester. Your team can design the whole application, but if the scope is too large to be completed in one semester and you intend to continue to develop your application for a business venture, you can implement a prototype with some basic (or limited) functionality to satisfy the requirements for the class. Please state such intentions clearly in your proposals. The teaching staff will evaluate your proposals carefully and provide you with our feedback within a week. @@ -56,12 +57,12 @@ If you decide to work with external parties, we do not have any official guide o Your team should submit a project proposal by . The proposal should be about 4 to 5 pages (maximum of 6) in length and address (at least) the following points: 1. Description of the application you plan to develop. -2. Justification for choosing this project idea. Briefly mention the 3 key points: "Problem is real? Problem can be solved in CS3216? Problem has impact?" -3. Project schedule: milestones and timeline, including an implementation plan and deployment plan. -4. Individual contribution and roles. Contributions and/or support from external partners, if any. -5. Long-term plan and business model (if applicable). -6. Marketing and strategies to be employed. -7. High-level design (e.g. modules, application logic flow, which technologies, i.e. HTML5, Native, Web Sockets to be used). +1. Justification for choosing this project idea. Briefly mention the 3 key points: "Problem is real? Problem can be solved in CS3216? Problem has impact?" +1. Project schedule: milestones and timeline, including an implementation plan and deployment plan. +1. Individual contribution and roles. Contributions and/or support from external partners, if any. +1. Long-term plan and business model (if applicable). +1. Marketing and strategies to be employed. +1. High-level design (e.g. modules, application logic flow, which technologies, i.e. HTML5, Native, Web Sockets to be used). ## Development of Final Project @@ -78,11 +79,11 @@ We have told you time and again to "go out there and talk to your customers", an Each team will be required to submit a progress report on . The progress report should include minimally the following: 1. Application prototype. Minimally as functional as what was achieved in Assignment 3. -2. Is your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule? -3. What were the problems/difficulties your team has encountered? How have you overcome them, or what plans do you have to overcome them? -4. Any changes to the application since the initial project proposal? -5. Assuming that your team has already deployed a prototype of your application, how has the response been? Any other new insights, plans or strategies your team has come out with? -6. Updated project schedule: milestones and timeline. +1. Is your project on schedule according to the milestones and timelines submitted in the initial project proposal? If you are on schedule, great! If not, why not? What is your team doing about the slip in your project schedule? +1. What were the problems/difficulties your team has encountered? How have you overcome them, or what plans do you have to overcome them? +1. Any changes to the application since the initial project proposal? +1. Assuming that your team has already deployed a prototype of your application, how has the response been? Any other new insights, plans or strategies your team has come out with? +1. Updated project schedule: milestones and timeline. A second progress report will be due on . The contents of which would be similar to the first progress report. @@ -96,12 +97,12 @@ On , each t At this juncture , you should have a preliminary website for your app up and running, even if it is not fully functional. You are expected to provide us with a URL, and the tutors will be using security tools to scan your site. You will be provided with a security report, and you are expected to address the cited issues for your final project. Clearly, if your project is very incomplete, very little will be found, but you then risk more bad things being found after your final project is submitted. We will be doing another round of security scanning after your final project is submitted. -## SoC STePs +## SoC STePS -In the last week of class, we will be holding a 4-hour poster session in the SoC student foyer on {assignments.project.is_poster_session_date_tentative && (TBC)}\*\* from 3pm to 7pm as part of the School of Computing Term Projects So/>wcase +In the last week of class, we will be holding a 4-hour poster session in the SoC student foyer on {assignments.project.is_poster_session_date_tentative && (TBC)} from 3pm to 7pm as part of the School of Computing Term Projects Showcase (STePS). -Each team is to prepare an A1-sized poster. The judges and other members of the SoC and NUS will turn up for the "show-and-tell". You should treat this session as a trade show to sell your projects as you will get a large percentage of your grading from "other people" - NUS staff, students, alumni, guests - who turn up at your booth. So your final grade depends very much on your show-and-tell in this session. Be creative. Collaterals are encouraged but note that these will be on your own expenses. +Each team is to prepare an A1-sized poster. The judges and other members of the SoC and NUS will turn up for the "show-and-tell". You should treat this session as a trade show to sell your projects as you will get a large percentage of your grading from "other people" — NUS staff, students, alumni, guests — who turn up at your booth. So your final grade depends very much on your show-and-tell in this session. Be creative. Collaterals are encouraged but note that these will be on your own expenses. Again, you can choose how you want to present your work. You can bring along other materials in addition to the posters, such as your iPads, or set up your laptops to do a demo also. We'll leave it up to you! @@ -109,11 +110,13 @@ Again, you can choose how you want to present your work. You can bring along oth Traditionally, every team is required to make a 1-minute video to be submitted to the STePS organising committee. Here's a playlist of past years' videos. - + +