Research
Competitive Analysis
A competitive analysis was done to identify the industry standards of a wholesale liquor website. This also allowed me to highlight the successes and flaws of the competition.
With that I learned these key points:
- Competitor sites have styling that is outdated.
- The designs focus on functionality but are contradicted by redundant information.
- Each company has a "hero" product that is marketed more than others.
User Interviews
The next step of research was to run some interviews. The first round of research consisted of gathering thoughts and opinions from the founder of the company. The second round of interviews would be of the websites potential users. These interviews were intended to help the designs empathize with founder/user's values and experiences.
After interviewing, I discovered:
- Chinese Liquors are the dominant product for the company.
- A Digital catalog provides easy access for more customers and costs less than printing and sending catalog books.
- Brand, Description, and ABV are the first pieces of information users look for.
- Pictures register first, and then text, but if the text firmly supports the image, even better.
Design
A site map is important in this design process as it serves as the guideline of vital information. It not only adds a hierarchy to the information, it prevents the design from having redundant information and staves off issues found in reductionism.
Pictured above is a simple site map that shows the different web pages a user can navigate.
- In purple, these key pages allow for the user to learn about the company, browse the inventory available, and contact the company for purchase opportunities.
- In green, the subpages of the "Catalog" section allow for users to browse the wide selection of products with a varying scopes. This not only prevents users from getting lost but also allows customers who focus in specialties to browse the content efficiently.
User Flow
This user flow follows the projected process of an average user: The inquiry of a product and then the contacting of the company for a purchase application.
It is important to note that wholesale liquor laws restrict the wholesaler to sell direct to consumer. Superior Fresh is bound to that constraint and therefore must check that the customers have proper documents prior to sales. As this was previously done in person or through fax, many people were unable to apply to be customers if they did not have their paperwork on hand.
This potential pain point was eased by:
- Allowing customers to contact Superior Fresh though email.
- Allowing potential customers to declare the necessary documents digitally.
Logo Iterations
Superior Fresh started as a small business and thus never invested in a proper logo. Being a well established business, they wanted a new logo that would remain simple and include many of the same elements as the physical sign on their building.
Logo explorations started with explorations in different Chinese font styles.
The "Inc." part of the name equated to two Chinese characters and was deemed unnecessary. By removing "公司" the logo better emphasizes the company's moniker.
- Color exploration was limited to the significant colors found in Chinese culture. Red represent joy and happiness, key aspects of drinking culture. Green represented cleanliness and purity from contamination, an important distinction for liquor.
- The diamond represents the 4 cardinal directions and the octagon, or bagua, represents the natural forces. As a whole these symbol give direction and balance to the company.
- Bottle silhouettes were explored as potential symbols.
- The final logo incorporates a simple design the in reminiscent of the original sign. Nonessential parts of the original sign were removed. The shape and color used harmonized with the owner and accurately represented the company's values.
Sketches
Style Elements
Logo
Color
Typography
David Libre (Logo)
David Libre (Content)
Low Fidelity Mockups
Homepage
About Us Page
Catalog Page
Product Page
Contact Page
A quick and dirty low fidelity mockup was made and it served as starting point for the website. This mock up helped to identify potential issues that might arise when designing the end product. Among those issues were:
- Text is one of my weakest areas, and in retrospect, I found issues such as contrast, size, legibility, and hierarchy.
- Alignment and grouping of components, sizing, and spacing all led to a confused hierarchy.
- I found that in an attempt to remain minimal, I actually started to trend toward reductionism. Reductionism in these areas resulted in an inefficient use of blank space but also caused components to crowd in other areas.
High Fidelity Designs
Homepage
Catalog Page
Product Page
Contact Page
In this high fidelity mockup, there was a focus on making text more legible and creating a more consistent hierarchy of information. Along with that, some other improvements were made:
- To amend the reductionism addressed in the initial mockup, all the "floating" elements were given a container to call home.
- Text was given more contrast with their containers to enhance legibility. Some background images such as the Homepage were also changed to create a better canvas for the text. The original image had too much happening and distracted from the information.
- Some placeholder and filler elements were replaced with more utilitarian elements. This can be seen on the Contact page where flowers were replaced with an image of map and a button that links to google maps for directions.
Usability Testing
The results of the usability tests revealed that changes were necessary in these areas:
- Text legibility and contrast needed to be adjusted again. This was especially apparent for the search bars and body texts.
- 60% of users still found some background images to be "distracting".
- The product images were very poorly shot and the need for professional photos needed to be reassessed.
- Users often mentioned that the Product page felt "skinny" and "tight".
Priority Revisions
The results of the usability tests affirmed that the website did not meet the owner's expectations and the needs of the users. That being said, many small improvements were made. The improvements made can be seen below.
Home Page
The implementation of octagons were to represent the "bagua mirrors" found in Chinese feng shui. The solid octagons did a poor job as they were too big and occupied too much space on the page. By changing the octagon from a solid shape to more of a border around the image, it better portrays mirror like representations.
With a opaque carousel background, the page break while scrolling is less stark and reduces attention draw to allow for the CTA to take a clearer hierarchy over the carousel.
- Background images were replaced with relevant alternatives for better contrast and overall a cleaner feel.
Product Page
- A sample of product images were shot professionally to showcase the importance of consistency in the images. This presents a cleaner image of the products and ties together the styling of the website as well.
- The sorting options on the product page were occupying too much space so they were moved to the top, under the search bar. This allows for more breathing room and solves the issue of the page and its content feeling "skinny" and "tight".
- The background image was replaced and adjusted to be less distracting from the products.
- The map was removed because it did not end up helping with the project goal, to help the business trend towards less physical interactions. And so, the customer application form takes center stage.
- The owner mentioned that many people inquire about purchasing but do not realize that a resale license is required before purchasing from a wholesaler like Superior Fresh. By adding a PDF link, everyone is able to preview the application process and prepare necessary documents, streamlining the business interactions.
- Having a separate form for contacting the business serves as a convenience to users and allows for the business to address more general inquiries.
- Some changes for the next iteration would be to add an Email address in the contacts list and a legend for the required fields ex. (* = Required).
Prototype & Revise
The quantity of products from Superior Fresh is significantly more than what was presented in the prototype. The next step is to continue to test the prototype on larger scale with more photos and category options. A larger sample size will better reveal the small pain points that were missed in initial testing. With pain points revealed, revisions can be made to make sure the app as a whole is ready for open beta testing.
Handoff
After final revisions are made, a presentation will be made for the owner of Superior Fresh. Along with that meeting, discussions can be made on future website management and potential refreshes.
.png)