UI/UX
Harper & Tucker Website Redesign
Timeline: July 2023
First impressions matter. When someone clicks on a website for a business or organization they’d never seen before, they’re going to judge how the information is presented. That’s one of the reasons why it’s so important to have an online presence that reflects the vision for a company.
Harper & Tucker is a boutique located in Newport, Rhode Island. It opened in 2017 as a small business run by two best friends. The inside of the store is dainty and original, but their existing website is too simple. It’s all white and empty with little direction or spotlight on their products. I created a redesign that brings my inner thoughts about Harper & Tucker to life, showcasing the energy of the boutique.
Research
To begin, I needed to establish what customers wanted to see on a website. First and foremost, people want easy navigation. There are too many options on the navigation of the existing site. In the redesign, I simplified the navigation bar to avoid shoppers from feeling overwhelmed.
The target audience for the boutique is most likely women aged 20-50. The existing site is very basic and could be more trendy to draw shoppers in. The clothing they sell is also high fashion and a blank white website does not match the quality of the products.
The Process
Mood Board
A mood board is a visual that helps a creator communicate their ideas and design concepts they wish to include in a project. It displays colors and photos that the designer uses throughout their journey to stay focused on their vision.
It was the first step in my redesign of Harper & Tucker’s website. I created it to show the colors and perspectives I think of when I imagine the boutique in my head. It includes very soft colors and dainty images representing the elegant and high-fashion clothing they sell. The physical boutique has a very classy but modern feel, and these images represent that.
Along my redesign process, I used this mood board to remind myself of what I envisioned for the site. It helped me stay on track with my plan for the design, especially when choosing the colors.
Color Palette
Finding a color scheme for the website was the next step. Using my mood board and the existing logo on the website, I found four colors that fit my vision. The color palette includes refined colors that give off a welcoming and elegant atmosphere. They are colors that remind someone of warm weather and a beach town, which is where the boutique is located.
Site Map
Once the vision is set in stone, the physical website design deserves the focus. A site map is an illustration of the navigation of a website, including the pages and how they connect. It’s used as a layout for the pages that must be designed in wireframes and then mockups before the actual site is created.
When redesigning Harper & Tucker’s website, I limited the options a user has for simplicity. The current website has other pages, like “Rewards,” that could be better displayed in a footer. The four main pages are linked off the home page that also includes a search, shopping cart, and footer for more information.
Wireframes
Creating wireframes was the final step in this redesign. It’s a diagram showing the basic elements on a website, like navigation, text, and images. It shows the spacing, placing, and sizing of elements included. Simple colors and shapes are used to represent what would be designed in a mockup, or visual representation of what the website would look like to users. It is based on the site map created before the guide the wireframes.
I designed the following wireframes for four pages on the website.
Website “Home” page for Harper & Tucker redesign
Website “Shop” page for Harper & Tucker redesign
Website “About” page for Harper & Tucker redesign
Website “Cart” page for Harper & Tucker redesign
conclusion
The process of brainstorming with a mood board, finding a color palette, then mapping a website, and designing wireframes allows for a smooth process of creating an online site. The four steps are easy to follow and produce a result that is more well-rounded than someone jumping straight to the design. They all collectively help bring a vision to life, just like how I redesigned Harper & Tucker’s website. It brings out their business strengths and represents what their customers are looking for, therefore possibly driving new customers to shop.