Redesigning Apricot Lane Boutique Website

As someone who loves shopping for new clothes, I'm obsessed with finding unique pieces in small owned shops or boutiques. Fortunately, there are plenty of small clothing shops in my area. When thinking of a website redesign, the first one that came to mind was redesigning the Apricot Lane Boutique website for the Ridgewood, NJ location. The store has selections that are modern, chic, elegant and practical. When I looked on their website, I noticed the design is anything but practical. With oversized photos, a lack of aesthetics and an overwhelming home page, there is definitely room for improvement.

Mood Board

To start my redesign process, I created a mood board to set the tone of what I want the website to portray. The original website stuck with a grey, white and black color palette with basic fonts. Since "apricot" is in the name of the brand, I decided to move forward with a mood that's feminine, bright and has tones that are similar to apricots. If there is room for special fonts, I would use fonts that are similar to the ones in my mood board.

Taking inspiration from different elements helped me visualize what the look of the website could be.

Color Palette

The next step in my redesign process was to create a color palette. By selecting colors from my mood board, I chose the colors that best matched my vision for what I'd like to website to look like and made sure the colors contrasted and matched well with one another. I kept text, links and other visuals in mind during this process.

Site Map

When working on any UX design project, one of the most crucial steps is creating a site map. A site map helps the designer plan the flow of the website and is the foundation for the next steps of the project. During this process, I kept my timeframe in mind as well as how to keep the website as practical and efficient as possible. To help generate ideas, I took inspiration from the Apricot Lane website as well as websites from larger clothing brands. By taking elements from each, I was able to figure out what was most important for this project.

Wireframes

The last step in the design process was creating wireframes. Wireframes are mockups of a project, which sets a blueprint for the rest of the design process. To create the wireframes, I once again took inspiration from various websites while also following the guideline from my site map. Utilizing the site map brought my ideas visually onto a page and helped organize my ideas. Creating the wireframes went smoothly as I thoroughly planned with my site map.

Previous
Previous

CMS vs Hand-Coding

Next
Next

What makes a good blog?