WineMatch (Part Two)
Link to Part one
Design Trend 1: Personalised and Customised Experiences
Personalisation refers to using user behaviour data and machine learning to deliver content that explicitly matches each user’s needs or interests. Some examples include curated show recommendations from Netflix and pre-made Spotify playlists. Personalised Experiences are becoming a regular part of UX nowadays as they help businesses target users more explicitly and provide more convenient online experiences.
Customisation is slightly different as the user is the one who does it. It allows users to choose what they want to see and set their preferences on how they wish the application would look.
Since it allows users to control their interaction, it can enhance the user experience and make the user more comfortable with the application. Some examples include the weather app enabling users to add in different cities or the ability to move what information the user wants in their widgets.
The research validated our idea of having a quiz as the premise of the web app as it’s a very personalised experience and helped us understand more about what other features we could use to create personalised experiences.
Design Trend 2: Microinteractions
Microinteractions aren’t anything new. However, they continue to grow each year. They are known as small animations that help the user by communicating changes clearly through visual feedback. The two types of interactions are system-triggered and user-triggered. A system-triggered example would be a notification, while a user-triggered one would be a pull-to-refresh animation. Using these animations where they need to be and are functional is essential. Only focusing on the aesthetic animations ends up leaving the UI feeling cluttered. It was really fun to research micro-interactions as they all add a little touch of something to the design, making sure to capture the users attention. They can also be personalised really well to the specific topic that you have.
Ideation and Three Concepts:
As a team, we ideated first on what kind of features we thought were best, what the main layout should look like, what kind of design idea we had etc. Diverse perspectives always help to bring out a variety of ideas. As the UX Designer, Feedback and Refinement of sketches helped to create a clear layout for the website, and generate far clearer ideas from what we had at the start.
We started with three options of designs, the first being based on a sense of “fun” and “friends” — targeted more towards the younger half of our target audience. It featured a lot of bright colours and bold illustrations. As our primary audience was people new to wines, we hoped to provide a fun environment that would make them comfortable and excited, so this design focused on that.
The second design was more on par with how traditional wine websites usually look, with slightly darker mature colours and thin straight lines, trying to convey a more natural and professional look. It felt very cohesive and like everything came together well at the end. We experimented with keeping this pretty minimal to see how it would gel with our idea.
The third design was inspired by the boho aesthetic that’s relatively popular nowadays, especially in the early to late 20s. It’s very minimalist, with only a few colours chosen and some curved shapes and thin lines for the illustrations. The photographs selected were very light, with no dark colours used, because we wanted to create a more delicate and airy atmosphere. The deep red colour was chosen as a link to wine, and a beige palette was selected for the rest of the design. We felt this was the perfect balance between being playful and sophisticated.
Visual Design Language
Three different mood boards were compiled to evaluate the best approach forward, and I also created three different mockups based on these mood boards. I made all three very diverse, as it would make it easier to decide which one stood out the most and what elements we could merge instead. Ultimately, we agreed on number three as the balance between “sophistication” and “laid-back” was the best done.
During this, the design went through a lot of iterations. There were illustrations added in and then taken out due to overcrowding; a new feature was added, and the mobile mockup was also changed. I experimented with different kinds of illustrations and found ones that stayed a consistent style throughout the whole web app. Along with this, User-Flows were also created to have a clearer idea of which pages link to which and what the user journey will look like as they go through the app.
High Fidelity Mockups and Prototype
I expanded more on the mockups of the main screens and made these final. This included the Home Screen, the Quiz Page, Results Page, Log In Page and Account Page. These were submitted for the first assignment and then for the second assignments, I refined these, created more screens and made the mockups intractable through prototyping on Figma.
Prototype #1
A video walkthrough through the first prototype. User testing was done and feedback was given, allowing me to refine the design based on feedback. Most of the feedback was good, with only a few small things. Most was focused around two things; making the user account section more user-friendly and making the lucky guess section more interactive.
I went back and worked more on both of these sections, creating an interaction for the Lucky Guess section and cleaning up the User Account section so that users could easily understand what they needed to do.. I also added in an admin account section, along with notifications for when a user favourites a drink and a Home Page for logged in Users. With the Quiz Results page, we decided to include 3 wines instead of just 1 and therefore I created button to swipe through the three wines. A user specific home page was also created, and the final designs for the mobile screens were also created.
Prototype #2
The final prototype before the design was handed off to the developer.
Link to Figma Prototypes:
Link to website: https://wine-profiler-app.vercel.app/
