Responsive Website & Rebrand 

Responsive Website & Rebrand 

Here is the process I went through to find the best solutions for Espy Collective.

• RESEARCH: Secondary Research, Competitive Analysis, Interviews, Personas
• INFORMATION ARCHITECTURE: Page Sketches
• INTERACTION DESIGN: User Flow, Low Fidelity Wireframes
• UI DESIGN: High Fidelity Wireframes, Responsive UI Designs, UI Kit
• ITERATION & IMPLEMENTATION: Usability Testing of the High Fidelity Prototype

Here is the process I went through to find the best solutions for Espy Collective.

• RESEARCH: Secondary Research, Competitive Analysis, Interviews, Personas
• INFORMATION ARCHITECTURE: Page Sketches
• INTERACTION DESIGN: User Flow, Low Fidelity Wireframes
• UI DESIGN: High Fidelity Wireframes, Responsive UI Designs, UI Kit
• ITERATION & IMPLEMENTATION: Usability Testing of the High Fidelity Prototype

I started off this project with secondary research to get a general overview of the wedding planning industry. From the existing data, I was able to learn more about the services offered, average pricing, and the pros and cons of the wedding planning business. I did a competitive analysis of the top competitors of Espy Collective to see how other companies have solved similar problems that users face. I was able to see the overall threats and opportunities for improvement by analyzing other competitors' strengths and weaknesses.

I started off this project with secondary research to get a general overview of the wedding planning industry. From the existing data, I was able to learn more about the services offered, average pricing, and the pros and cons of the wedding planning business. I did a competitive analysis of the top competitors of Espy Collective to see how other companies have solved similar problems that users face. I was able to see the overall threats and opportunities for improvement by analyzing other competitors' strengths and weaknesses.

