Pasmosa/Wine
Building a fresh new website for a fresh new wine brand.
Screen
Mobile
Tablet
Desktop
My Role
UX Researcher
UI Designer
Tools
Figma
Accessible Colors
Attest
Fig Jam
Teammates
Roy aka Graphic Designer
Brian aka Full Stack Developer
Timeline
3 weeks
Background/Problem
Pasmosa is a Sangria wine company that imports their wine from a family-owned winery in Castilla La Mancha, Spain. They have established their name on the west coast and sells in many renown grocery stores like Albertsons, Vons, Food4less, and Total Wine & More.
The owner approached our agency to create a contemporary website. We started the process with a questionnaire, asking the owner for his wants, needs, references, etc…
Once we gathered the information needed, we started the research phase.
Design Process
Research
Competitive Analysis: Similar products already existed
To start with research, I analyzed 4 competitors in the Alcohol Beverage industry(Barefoot, La Crema, Josh Cellars, and Kim Crawford).
I learned that:
Barefoot is our main competitor due to being the most reputable brand, awarded the best Sangria brand, and overall having the most simplistic user experience.
La Crema aims to make its platform accessible to a wide range of users, including those with disabilities. This includes considerations for screen readers, keyboard navigation, and other accessibility features.
Kim Crawford offers sorting options.
Josh Cellar’s Checkout process was user-friendly and streamlined. The platform typically offers a clear and straightforward checkout flow for users to search for an array of wines.
Barefoot offers a feature that allows users locate the product at stores nearby. This is a must have feature for the Pasmosa website.
Interviews and Surveys
With being on a tight deadline, unfortunately we were not able to conduct user interviews. But, I decided to create a quick online survey through Attest and send out the survey via my instagram story. I was able to capture 61 responses and had a better understanding of what features I should prioritize.
These are the results of the online survey. I learned to never assume. Always rely on user data rather than a design team’s assumptions. The image below either validated or disqualified our assumptions.
I decided to ask the audience what features they would find most helpful. This also gives us a better perspective on what features should be prioritized.
Another question I asked was “what type of content would you like to see on our website?..” This also gives us a better idea on what content should be on the spotlight.
After gathering the data needed, it was time to brainstorm the product goals.
Strategy
PRODUCT GOALS
Design
Once I identified the product goals, I started to incorporate the product goals in my responsive design sketches. Ensuring certain features or sections were added. My process for narrowing down my ideas consisted of receiving feedback, making changes, and then doing the process over again.
It was a challenge figuring out where each card would be placed when converting from desktop to mobile and if certain descriptions should not be included. But after many group critiques and iterations with the design team , I was able to figure out the wireframe that made the most sense.
Brainstorming where and why each element in the interface should be placed is important to a simple user interface. Our design team decided to look back on the wants and needs of the stakeholder/user data to reflect on what pages/features we should prioritized with the short deadline given.
Our team started working on the on the mid-fidelity wireframes to get the ideas from our sketches - on Figma. It was time to focus on the alignment of the layout, double checking - sometimes triple checking that my auto layout parameters were the same for every section.
Desktop
Tablet
Mobile
After the triple checking the mid-fidelity wireframes, it was time to plug in the imagery, word content, and UI kit to create the high fidelity mock ups for the stakeholders.
Developing standard operating procedures is essential for streamlining workflow. I was responsible for creating SOPs for my design department, as we didn't have any in place due to being a startup. Creating a UI kit is vital to making sure your team is on the same page with the typography, color hues, and branding. With the minimum amount of time, I only had time to create a typography and color kit for Pasmosa.
Prototype
After constant feedback and many iterations, I found an arrangement that made the most sense experience wise. We had a couple road bumps with the stakeholders. They wanted a unique widget made for the home page, but we didn’t have the time to create the widget. We were able to finish the necessity pages that the stakeholders wanted, but unfortunately not the special requests.
Secondly, they wanted to change the scope of work mid-way through the project. We were able to accommodate the request, but it would have pushed our deadline back.
Learned some animation techniques along the way and below is the final mock up of the site with all the animations included.
Final Product
Conclusion
After this two week sprint, our goal was to build a contemporary website. I took home some new techniques that I can implement for future projects. A couple success metrics we met before the product was launched was getting our image load time down by 1.28 seconds and ensuring the website is 100% accessible to all demographics. We thankfully passed the WCAG.
What I would have done differently if I had more time, would be prioritizing the UI kit and completing the components section so our workflow would have been more fluid.
It was a challenge to change the scope of work in the midst of the project since we had to move around our road map. The stakeholders wanted an additional page to be added for their social club idea. I wouldn’t call it a change of requirements but a special requests that was given. We were able to carve time in our schedule and had some additional hands to help us still meet the deadline.
Since launching the website, Pasmosa has seen a 33% monthly increase in E-commerce sales, 12% increase in social media traffic, and 18% increase in lead generation just from the website alone.
Overall, it was a great learning experience. Understanding how to work in a team setting, working with stakeholders, and knowing how to overcome obstacles during a project.