Chelsea Rogers
Record Collection
UI/UX DESIGN
Chelsea Rogers Record Collection 2.0
Above is an updated desing of the desktop version for this collection. I felt that the orignal was not cohesive and difficult to read. With this new version, I focused on connecting the desktop style more with the mobile app. Keeping the concept of record shelves, I changed from a literal shelf to a conceptual, cover facing display. I also added unique elements to the covers to visually showcase how I think about my records, in addition to the explinations on the information pages. I feel that this update is easier to read and still brings in my unique voice about my collection.
Above is an updated desing of the desktop version for this collection. I felt that the orignal was not cohesive and difficult to read. With this new version, I focused on connecting the desktop style more with the mobile app. Keeping the concept of record shelves, I changed from a literal shelf to a conceptual, cover facing display. I also added unique elements to the covers to visually showcase how I think about my records, in addition to the explinations on the information pages. I feel that this update is easier to read and still brings in my unique voice about my collection.
Chelsea Rogers Record Collection 1.0
BRIEF
I designed a desktop and mobile app to showcase a collection of my own and explore ways to organize content. The project involved organizing at least 20 objects from my collection to better understand different ways of presenting and arranging this information.
PROCESS
I chose my record collection because it is something I cherish and enjoy. I am a music lover and enjoy immerse myself in it through vinyl. My goal for this concept was to recreate the real-life experience of looking through records. To do this, I created a record shelf for the desktop version simulating the experience of browsing at home. For the mobile version, I organized my collection in crates to emulate the experience of going to a record store and searching for albums. The categories reflect how I think about my records. Within each album, there is a deeper dive into my experiences with it, like how often I listen to the album, the volume listened at, and my level of enjoyment.
KNOWLEDGE GAINED
I used Figma to design and prototype my record collection for both desktop and mobile. This project helped me improve my skills in prototyping websites and apps, focusing on how elements interact and connect. The result is an interactive digital experience for finding the perfect record to match the vibes.
SPECS
+ Figma
+ Adobe Lightroom Classic
+ Grid Structure
+ Layout
+ Photography
+ Web Design
+ Mobile Design
+ Prototyping
I designed a desktop and mobile app to showcase a collection of my own and explore ways to organize content. The project involved organizing at least 20 objects from my collection to better understand different ways of presenting and arranging this information.
PROCESS
I chose my record collection because it is something I cherish and enjoy. I am a music lover and enjoy immerse myself in it through vinyl. My goal for this concept was to recreate the real-life experience of looking through records. To do this, I created a record shelf for the desktop version simulating the experience of browsing at home. For the mobile version, I organized my collection in crates to emulate the experience of going to a record store and searching for albums. The categories reflect how I think about my records. Within each album, there is a deeper dive into my experiences with it, like how often I listen to the album, the volume listened at, and my level of enjoyment.
KNOWLEDGE GAINED
I used Figma to design and prototype my record collection for both desktop and mobile. This project helped me improve my skills in prototyping websites and apps, focusing on how elements interact and connect. The result is an interactive digital experience for finding the perfect record to match the vibes.
SPECS
+ Figma
+ Adobe Lightroom Classic
+ Grid Structure
+ Layout
+ Photography
+ Web Design
+ Mobile Design
+ Prototyping
SKETCHES
ITERATION
PROTOTYPES
PHOTOS
