UI/UX Trying to design the User Experience.
Website designs are made up of two key elements, the user interface or UI design and user experience or UX design. User interface design is everything visually that the user can see from the font chosen, to the colour palettes and icons. Things that are designed such as Shadows, gradients and the whole visual look of a webpage is the interface design. The user experience design is the way the web page makes someone feel when they are using it. User experience is not a creative design process but more functional and emotional system that is essential to websites that users love. A user experience designer has to really understand the end user, the market so they can anticipate their needs and satisfy them at every stage of the online process. User experience designers have to look at how people feel when they click a button or start a process and think of ways that they can make sure the user is never confused or frustrated with the website.
In the professional world, user interface design and user experience designers go hand in hand. To ensure successful outcomes, it is essential that the two teams work together effectively. There is, however, a lot of overlap between the rolls but also clear distinctions. For the FMP I am taking on more of the role of a user interface designer which means more focus on the visual and creative output rather than the experience. That said, the experience is vital in ensuring the website works as expected so I will be carrying out lots of user experience techniques such as interviewing users and creating prototypes and testing out what happens when different designs do different things.
Below are some of the concepts that were designed for the navigation menu of the website. The website had to contain some key elements, they had to include the branding, a search field which is very important as there's a lot of contents that users could potentially search for. It had to contain the main navigation pages, It had to include the checkout cart and icons for any additional features. From my user flow testing, I wanted the experience to have three main pages. Dashboard, Groceries and Discover on top of that I wanted a notebook aspect that was always visible. I tried out different layouts, and I intended to make sure it didn't feel cluttered or overwhelming.
On a modern web page, designers can take advantage of responsiveness and hover states, as most people's internet connections are reasonably quick, things can be designed to animate or change when certain actions are required. Below is an image concept for what happens when you hover over a food item. It pops out to show more information, it indicates that there are more images to look at and has buttons that let you add the food item to your cart. The three dots above the image show users that there are 3 images to look through, this is a small user experience feature that ensures users will not get frustrated and will understand what is going on.
The flow between the user interface and user experience design is a back and forth conversation. When something is needed, the experience is designed, the design is made, the experience is tested, and the design is amended based on feedback from the test. I made sure to get outside feedback and test prototypes wherever possible to ensure the process was is organic and as realistic as possible.