R Denim Web Design
UI/UX DESIGN
R Denim Web Design
UX/UI, RESPONSIVE DESIGN, WEB DESIGN
Without having a dominant online presence, R Denim was impacted greatly by COVID-19. Dependent on inperson pop-ups as their main source of revenue and lack of online store, forced R Denim to strategize on the best way to continue making sales. This website goal is to bridge the gap between being able to connect to their customer and selling their one of a kind denim. Their website is minimal, but delivers a positive user experience to those looking for vintage denim.
Role
UX/UI Designer
Software
Figma, Squarespace, Photoshop
Process
01. Understand
Competitive Analysis
Brainstorm
02. Empathize
Empathy Mapping
Persona creation
03. Ideate
Information Architecture
Wireframing
Hi-Fi Prototyping
04. Design
Final Design
01. Understand
Currently, R Denim’s online presence is it’s Instagram account (@shoprdenim). Creating a website will enhance R Denim’s brand for multiple reasons. Firstly, when people go to search “R Denim” having an e-commerce site will allow users to shop and learn more about the history behind R Denim. It also creates the opportunity for potential customers who are looking for vintage denim to discover R Denim. Recently, there has been a spike in interest of people shopping sustainably and locally due to COVID-19. So, the timing couldn’t be better to launch a website.
02. Emapthize
Customer Journey Map
This Customer Journey Map (CJM) highlights the interactions that they would experience if they were to order a product online. It includes the customers goals, process, and how R Denim can optimize their customer experience. As you can see, there are for pain points and ideas to keep in mind when a customer is on the online store.
03. Ideate
The usability of a website is crucial when designing a website. It’s important to set a strong foundation using information architecture to build out the site. For the navigation, there should not be more than 7 +/- 2 in order to reduce the amount of clicks for a user. I added the key pages to the site navigation. Once the site frame was complete, I created lo-fi wireframes.
04. Design