• Bio of planner and team
• Updated galleries
• Name of photographer and venue for each gallery
• Overview of services offered/Starting price
• Portfolio of different types of events (Photos on websites help most because they show couples what planners are able to do) 
• Month of/Partial/Full planning options
• Packages that are customizable (Since most brides aren't familiar with the planning process) 
• Clear and simple website that is easy to navigate and also displays the planner's aesthetic 
• Ensure guests are taken care of
• Planner has experience with weddings of all sizes
• Special treatment through planner's connections with vendors 
• Be able to just show up at the wedding and not stress about anything
• Links to social media for company validation 
• Updated blogs are helpful because it shows that someone is behind the website 
• Planner caters to couple's vision and not their own
• Vendor recommendations for all different budgets
• Unlimited phone and email communication (frequent and prompt)
• Planner to be attentive to details and highly organized
• Reviews from real life couples   

• Bio of planner and team
• Updated galleries
• Name of photographer and venue for each gallery
• Overview of services offered/Starting price
• Portfolio of different types of events (Photos on websites help most because they show couples what planners are able to do) 
• Month of/Partial/Full planning options
• Packages that are customizable (Since most brides aren't familiar with the planning process) 
• Clear and simple website that is easy to navigate and also displays the planner's aesthetic 
• Ensure guests are taken care of
• Planner has experience with weddings of all sizes
• Special treatment through planner's connections with vendors 
• Be able to just show up at the wedding and not stress about anything
• Links to social media for company validation 
• Updated blogs are helpful because it shows that someone is behind the website 
• Planner caters to couple's vision and not their own
• Vendor recommendations for all different budgets
• Unlimited phone and email communication (frequent and prompt)
• Planner to be attentive to details and highly organized
• Reviews from real life couples   

Define

Define

I developed two personas based on my research and interview findings to better empathize with the types of brides who would use Espy Collective's services. The main target audiences include the brides on a budget and those that can afford a higher end wedding. It was helpful to have a visual representation of the different types of brides I am designing for. 

I developed two personas based on my research and interview findings to better empathize with the types of brides who would use Espy Collective's services. The main target audiences include the brides on a budget and those that can afford a higher end wedding. It was helpful to have a visual representation of the different types of brides I am designing for. 

Page Sketches 

Page Sketches 

Based on the structure of the layout in the sketches, I created a user flow and mapped out the potential routes my persona Lily could take to contact the wedding planner.

Based on the structure of the layout in the sketches, I created a user flow and mapped out the potential routes my persona Lily could take to contact the wedding planner.

For the logo, colors, and typography, I chose elements that showcase Espy Collective's neutral (not too feminine or masculine), straightforward, and clean brand. The tones of orange convey joy, creativity, and success while bluish green is associated with trust and calmness. These are the feelings users would want to experience while planning their wedding. I chose a simple and clear logo design. The clean font allows the users to focus on the portfolio images. The UI kit below includes all the UI elements used in the final website layout.   

For the logo, colors, and typography, I chose elements that showcase Espy Collective's neutral (not too feminine or masculine), straightforward, and clean brand. The tones of orange convey joy, creativity, and success while bluish green is associated with trust and calmness. These are the feelings users would want to experience while planning their wedding. I chose a simple and clear logo design. The clean font allows the users to focus on the portfolio images. The UI kit below includes all the UI elements used in the final website layout.   

I incorporated these UI elements to create the high fidelity wireframes. I put together a prototype in Figma from the initial high fidelity wireframes to test out the usability of the website. Below are the main challenges users faced/suggestions and the changes that were made: 

• Put an "about the team" cta button after the welcome statement instead of "connect with us" since there are already multiple contact sections/links on the homepage.
• Change "our services include" to "our capabilities" since the list of services are not included in all the packages. The package users decide to choose and how far the couple is already in the planning process will determine which services Espy Collective provides them.
• Add a cta button for "our portfolio" on the about page so that the portfolio is quickly accessible.
• Add the vendor list at the top or to the left of the blog post instead of the confusing 3 words that have no categories. Users want to know who was part of the vendors before looking through the blog post.
• Add more testimonial bars because company validation is important to users.
• Check quality of photos to make sure they look clear.
• Change "galleries" navigation heading to "portfolio". Keep all titles in sections consistent. 
• See if there are other options besides checkmarks for the services section since the checkmarks make it seem like all the services are included in all the packages. 

After multiple rounds of iterations, this was the final high fidelity prototype. 

I incorporated these UI elements to create the high fidelity wireframes. I put together a prototype in Figma from the initial high fidelity wireframes to test out the usability of the website. Below are the main challenges users faced/suggestions and the changes that were made: 

• Put an "about the team" cta button after the welcome statement instead of "connect with us" since there are already multiple contact sections/links on the homepage.
• Change "our services include" to "our capabilities" since the list of services are not included in all the packages. The package users decide to choose and how far the couple is already in the planning process will determine which services Espy Collective provides them.
• Add a cta button for "our portfolio" on the about page so that the portfolio is quickly accessible.
• Add the vendor list at the top or to the left of the blog post instead of the confusing 3 words that have no categories. Users want to know who was part of the vendors before looking through the blog post.
• Add more testimonial bars because company validation is important to users.
• Check quality of photos to make sure they look clear.
• Change "galleries" navigation heading to "portfolio". Keep all titles in sections consistent. 
• See if there are other options besides checkmarks for the services section since the checkmarks make it seem like all the services are included in all the packages. 

After multiple rounds of iterations, this was the final high fidelity prototype. 

I created a responsive homepage and portfolio blog page for tablet and mobile devices as well so that the website is accessible through different devices. 

I created a responsive homepage and portfolio blog page for tablet and mobile devices as well so that the website is accessible through different devices. 

1. Usability (i.e. the readability of the text and the scalabity of the logo) is a priority over the designer's and client's preferences.

2. The designer may not always agree with the client's preferences, but new challenges are great because it causes the designer to think outside the box and not just stick with what they're comfortable with.

3. CTA buttons are important as they allow users to quickly access an item they are looking for and increase the likelihood that the users will contact the company.

4. It's important to find a balance in including all the information needed but not overwhelming the users with too much text.

5. User testing and feedback is so important because it really reveals the strengths and weaknesses of a product that the designer and client may not see themselves.

6. Designers are not the users, so in the end, it doesn't matter what we personally think. 

1. Usability (i.e. the readability of the text and the scalabity of the logo) is a priority over the designer's and client's preferences.

2. The designer may not always agree with the client's preferences, but new challenges are great because it causes the designer to think outside the box and not just stick with what they're comfortable with.

3. CTA buttons are important as they allow users to quickly access an item they are looking for and increase the likelihood that the users will contact the company.

4. It's important to find a balance in including all the information needed but not overwhelming the users with too much text.

5. User testing and feedback is so important because it really reveals the strengths and weaknesses of a product that the designer and client may not see themselves.

6. Designers are not the users, so in the end, it doesn't matter what we personally think.