During my Lucasfilm internship, I also helped redesign and implement frontend improvements to production websites using Figma, TypeScript, React, and Next.js.
Website 1: Redesigning submissions page
The first website I worked on enabled producers to review and edit takes in production environments. I was tasked with redesigning the submissions page, which is where the website would navigate to after the producers have submitted their takes.
Initial Design
- Multiple pages contain overlapping information, including status, id, and takes
- Unclear exact purpose of submit button
- Pull request never shown in the rest of the site
- List layout looked messy
Mockup in Figma
- Combined the information into a single table
- Moved the submit button to the specific row in the table, which would be submitted (also renamed the button to "submit to farm" to make more understandable)
- Renamed title to "Submissions"
Feedback and Redesign Part Two
- The product manager liked the designs, but explained to me that one submission may include multiple sets of takes, each of which would have a different render ID and submissions stuatus.
- I knew that I wanted to keep the information on a single page and in a tabular format. Because render ID and submission status would be individual to each take within a submission, I extracted those into a sub table within the main submissions table.
Final Implementation (using TypeScript, Tailwind)
- After confirming my updated design with the product manager, I implemented the changes in the website using TypeScript and Tailwind. The website is now used in production with my designs!
Website 2: Color Accessibility and Header Redesign
The second website I worked on was used to visualize a job's status in being rendered. Initially, I was tasked with just updating the header. However, after opening the site, I realized there were some problems with color accessibility for the site and asked to help out with that as well!
Initial Design
- Header formatting could use a pass to highlight useful information about the render job and user
- Colors aren't consistent with web accessibility standards
- Tooltip when hovering over nodes was ill-formatted (no background, just pure white text), overlapping with the nodes above it. Sorry I don't have an image :(
- Here I mainly focused on creating a color palette that aligned with web accessibility standards. (first is original, second is my proposal)
Final Implementation (using TypeScript, Tailwind)
- After confirming my updated design with the product manager, I implemented the changes in the website using TypeScript and Tailwind. The website is now used in production with my designs!
- See the updated color palette, the revised header, and the newly formatted tooltip!
