Website Design — MarketingNProduction
Redesigned the website for MarketingNProduction, a digital agency that excels in both marketing and production services. The project focused on enhancing user engagement and improving site navigation, aiming to clearly present and integrate their dual-service approach for better client interaction and satisfaction.
.png)
Discovery
Before starting the website redesign, I set up a Zoom call with the client to really understand what wasn't working with their current site. Here’s what they shared:
- Low Traffic and Engagement: They were worried because not many people were visiting the site, and those who did weren’t sticking around or interacting much.
- User Retention Issues: The client noticed that visitors didn’t browse much beyond the first page they landed on.
- Sales Concerns: Sales were down, and the website wasn’t doing a great job at converting visitors into buyers.
- SEO Setbacks: Their site wasn’t ranking well on search engines, which was part of why they were getting so few visitors.
- Complicated Design: Users found the website hard to navigate, which made finding information or completing actions frustrating.
Discovery
When I started working on the website, I noticed that the site’s layout was a bit all over the place—too many pages that were just not needed. So, the first thing I did was tidy up the site structure. I cut out pages that were redundant and grouped similar services together into one clean dropdown menu. This made the website way easier to navigate and less overwhelming for users.
Mood Board
Before diving into the detailed design, I always start with creating a mood board. This step is crucial as it helps set the visual tone and style for the entire project. By assembling images, color palettes, typography, and other inspirational elements, the mood board ensures that I have a clear aesthetic direction that aligns with the client’s vision and objectives.
Wireframes
After finalizing the mood board, I move on to the wireframing stage. This step is critical for shaping the website’s architecture without the distraction of visual design elements. For this project, I create detailed wireframes to map out the primary navigation and layout of key pages. This process allows us to focus on the functionality and user flow, ensuring that the site will be intuitive and easy to navigate.
High-Fidelity Designs
After the wireframes, we move on to the high-fidelity designs. This stage involves applying the visual elements from the mood board, like colors, fonts, and images, to our wireframes. It gives us a clear and detailed look at what the final website will be like, helping us tweak the user interface and ensure everything looks good and works well.
Before and After
After the redesign, the website looks modern and is easier to use. We've made it look better with new colors and styles, and simplified how you find things, which should help people stay longer once it's live. We've also set it up to be better found by search engines and made sure everything works well on phones and computers. These updates have made the website not only more attractive but also more practical for when it launches.
