Innovation Design Welcome Doc [OUTDATED]

Responsibilities

Project hub

UX Teams

Culture

Resources

Explore

Responsibilities

Processes

EdPlus build process

From start to finish

As the central UX and Design team to all of EdPlus we work with a lot of different teams and disciplines. The following material covers the process a web project takes from beginning to end.

It's important to understand this process and your place in it in order to better understand your work and the process as a whole.

⁠

Key design responsibilities

Discovery

Creation

Testing

Other processes

Approvals

Step 1: Once the design is finished, share the deliverable (mockup, file, pdf, etc...) with the stakeholder in the corresponding JIRA ticket. Tag the stakeholder and your supervisor in a comment in the ticket.

Step 2: If the stakeholder doesn’t respond within 24 hours, send a slack message informing them there’s an update in JIRA.

Step 3: We try our best to limit our stakeholders to 2-3 rounds of feedback because any more than that can get tedious and frustrating. If they have feedback and we agree with it, we will make the changes and follow up once those are done. Once there’s no additional feedback, we package the final files and share those over either in the JIRA comments or a shared Google folder.

Style guides and theming

Web development style guides are really important to create alignment between design and development. On every project, there’s a brand and a set of guidelines we need to adhere as designers. The same is for development and it’s our job to translate those brand guidelines into development terminology.

Here are a few great articles to better understand style guides, tokens and theming.

MUI⁠

has a lot of great resources on theming as well.

⁠

Creating a UX design style guide for your team⁠

Design Tokens beyond colors, typography, and spacing.⁠

Customizing Material – Material Design 3⁠

⁠

Important tokens to define:

Color

Typography

Spacing & Padding

Borders

Shadows

States & Actions

Buttons

Icons

Other unique styles

Example style guide

⁠

MACS Web Style Guide MACS Intelligent Tutor Web Ecosystem Style Guide The goal of this document is to provide a source of truth for design foundations in the web ecosystem within the devetry wrapper and gradarius iframe. The foundations outlines in this document are based off best practices for design systems. For th... docs.google.com⁠

⁠

Design QA

This is the final step in the web process outlined in the

Web Design Checklist⁠

. Everytime we create a new website or make edits to an existing website, we need to ensure the quality of development matches the quality of the approved design. The approval process takes a lot of time and effort, so it’s crucial that the final product reflects our stakeholders expectations.

Design QA is where we analyze the website on a staging environment and we compare it to the design mockups or prototypes. At EdPlus, we have a functional QA team lead by

Ramya Rao⁠

that assists with the functional side of QA (bugs, glitches, etc.)

Key tips:

Remember to take screenshots of unexpected styles or behaviors

If you notice a bug, it’s best to take a screen recording and share that with development

Always test on mobile and desktop, unless the product specifies otherwise.

Example QA document

⁠

MACS Terms, Survey Design QA MACS Terms, Survey Design QA Testing from 7/22 Sign in views Status: ⛔️ Please update the ‘Change password’ page to be consistent with these styling requests. This was not in Leia’s slack to me, but I noticed it was recently updated and it needs to reflect the same style. Sign in Border radius o... docs.google.com⁠

⁠

JIRA

Project management tool

We use JIRA to manage projects from start to finish. We do biweekly sprints, daily standup meetings to discuss project updates, and sprint review to review any accomplishments.

⁠

Go to JIRA

⁠

Google Drive Team Folders

All project docs and files are stored in a Google Shared Drive. Join our

Google Team folder⁠

and create a new folder for your projects and work. This is also a great place to find inspiration, other working files and resources from other team members.

Slack

We use Slack as our primary tool for communication within EdPlus and to other ASU.

We compile all our new and old projects into one repository so everyone can see what everybody’s doing. For a look at more work check out the #xd-link Slack channel.