Heuristic Markup of the site.
Improving a dated user experience to meet current design standards
Project Scope: 4 Weeks
Role: UX/UI Designer
Final Product: www.renplan.com
A client reached out to me to improve her website's look and user experience.
The client wanted to spend money to improve the SEO for her site but did not want that money wasted on a page that did not meet current design standards.
Questions I Asked Myself
How do I update a dated site architecture while maintaining the current structure and user flow?
How do I make stale content more engaging?
How can I reduce or consolidate the pages while maintaining usability?
How can I make the site more welcoming?
Can I get rid of the drop down menus all together, and still make it functional?
The client does amazing work. I needed to find a way to get potential customers to be excited about reaching out to her.
Established New Structure With Client
My First Objective:
Simplify the user journey to help potential customers reach their most important goals without having to navigate through a drop-down menu.
Restructuring how information would be displayed, and where.
Given the short time frame, I had to rely on my UX expertise to draw out pain points and work out how certain pages could be combined to improve the experience.
The heuristic markup below was for my personal use. I communicated these ideas to my client through a conversation, and made her a part of my process.
Made The Client My Ally
Due to the short deadline, I couldn't afford to go back and forth on different design iterations. Making the client my partner in this design implementation allowed for a smooth transaction.
I made the client aware of my process. Gave her opportunities to approve the design as I was building it.
This got her excited to see what I'd bring next.
Once I established all the problems with the current design, I did some research to gain inspiration on which direction to go in.
The client doesn't want to be grouped with traditional construction companies.
I wanted the site to be modern, sleek, and elicit a personal connection with the user.
Users should feel at home. Like this is a brand they can trust.
The design (to the right) for a construction company web page inspired the structural foundation of the site.
I showed the client a detailed mid-fidelity wireframe so she could get a chance to look at the content structure, without the distractions that come with a colored design.
I had her approve the structure every few pages.
UI Design - No Drop-Down Menus
Once the client approved all mid-fidelity pages, I proceeded to adding color and images.
Designed and Prototyped Using Figma
I tried my best to choose images of a similar style. Used a combination of traditional stock photos of "professionals," and images that looked more natural.
Most proud of how easy it is to maneuver through the site. The tab-menu structure makes it much easier to navigate, and still know where you are at all times.
I cleaned up my design file to make it easy for the client's developer to understand. I created a zip file with all the icons, pictures, logos, and fonts. I made sure to label everything properly.
There were no issues when it came to implementing the final designs.
Click to view the final product: www.renplan.com