Project Duration: 6 weeks
Role: Lead designer
Platform: UW Madison UI/UX Boot Camp
Tools: Adobe Illustrator (logo design)
ProjectIntroduction()
{
Crush 40 is a band that is most famous for their compositions in the Sonic the Hedgehog video games.
}
ProductOrBrandBackground()
{
Crush 40 started as a pair of composers working to create the final boss theme for Sonic Adventure 1 in 1998. From there, they formed Crush 40 and composed songs for several future Sonic games, though their logo didn’t change much after the band initially formed.
}
BeginningOfProduct()
{
When it came to rebranding Crush 40 and updating their logo, the main research I did is into what kinds of songs Crush 40 composes and their typical means for composing those songs.
What I learned is that their songs are predominantly rock and metal, and they typically use a guitar and vocals when composing songs.
}
MakingTheProduct()
{
Because Crush 40’s main instrument is a guitar, I wanted to create a new logo design that incorporated this somehow. I also wanted to keep the original style of their old logo- their name with a circle around the 40.
I eventually came up with the idea of having a guitar surrounding their name, serving almost like an extension of the circle in their original logo.
The color palette I used, red and black/white, was chosen due to Crush 40 being a rock and metal band.
}
FinalNotes()
{
I’m pretty happy with how this new logo turned out!
I think for future visual rebrands, though, I might try and play around with larger color palettes more. For this one, I only really used three colors, and two of those were just black and white.
}
Project Duration: 9 weeks
Role: Lead designer, prototyper
Platform: UW Madison UI/UX Boot Camp
Tools: Pencil & paper (sketches), Adobe Illustrator (wireframes), Figma (prototyping)
​
ProjectIntroduction()
{
BreakTime is a mobile app designed to help users break away from social media addiction by rewarding them for limited social media use.
}
ProductOrBrandBackground()
{
BreakTime was created by myself and three teammates for a project in our UI/UX boot camp. Each of us created our own takes on the same app concept, though we all worked together to brainstorm what features the app would have.
}
BeginningOfProduct()
{
The first thing I did when creating my version of BreakTime was sketching out the project and all the necessary screens.
My initial sketch contained three screens- a sign-in screen, a main dashboard, and a goals tab. From there I created a wireframe which had mostly the same features, except that the order of elements on the main dashboard was changed, and the user’s point count was moved to the top bar.
}
MakingTheProduct()
{
When it came to prototyping BreakTime, I made a lot of changes in just the mid-fidelity version alone.
The biggest change was the addition of proper screens for the points shop and goal creation, as neither of them had proper screens in the sketches or wireframe. I also removed the points shop button from the goals page, moving it to the navigation menu with everything else. I even added a page for the user to view their friends in the app, as well as adding error popups when the user tried to access a section of the prototype that was not implemented.
Going from mid-fidelity to high-fidelity, I made even more changes! Aside from the addition of colors and a proper app logo, I added user profile pictures, implemented a way to add and challenge friends, and gave some buttons in the app icons.
}
FinalNotes()
{
While I am overall quite happy with how BreakTime turned out, I do wish I had more time to implement some elements that had to be left with error popups in the high-fidelity.
The user is currently unable to pull up their or their friends’ profiles, and they can’t access the settings menu either. There also isn’t a way to get the error popup for being unable to find a user with a given username when searching for friends to add, though because that is more due to Figma limitations I’m not as bothered about that.
}
Project Duration: 3 weeks
Role: Copy editor, UX designer
Platform: UW Madison UI/UX Boot Camp
Tools: Figma (wireframes & prototyping)
​
ProjectIntroduction()
{
For this UI/UX group project, the class was split up into groups of 4 and we all worked on one prototype together. Our group chose to redesign Nike’s SNKRS app for this project. Do note that our group is not affiliated with Nike or the SNKRS app, and we did this project essentially for fun.
}
ProductOrBrandBackground()
{
The original SNKRS app was effectively a way for Nike to announce new shoe releases. The design brief for this project was to add a new feature to the SNKRS app that allowed users to connect in a similar fashion to the Reddit forums.
}
BeginningOfProduct()
{
Our group started by brainstorming how we would want the new feature to work.
Once we had come to a decision on what the feature should look like, we began working together on creating the mid-fidelity wireframes of all of the necessary screens. We kept the shop screen from the original app, and added new screens for the user’s profile and home feed, as well as a screen for adding a shoe to the user’s locker.
}
MakingTheProduct()
{
When going from mid-fidelity to high-fidelity, we didn’t end up changing too much. I primarily helped with implementing text where necessary (such as post descriptions) and making sure everything worked properly in prototype mode.
The biggest changes between mid-fidelity and high-fidelity are to the bottom bar, which was completely overhauled visually, the user’s locker page, which had one of the icons removed for visual clarity, and of course, the additions of colors and images throughout the prototype.
}
FinalNotes()
{
I’m really proud of the work my group and I did! There are a few things that don’t work entirely as we intended due to time constraints or Figma limitations, but overall I think the SNKRS app redesign turned out really well!
}