HOMEPAGE DESIGN PRINCIPLES
NAVIGATION
BIRTHDAY
PAGE
WHAT IS WORKING:
This design has an inverted pyramid structure where the most important information is first. The order is product imagery, categories of products, same day delivery, featured products, what products can do for you & categories. Iconic representation is also present where images are used to improve recognition. This is shown through the icons to signify their product categories.
WHAT IS NOT WORKING:
The rule of Ockham's Razor is not working which is where the choice between functionally equivalent & simplest, the simplest design should always be chosen.
Here I believe this design can be simplified, so the user does not get overwhelmed upon entering the app.
INDIVIDUAL BOUQUET PAGE DESIGN PRINCIPLES
WHAT IS WORKING: In the app's navigation serial positioning is used, where items presented at beginning and end of a list are more likely to be remember than the middle. The categories are in descending order of most popular to least. On the birthday page a mental models structure is used where the design is based off what people already know. The sort by including best selling, price low to high and price high to low is a mental model because people are used to defining their browsing in this way.
WHAT IS NOT WORKING:
In the navigation the wayfinding, where using spatial & environmental info to navigate to a destination, is not working. Here there are too many options that are not sectioned out clearly, which makes it difficult for the user to navigate. Also, the progressive disclosure, where managing info complexity, in which only necessary info is shown, is not working. I want to include more progressive disclosure by hiding some of the section pages until the user is on the individual pg. Ex: (Birthday, hide birthday balloons). On the app's birthday page hick's law, where the more options the longer it takes to make a decision, is not working. This page scrolls on for 48 more pages.
I plan to narrow this search by organizing it into flower types, colors & pricing.
NAVIGATION & BIRTHDAY PAGE DESIGN PRINCIPLES
WHAT IS NOT WORKING:
Hierarchy. To show importance in content by manipulating characteristics such as size, color & positioning. The product name is not above the photo, also the sizing of text feels too big. Overall, the content for this page is good, but the layout and sizing makes it confusing. Aesthetic-usability Effect. Aesthetic designs are perceived as easier to use than less aesthetic designs. Aesthetically this page is not appealing due to a lack of spacing and lose of brand identity. Therefore, I want to bring in more color and reconnect this page's look more to the front page.
CONCLUSION
After analyzing the homepage, navigation, section (birthday) page and the individual product page. I have decided that I am going to focus on redesigning of the information structure of the navigation panel, search options for the section (birthday) page and the layout of the individual product page. I'll also be taking the positive design principles from the homepage and applying them to my redesigns to create more consistency. Overall, I would assess the quality of this design at a about 75%. It's pretty good, but I believe there's room for improvements in the design principles mentioned. Through my redesign I'm looking forward to making fromyouflowers.com a more simple, easy to use and aesthetically pleasing application.
PART B: REDESIGN
Design Problems: Overcrowded information, difficult to navigate and poor hierarchy.
Design Solutions: Refocus navigation, create a filter panel to help narrow searches, restructure all product page and individual product page.
Persona: Grace is looking for a bouquet of flowers for her friend Molly's birthday. She needs these flowers fast, wants to spend under $40 dollars
and knows Molly's favorite flowers are peonies.
For my redesign structure I plan to create a design process that would make this user goal easier to achieve.
DESIGN BREIF
NEW
STRUCTURE
OLD
Tier 1 Navigation Changes: I took out "same day", as I included it under each other category to help personalize the search more.
Tier 2 Navigation Changes: I decided to change a lot in tier two. All the categories felt super wordy and redundant to tier one.
Therefore, I added the categories: New, Price: Low to High, Price: High to Low and Sale. I believe this is more tailored to help users find the products they want.
Navigation Tier 1:
I clean up the layout
by sizing down the typography and sectioning the themes and specific products. This page is much easier to scan & easy determine the types of services this application can provide.
Navigation Tier 2:
Here I took away repetitive sections and added new sections to help refine searches. I also sized down
the type, indented it and
made the font a different
way to show hierarchy.
NAVIGATION REDESIGN
Birthday Page
Here I took away the text under the top image to help declutter the initial view. I also changed the dropdown menu to help filter search and changed it into a clickable Icon. Finally, sized down the type with the name being the largest and the price and delivery smaller.
I also changed these fonts to greyscale to lessen
the distraction.
Filter Panel
When a user clicks the filter icon, this panel slides out from the right.
I decided to add a lot of options to this filter, due to the high amount of products this webiste offers. I added the new, price: low to high, price: high to low, same day, flowers section, flower colors section and add
ons. Having used this site before and struggling
to find a bouquet I believe narrowing a search with these options could
really speed up a users
search time.
BIRTHDAY PAGE REDESIGN
Product Page – Top
Here I moved the product name to immediately underneath the product picture. I also changed the structure of the bouquet size (reg., deluxe, & premium) because I didn't know what the difference was on the mobile site, so adding an area for a description underneath I think will make it much less confusing. I also took away the grey squares because the aesthetic did not match the rest of
the site.
Product Page – Bottom
Here I sized down a lot of the typography, as before it felt squished and busy. Now by separating the "Make your gift special" and "card message" into clickable buttons, and the "item description", "Shipping", and "Delivery Policy" into accordian dropdowns. It separates the information in a more digestible manner.
INDIVIDUAL BOUQUET PAGE REDESIGN
Overall, I'm very happy about the outcome of this project. I feel as though I focused more on the structure and what I can do to make this site more user friendly,
which was my objective. I think I could go further with this project and work more on the aesthetics, but following the design principles of: Ockham's Razor, Wayfinding, Progressive Disclosure, Hick's Law, Hierarchy and Aesthetic Usability Effect, I think I incorporated these all nicely. How I implemented the design principle of wayfinding more in depthly was by simplifying the structure on each page, creating a more tailored navigation and filter and a product page structured with the inverted pyramid design principle.