Renaissance Records
UX/UI Design, Research, Branding, Wireframing, Prototyping
Background
Renaissance Records is a local record store in Birmingham, AL that has been in business since 2003. They currently do not have a website and operate solely off of Facebook and walk ins or word of mouth. I chose this company for my project, because I feel they could gain a larger customer base by offering a well designed website as well as the ability to sell products online.
Goals
My goals for this project were to:
Create a service that is easy to navigate
Provide everything a customer would like utilize online
The ability to purchase products online.
Local artists showcased
Provide important information needed when collecting
Create a way for the business to grow and gain more customers while providing a welcoming and informative space.
The Problem
How might we create a website for a local business to reach a larger audience and gain more customers, as well as provide a space for users to shop online and learn more about their local record store?
Users want a space where all of the information they are looking for is in one, easy space (events, F.A.Q., online shopping, etc).
I wanted to make sure they could find all of the information easily without feeling overwhelmed while looking at the products as well as having the ability to purchase items online.
My Impact
For this project, I was able to incorporate research data from users by performing user interviews as well as using competitive research to create and end to end product as a solo designer.
Design Process
Interview Questions
I asked my participants a series of questions relating to:
How often they shop at record stores
What they look for when shopping
What resources they would like in a website
What they would benefit from using those resources.
I interviewed 5 users aged 23-55. I chose a wider range of users to make the product inclusive of different ages and needs.
Competitive Research
I did competitive research to see what other record stores were offering. Majority of websites were very overwhelming and unorganized. It made it difficult to navigate or want to stay on the page. Some of the bigger sites did offer online shopping, which is something my users said they would like to have.
Affinity Mapping
Affinity mapping helped me to understand the issues that my users experience when shopping at a record store or their preferences for shopping online.
It helped me to create my task flows easily and know where my focus needed to be for my key screens.
User/Task Flows
After conducting user interviews, I reviewed my research and decided what key screens I’d focus my user flows and task flows on.
Flow #1: Create an account
Flow #2: Make a purchase.
Flow #3: Review the F.A.Q. section.
After creating the flows and I started on wireframes, I decided to take out the account creation. Instead, I designed screens for an events page as well as a blog post. I felt that the events page and blog post aligned more with what my users would find useful and challenged my design skills a bit more.
User Personas
I created one user persona based off of the users I interviewed. I chose a variety of users to make this product as inclusive as possible. I showcased a user that would frequent the record stores because of their involvement with music.
Majority of my participants I interviewed would have benefited from the same features such as:
An easy to read and navigate product
A way to view new music and local artists
Find local music events
Learn about different equipment to use or how to start collecting
The ability to shop online.
Wireframes
When creating wireframes, I started to take some ideas from competing sites as well as other websites that had organized design techniques. I researched other record store sites, Barnes & Noble, and American Eagle. I noticed things I liked and disliked about each and incorporated some designs that I did like into my own.
UI Kit
I created my UI kit to represent my core values for the project.
The core values were:
Joyful
Inviting
Community
Inspiring
Comforting
I wanted the colors to represent the inviting and comforting values as well as creating a fun atmosphere. I chose colors to showcase the atmosphere of an old record store, while still making it clean and accessible.
High Fidelity Prototyping
While creating the final wireframes before prototyping, we went through about 5 edits to finalize every detail. In the end, it made a big difference and made prototyping and testing much easier.
The style changed a bit throughout the process. The colors stayed the same, slightly different icons, etc. The most difficult part was deciding on the background vs. the content.
Mostly the changes were to make the final product look modern, organized, consistent, and easy to read.
Usability Testing
During user testing of the prototype, there were only a small amount of issues to fix. We spent a lot of time defining the wireframes, so there wasn’t many iterations to make. I had to add the status bar on the mobile frames so that my banners weren’t cut off and make some adjustments to the flows so that the user wasn’t confused on where to click.
Users liked the color palette, the events page, and the F.A.Q. page. They felt it was easy to navigate and well organized. The ability to shop online was a major feature that they wanted and felt it was similar to other websites they shop on.
Conclusion
Overall, I learned that research other websites helped a lot with how I wanted to design. A lot of record store websites are difficult to navigate and overwhelming to look at. My goal was to make it less crowded and easy to navigate. I’ve also learned a lot more about wireframing, sizing, and designing for multiple devices.