Website Redesign & Brand Refresh
Challenge
Say I Do Designs is a woman owned and operated business in the heart of New York. They were looking to redesign their e-commerce website hosted on Shopify. The goal was to enhance visual design, reduce user friction, and have the new site accurately depict their brand message.
Objectives
Design and develop a fully responsive Shopify website
Minimize user friction when navigating products
Match design to brand messaging
Project Scope
Website Redesign & Brand Refresh
Tools
Photoshop, Illustrator, Liquid, HTML5, CSS3, Shopify
Role
UI/UX Designer (Freelance)
Duration
1 Month (30 hours)
Initial Research
Competitive Analysis
My client provided me with two competitor websites to reference in my research. I looked through each one and noted both what they did well and points of opportunity.
Strengths:
Scroll animations on text and images
Gallery pages to display past work
Imagery includes mockups of stationery
Weaknesses:
Lacks visual hierarchy
Hover effects reveal text; not mobile-first approach
Colors do not comply to AA guidelines
Strengths:
Good use of mockups for images, no flat designs
Process page to walk user through services
Clean grid and use of filters for previous projects
Weaknesses:
Body text is too small
Navigation contains too many buttons
Sub optimal hero treatment; no way to convert
What They Did Well
The common strength between the two websites was imagery. Both showed off their products and services well through mockups, rather than flat images of designs. Scroll animations on text and images also gave one of the websites personality, and enhanced the experience. A page explaining their process for each service also made it easy to understand how everything worked.
Points of Opportunity
The biggest points of opportunity lay in visual and interaction design. Pages lacked visual hierarchy, contrast, and consistency. I would note the positive impact of using mockups for images, but create a cleaner, more simple design for my client's products. Finally, like the mockups, I would also design a gallery with filters/categories that is more user-friendly and simplistic.
What to Look For
When researching Shopify themes, I had to keep in mind what kinda of sections and blocks would be most useful to display products and information on the new website. My client also specified they wanted a parallax scroll effect on images, so a theme that already had that feature built in would save a considerate amount of development hours. Finally, the product categories were rather large, so I paid attention to navigation features such as mega menu integration when assessing each theme.
Client Budget
Prices did not vary all that much between the themes I researched, and my client did not set any budget when shopping for a theme. I found that we naturally gravitated towards the higher-end themes with a slight premium over the others, but the price tag would be justified with time saved and the pre-built sections that came with it.
Project Timeline
After talking with the client, we created a list of pages, products, and content that must be included in the initial launch. Once we compiled the list of what to prioritize, we set a goal to launch within 8 weeks after beginning the sitemapping phase. The theme we select would have to enable us to reach this deadline.
Chosen Theme: Motion
Motion checked all the boxes for us, so it wasn't much of a competition. The blocks, scroll animations, parallax effects, and more would suffice for this project. Price did not influence the decision, as all the themes I analyzed were within the same price range.
Approach
As displayed below, the website's structure would be simple: only one set of parent-child pages, and the rest being landing pages. This approach would provide the highest probability in the end user locating what they are looking for, and increasing conversion rates for the client. You can view the sitemap here.
Responsive UI Design
Shopify handles almost all responsive design needed when building a website. However, I needed to create a custom landing page for one of the services my client offered. I discovered a Shopify app that would allow me to build custom layouts by assigning CSS classes and injecting code with ease, such as the hero and "Process" sections. The app also granted users the ability to create one page for free before purchasing a subscription, resulting in my client not having to pay a dime.
Shopify Apps
I was able to utilize a couple other Shopify apps to allow users to rent out products, input information to personalize orders, set minimum and maximum quantities for products, and set up bulk discount pricing. For previous projects I have used liquid and HTML to add line item properties to the product pages and cart, but I found an app that would allow me to do it for free and enhance the user experience.
General Notes
The finished product was exactly what the client was looking for: a website that reflected their recent brand refresh, offered a user friendly experience when searching for and purchasing products, and room to grow their business further.
Next Steps
Next steps include adding features such as a client portal/login area, products, and enhancing the user experience within the design tool application. One of my client's goals is to allow users to design their own stationery and place an order on the site.
Final Thoughts
I am grateful for my client giving me the opportunity to help their business reach new heights. This was a great step for them and I look forward to working with them in the future. I always enjoy sharpening my skills in Shopify, and will continue to improve the website through iterative design. Thank you for reading.