Sinders Bridal House
Sinders Bridal House is a premiere bridal shop in Ottawa & Peterborough offering designer wedding dresses, accessories, and unparalleled service.
As the UX/UI Designer for Sinders Bridal House, I redesign the website, created and launch it, through the UX process of creating this new, user-friendly, responsive web design.
Deliverable
- Research
- Creative Brief
- Target Market Research
- Personas
- Mind Map
- Mood Board
- Site Map
- Learning Objectives
- Low-fi Wireframes
- Prototypes
- High-fi Mockups
User Research
Project objective: Create a website to get their name and information out to people.
Promote who they are and what they offer. Encourage their clients to use the website.
Increase their clients and therefore, more sales.
Target Audience: Brides, bridegroom and their families.
Primary: Brides and bridegroom
Secondary: Brides and bridegroom’s family and friends
Collections
Customers commonly visit the store to make purchases based on dresses collections and prices ranges that they saw online. When they visit collection page, they can find out about different dresses and their styles. They also can see the average price of each collection. These can make customers satisfied, and excited to make an appointment.
For feasibility, I added a collection page that includes different dress collections with some high-quality pictures. The customer can find average prices and information on each collection at the bottom of each page.
Book Appointment
The main part of the bridal store is that to make brides excited to visit the store. I included a “Book Your Appointment” button on the top of all pages. Therefore, customers can have access to it from anywhere on the website.
Instagram has the highest amount of post types of any social media platform, with more than 70 million new posts shared daily. It also drives User-Generated Content from Instagram to the Website.
We decided to include Instagram feed to some of out pages. This feature can create the opportunity for our businesses to increase brand awareness and engagement while offering interactive marketing opportunities.
Background
Sinders has been an extension of their family, not just in the sense that it’s a family-owned business, but that the team and the brides become a part of the family. It’s more than a business. It’s more than a 9 to 5. It’s an extra part of themselves that they’ve molded and watched grow for almost a decade while simultaneously growing themselves and raising their own children. Visit the re-designed website by me.
I am web designer and developer at Sinders Bridal House
I had an opportunity to re-design and develop the Sinders Bridal House website (desktop, tablet, mobile) using WordPress during my co-op semester. I offered them new branding colours, created a new mood board and site map for their brand, and designed desktop, tablet, and mobile low fidelity and high fidelity digital prototypes using Adobe XD. Then, I implemented Sinders Bridal House’s website by using WordPress Elementor. After I finished my co-op Sinders Bridal House offered me a part-time position to assist with the growth and content of their social media platforms, specifically Instagram, Facebook, and TikTok. I am currently working with them as a Web designer and developer.
The Process
I am going to describe my work experience with SINDERS BRIDAL HOUSE during my co-op semester (winter 2022). I started my work on the 10th of January 2022 and the duration of the work term was five months. I was assigned to redesign their website for mobile, tablet, and desktop views. Moreover, I was assigned to add more features to their websites such as online shopping, Instagram feed, Google map, and search option.
Before starting to design the website, I offered three different Mood boards including buttons’ shapes, textures, possible colours, icons, and typography as they were not happy with their current brand colours. I then implemented SINDERS BRIDAL HOUSE’s website by using WordPress. WordPress is a content management system that allows you to build websites. WordPress contains plugin architecture and a template system. I was able to manage and design the website with the free version of plugins and themes.
The following shows the steps that I work on to create the final version of the website.
The Research
Project objective: Create a website to get their name and information out to people. Promote who they are and what they offer. Encourage their clients to use the website. Increase their clients and therefore, more sales.
Target Audience: Brides, bridegroom and their families.
Primary: Brides and bridegroom
Secondary: Brides and bridegroom’s family and friends
Main Pages of the Old Website
Creative Brief - Website
1-Company name –Sinders Bridal House – Premiere Bridal Shop in Ottawa
2- Primary contact – Minoo Hezaveh
3- Project title – Website redesign
4- Designer name – Minoo Hezaveh
5- Start date – 10 January, 2022
6- Project deadline – 10 April, 2022
7- Project objectives – Responsive website redesign and development
8- Company insight –
9-Deliverables – Responsive website
10- Customer benefits –
- New branding colours
- Modern stylish website
- More organized website
- Add online shopping, Instagram feed, Google map, and search option
11-Competition – List competitors (Primary & Secondary):
12- Key message – Be wild. Be crazy. Be YOU.
13- Current/desired perception – New branding colours. Add online shopping, Instagram feed, Google map, and search option to their website.
14- Strategic focus – We are a visionary bridal boutique that uses our platform to promote inclusivity, confidence, and strength to everyone we can.
15- Tone & manner – Family, Authenticity, and Integrity
16- Project mandates – 10 April, 2021
17- What is there a unique selling point of product or service – services such as private rooms, in-house alteration, and wedding day dressing
18- What is the emotional benefit – We are your number one supporter, your cheerleader, your confidant, and your bodyguard. We listen, learn and aim to cultivate an environment that provides comfort to our brides, their family and everyone around us.
19- Creative considerations –
- Modern and organized layout
- Use video on the home page
- Update photos
20- Strategic plan – We know that shopping for a wedding garment can be a stressful time. At Sinders, each bride-to-be is greeted by their own individual bridal stylist, who from the moment you walk in the door will work with you to ensure your experience with us is as unique as you are. We even have four private viewing rooms, each adding a small slice of personality and style to every appointment.
21- What is the objective – Create a website to get their name and information out to people. Promote who they are and what they offer. Encourage their clients to use the website. Increase their clients and therefore, more sales.
Roles and responsibilities
During the first month and a half, I worked on designing the website during the day and presenting it to my team and manager the day after in our meeting and asking for their feedback. After each meeting, I applied their feedback to my design. When we all agreed on the design, the second part of my work started which was implementing the design using WordPress. At this point, we had meetings when I finished each part of my implementation and then we set a meeting and I presented my work to my team and asked for their opinions. If I had a challenge during my implementation, I explained it to them during our meeting, as well.
Target Market Research
Demographic | ||
Name | Nicole Graham | Mary Code |
Gender | Female | Female |
Age | 25 | 35 |
Education | College degree | PhD degree |
Position | Teacher | Computer Engineer |
Salary | +65K | +100K |
Psychographics | ||
Name | Nicole Graham | Mary Code |
Opinions | Extrovert | Introversion |
Personality | Artistic, Kind, Easy-going, Friendly | Hard-working, Funny, Reliable, Busy |
Values | Respectful | Passionate |
Activities | Swimming, Dance | Cycling, Jogging |
Attitudes | Agreeable | Optimism |
Interests | Painting, DIY projects, Photography | Coding, Reading books and articles, Music |
Lifestyles | Simple, Engaged and going to marry soon | Adventures, Engaged and going to marry soon |
Geographic | ||
Name | Nicole Graham | Mary Code |
Location | Carlton Place, ON | Kanata, ON |
Personas
The base users are most likely brides, bridegroom and their families.
Mind Map
Suggested Mood Boards
First Version
Second Version
Third Version
Final Mood Board
Stickie notes
1st step
2nd step
Site Map
Learning Objectives
My learning objectives were as follows:
- Improve my communication skills
- Improve my self-confidence
- Improve my teamwork skill
- Improve my UI/UX skill
- Learn more about WordPress
As my work was remote, I was able to improve my communication, self-confidence, and teamwork skills by daily meeting with my supervisor and team to present my daily work. I prepared a PowerPoint for each step of my work and presented it to my team members. I asked about their opinions and received feedback about my work from my supervisor and team. If I needed any documents or photos for the website, I sent an email to my team and asked them to provide them for me. Toward the end of the work term, I created a list to keep track of the work that we need to do before the end of the work term. It helped us a lot to finish our work on time. I was able to meet these objectives because of my great supervisor and team member. They were always available and gave me great feedback about my work and appreciated my work a lot.
I was able to improve my UI/UX skill by designing a real-world website for SINDERS BRIDAL HOUSE. I suggested them new branding colours, created a new mood board and site map for them, and designed mobile, tablet, and desktop low-fidelity and high-fidelity digital prototypes using Adobe XD (see Appendices). I achieved my goal during one and half months of my working at SINDERS BRIDAL HOUSE. The digital prototypes were accepted by my supervisor and team and they were ready to implement using WordPress. I was able to achieve this objective by using my UX/UI knowledge from my courses such as “User Experience Design”, “Design Foundations”, and “Design Thinking” at Algonquin college and learning online.
I learned WordPress at school, but creating the whole website using WordPress was a great opportunity to learn more about WordPress, its themes, and plug-Ins. I learned how to use Elementor which is the main Plug-in for the website that I used. However, Elementor does not have some features or they are in the Pro version which you should pay to use. I was able to search and find our plug-ins for my needs for free. The list of plug-ins that I installed in WordPress and learned how to use are as follows:
- Ajax Search Lite
- Anywhere Elementor
- Category Ajax Filter
- Column Shortcodes
- Contact Form 7
- Duplicate Page
- Elementor
- Elementor Header & Footer Builder
- Essential Addons for Elementor
- Font Awesome
- HT Mega – Absolute Addons for Elementor Page Builder
- Premium Addons for Elementor
- Simple CSS
- Smart Slider 3
- Sticky Header Effects for Elementor
- Sticky Menu (or Anything!) on Scroll
- Stratum – Elementor Widgets
- Ultimate Responsive Image Slider – 3.5.5
- Wordfence Security
- WordPress Importer
I learned how to add Instagram feeds to the website. In order to do that, we should add the key to Elementor fr authentication, and then the website is able to show the latest Instagram feeds.
I learned how to customize CSS files to change the WordPress theme to be the same as my design theme. For example, for the search result page, the free version of Elementor is not supporting changing the theme for the search result. I had to figure out how to add a CSS file. I created a CSS file and changed the colour, font family, font size, margin, padding, and links to be the same as my design.
I learned how to fix the header of the website while we scroll down. It was a little challenging with Instagram feeds as that row was coming at the top of the fixed header when scrolling down the home page. I was able to fix this issue by searching online and updating the script file of the fixed header’s plugin.
I was able to achieve this objective by using my WordPress knowledge from my courses such as “Content Management Systems I” and “Content Management Systems II” at Algonquin college and learning and searching online.
Low & High-Fidelity Digital Prototype
Desktop, Tablet, Mobile
Desktop, Tablet, Mobile
Examination of the learning experience
At the first of the work term, I was a little nervous about implementing my design with WordPress all by myself with nobody’s help. However, I overcome my fears by searching and learning online about WordPress and plugins. At the end of the work term, I successfully implemented my design using WordPress.
I should say this work gave me a great opportunity to believe in my ability to overcome challenges and solve issues that may occur during work experience. It allowed me to have more self-confidence and self-assurance.
Self-Assessment (articulation of learning)
I learned how to search and find the issues that I had during my website implementation online. WordPress is a huge world and there are so many plugins available for different purposes. I learned I should search and find plugins for my issue and then learn how to use those plugins using online resources and then try them on and find the best one that matches my need. I learned how to communicate with my team and explain my work to them and ask for their opinions. This work helped me to increase my self-confidence.
Moving forward, I should always keep updating my knowledge of WordPress and its plugins. I should learn more about how to change the theme code and CSS files to achieve my goals. I also would like to improve my Shopify skill, as I think it will be more popular than WordPress in the near future. I should improve my coding skills as at the end of the day if none of the plugins work, I should go inside the code and change it based on my needs.
Wrap up
On this page, I reviewed my four-month co-op work with SINDERS BRIDAL HOUSE. I described my roles and responsibility during this work term and learning objectives. I have learned how to design and implement a website from scratch to the final launch. I used Adobe XD to design and WordPress to implement my design. The most challenging part of this work was finding the right free plugins for our design needs. This work was not possible without the support and availability of my manager, Chris.
After my co-op semester, SINDERS BRIDAL HOUSE offered me a job. I am currently working on updating our website and improving its SEO, our main goal is that our website rises the ranks to the top of search engine results. Our manager’s note about me on OUR TEAM page:
Wrap up
On this page, I reviewed my four-month co-op work with SINDERS BRIDAL HOUSE. I described my roles and responsibility during this work term and learning objectives. I have learned how to design and implement a website from scratch to the final launch. I used Adobe XD to design and WordPress to implement my design. The most challenging part of this work was finding the right free plugins for our design needs. This work was not possible without the support and availability of my manager, Chris. After my co-op semester, SINDERS BRIDAL HOUSE offered me a job. I am currently working on updating our website and improving its SEO, our main goal is that our website rises the ranks to the top of search engine results. Our manager's note about me on OUR TEAM page:
Wrap up
On this page, I reviewed my four-month co-op work with SINDERS BRIDAL HOUSE. I described my roles and responsibility during this work term and learning objectives. I have learned how to design and implement a website from scratch to the final launch. I used Adobe XD to design and WordPress to implement my design. The most challenging part of this work was finding the right free plugins for our design needs. This work was not possible without the support and availability of my manager, Chris. After my co-op semester, SINDERS BRIDAL HOUSE offered me a job. I am currently working on updating our website and improving its SEO, our main goal is that our website rises the ranks to the top of search engine results. Our manager's note about me on OUR TEAM page:
