Account Settings Improvement Design

[SonyaCode]

Increasing Access

This Account Settings improvement design would make p5.js web editor more user-friendly. Users would have more control over their accounts in terms of personalization, security, and privacy.

Feature enhancement details

Link to Hard-Coded Prototype
Link to the Figma Design

In this improved design, the added features are:

1. Profile Picture

• What it does: Users can personalize their account by choosing their own profile picture. That may lead to a potential additional storage cost. If that is a concern, we reduce storage cost by creating several default profile pictures that users can choose from instead of allowing users to pick any profile pictures they want.
• Why it is beneficial to add this: Profile picture adds a personal touch to the account and humanizes other users. When exploring other people’s art, users can see the profile picture instead of just a plain username, which allows users to feel more connected with other users.

2. Multi-Factor Authentication

• What it does: If the user enables multi-factor authentication, a generated code will be sent to their email every time they try to log in and they would need to enter the code to log in successfully.
• Why it is beneficial to add this: Multi-Factor Authentication strengthens the security. Unauthorized users will have a harder time logging into the account.

3. Private Account Setting

• What it does: Users can choose to set all the sketches to private or public by default. There should also be an additional feature where users can set individual sketches to private/public.
• Why it is beneficial to add this: Private Account Setting gives users more privacy, and allows unfinished sketches to be hidden as private.

4. Data Backup

• What it does: Users can save all of their codes in a zip file.
• Why it is beneficial to add this: Data backup allows users to access their code offline and save their code after account deletion.

5. Account Deletion

• What it does: If the user no longer wants their p5.js web editor account, they can delete their account permanently. In case of accidentally clicking the button, there will be a confirmation screen, asking the user to enter their password to proceed. For users who sign in by connecting to their Google account or GitHub, it is better to send an email to the user and ask them to click on a link as confirmation.
• Why it is beneficial to add this: Account deletion allows users to control whether or not they want to leave their personal data and digital presence in p5.js web editor.

The confirmation button is disabled.

After entering the correct password, the confirmation button becomes enabled.

6. Email Notifications

• What it does: If the user wants to keep up with p5.js newsletters and updates, they can check the checkboxes and receive newsletters and updates through email. Processing Foundation may have to upgrade its email plan, which may increase the cost.
• Why it is beneficial to add this: Email notifications keep users updated with p5.js.