Case Studies
Vue ToDo App Re-Design
About the App
This app was a school project.
Using Vue.js I developed a functional To Do list.
I started from conception, taking project specifications and designing the layout in a wireframe.
Then I created a mock-up of the main list and editing features, before developing the app.
Since I’m fixing up my portfolio, I took some time to re-design some elements. Here’s a look at some of the changes I made :
2018 Design
2025 Re-Design
Design Changes
Added a new color for CTA and warning labels to stand out more.
Added a cancel button to the Edit Screen.
Moved filter options together into one link that will trigger a pop-up menu with more filtering options.
Moved new filter link to fit better with main filters (Complete and Incomplete toggle).
These are just a few quick fixes to my old project.
Some other additions to consider would be :
Changing the delete icon in the edit screen into a trash can.
Adding theme changes.
Showing character limit for task descriptions.
Change the date format to be more legible.
Adding a way to customize tags.
New palette overall for the main design.
Website Style Guide Re-Design
About the Style Guide
This was a project to create a style guide for a personal portfolio website. The site was meant to showcase our projects completed during our studies.
The initial design shows some styling specifications for the website. I was inspired by a sunset color palette. The overall feel of the site was meant to show a balance of structure and creativity
Style Guide 2018
Style Guide 2025
Design Changes
• Lowered the amount of orange in the gradients, so it wouldn’t clash as much.
• Used the orange as a Call to Action button style, rather than a gradient.
• Added more white space to allow viewer’s eyes to rest.
• Used social media icons instead of text links.
• Included a sample of a contact area in the footer.
• Added clarity to font specs by adding a few more usage details.
