A Completely Different Outlook
Whilst designing this, I didn’t feel as though I liked the work I was producing, almost like it was lacking something, but not in the idea itself, just in the way I was designing it. And so, I went back to my wireframes, had a little play around nay looking at what people had said about ‘thrill,’ and ‘food,’ and rejigged the way I had laid out my frames, to make the experience a little bit more thrilling. The concept / idea that I had (with the help of Rob) was to fully make the process of receiving your meal, from start to finish, as mysterious as possible. The user in the original concept could choose what they liked and didn’t like, and whilst that remained a key idea, the whole process was flipped to be that of a mystery basket, as the user could favourite meals or whole cuisines into their liked, and from there, the website shuffles and finds meals for them to be delivered, with the user not having a clue what they have actually ordered. When I asked people what they found thrilling, their general response was ‘something new,’ ‘something spontaneous,’ and ‘something they weren’t expecting.’ I feel as though this concept, if done correctly, could represent all of these things, and to start this, I built a few base components. However, I felt as though it didn’t quite match the concept of thrill seekers, so I looked into a different option, which was ‘Gamers.’ I researched different elements of ‘games,’ and landed on the concept of board games, which I eventually chose to focus on monopoly, because it has a strong design system and I felt as though the jargon of ‘rolling the dice,’ and ‘taking a chance,’ would work really well. Below is the process of going from the original idea, to the latest version to carry on with in the ‘Prototyping’ post.
Components Part One
These elements below were a part of an idea that I didn’t continue on with, from here on out, I focused on the components under the post ‘Prototyping’ found here : https://www.nua-ux.design/hanley-whelpton/blog/uncategorized/design-an-experience-prototyping/
I settled on a tinder swipe system in order to create a section where the user could choose their preferences. In order to begin creating this, I had to first make a stack of cards that could be used throughout the webpage. I settled on a rectangular shape with curved edges to match the theme, messed around with type for a little bit, and chose two different colours to add a bit of depth to the stack. I used a handwritten type as shown in the Design System (link) to test some buttons for the user to click, but felt as if it gave away the interactive motion of swiping, which prospective users mentioned they liked the idea of due to the nature of literally throwing something away.
Above are these versions of components, before I decided to change the layout slightly, by placing the emphasis purely on swiping, and having the buttons only pass through the screen when the user interacts as shown below.
I also followed this up by developing some more components that I thought to be useful, as well as ones on the wireframes that followed the Heuristics, such as the clicked state of the navigation bar, giving the user a signifier of their actions. I also created clicked state buttons for the vg, gf, and v options on the page, so that the user could select any and all at the same time, even removing ones previously chosen.
Sliding Interaction
To create the sliding interaction, I first placed all of my componants on the page, and used instances to change their names, add photos to them and create the variations needed to show different ingredients to the user. I then stacked all of these, minimising each one as they went down, to provide an extra elements of growth as the user swipes through. It was important to then make the ‘love it,’ and ‘hate it,’ buttons invisible until the interaction occurs. I originally created the buttons to be ‘love it,’ on the right, and ‘hate it,’ on the left, similar to that of the way that you would swipe on any other device, following the consistency and standards ideology from Neilson’s 10 heuristics. However, when swiping, the user would have less time to be shown this, and so, I swapped the way that the buttons were, and tested it to see if it worked.
I eventually changed the style of this, and the way that the slides looked, however, the process was the same. I looked into swiping left and right after just giving the user instructions, as well as buttons, to see which worked best for the user. I asked 3 people to look at the products prototype, and see which they preferred. I found that. a lot of people went to naturally swipe when they saw the way that the page was designed and laid out.
Wireframe’s Put Against Principles
The wireframes that I had created for this product were really strong, and I kept the design style of them as they seemed to be quite strong mid fidelity wireframes. I put them against the 7 design principles to check they had the aspects needed, and I continued to do this throughout the process to check my components.
The miro board link for this process : https://miro.com/app/board/uXjVNU5os7A=/?moveToWidget=3458764568471496712&cot=14
Updated Research
I continued to look at food and drinks, as well as what would be considered different ‘gaming,’ techniques etc. This was my research for these sections below!
Below is some research for the ‘monopoly,’ central section, where I looked at different design systems, drew up some quick sketchy illustrations to tests style, and looked into concept of character and their history a little bit.
