#ixd501research

[calumdixon]

Business Platform Information Architecture 

In addition to my Consumer platform, Pitch In also has a Business platform which makes it easy for local businesses on the platform to manage their presence on the platform. I split the business platform into three sections, the validate goods section which holds the QR code scanner that can be used to validate the collection of goods, the My Business section that allows for local business to manage their business details as well as change the goods and services they provide on the platform, lastly the app has a settings section that similar to the one found on the Consumer platform where a user can manage their individual details and settings.

[calumdixon]

Pitch In Progress Report #01: First Steps

What is the project and where do we stand?

Content Design - Progression Update 1

For my second blog post on Medium I wanted to give an overview of how the design/build of Pitch In is going, simply as way to demonstrate my process throughout the project. What can be found inside is an outline of what has been done since the start of the project as well as what my next steps are.

[calumdixon]

UI Inspiration - Deliveroo

Deliveroo is a great example of an app putting key information in front of the user and then having drill down for more detailed explanations. For instance, looking at the list of businesses that are available on Deliveroo, there are lots of key information being delivered from just a small thumbnail. In one example we can see the name of a business, the type of goods they sell, their rating, how far they are, business imagery, how long they take on average to deliver food and if they have any special promotions on such as free delivery or 20% off. All of this information is conveyed in a small amount of space while also not becoming overwhelming because of the fact that the information is conveyed in different ways rather than just presenting a list of stats underneath the business imagery.

Another aspect of Deliveroo that I really like is that similarly to the previously discussed Bolt, Deliveroo makes heavy use of sticky/floating elements such, an example would be the button used to apply filters. The use of sticky elements is great from a UX stand point as it helps ensure key screen interactions are always available no matter where a user is on the page.

Deliveroo is another good example of iconography being used to great effect. Icons accompany in app actions and help distinguish key information on the page. The best example of this is when viewing a restaurant’s page. Delivery information, ongoing deals/offers and additional restaurant info are all presented beside each other but through the use of icons the actions are much better visually separated making the details of the page much easier to digest.

Lastly, Deliveroo is another good example of colour being used to make screens easier to digest as well as being used to better highlight key information throughout the app’s screens. Deliveroo uses vibrant colours to effectively highlight text that has interactions associated with it as well as using more subtle shades for information that has less importance so as to not compete for attention with other surrounding content. 

[calumdixon]

UI Inspiration - Bolt

Bolt is another app I found that was great inspiration for what I wanted from my app. What I loved about Bolt was that it had an very good overall text heicharcy in place and also managed to build upon the “softer” UI appearance I discussed when I talked about Shopify’s Polaris. Bolt build upon this through the addition of drop shadows and using lighter tones through elements such as their iconography. That said, I do think that if were to star using a similar approach I would not be as heavy handed with the use of lighter tones in iconography as I think in the case of bolt they may be too light. The drop shadows are make sense from a usability stand point as they are applied to sticky and drawer elements, so the use of drop shadows help indicate they are a layer above the content underneath. 

Bolt’s inclusion of floating/sticky elements is probably my favourite aspect of it’s design as it works very well with the google map embeded into the app and also makes sure that important actions are always present even if the page’s content exceeds the height of the viewport. 

Although, one aspect of Bolt I disliked was the fact that there was inconsistency across input in the app, for example the search inputs change between the home screen seen above, and the set stop location (also seen above). From a UX and consistency stand point it is important that elements remain consistent, in the case of Bolt there is little reason for the icon to move to right hand side or for the input to change colour. The change could be confusing to some users and should be avoided.

[calumdixon]

UI Inspiration - Google Maps

With Pitch In being an app that places a focus on helping the user’s local community I felt it would be important to provide a map view within the app as a way of visualising the locality of businesses on the app. As part of my inspiration for my Map views I immediately turned to Google Maps since it has been refined and improved for years and understandably become the world’s most popular maps app. 

Google maps manages their maps incredibly well, The first detail I loved was how google maps includes various different types of map markers, for instance there is the standard red pin for locations that match a user’s search request but there are also category markers for when users haven’t sent a search request. These category markers can be anything from an orange pin with a drink to a blue marker with a store icon, the point of them is that they help indicate to user the type of location they are looking without having to read their accompanying label. Another detail I loved was how google tailors the actions are available to user based on what is most relevant to them within the scenario they are in, for instance, when viewing a location quicker filters disappear and are replaced with an option to find similar locations as filtering is no longer relevant. This isn’t to say this approach is appropriate for Pitch In but it makes a good point around usability for considering what should be visible at different stages of a user’s journey through the app and if there is possibly more relevant content that could be shown to them. 

[calumdixon]

UI Inspiration - Twitch TV Mobile

Twitch is another example of an app in which I like many of the things they have done but there are also number of negative aspects that hold it back. What I really liked about Twitch’s mobile experience was its use of unique layouts such as category carousels that make it easy for twitch to provide a varied list of different types of content within a small amount of vertical space, rather than having users scrolling continuously till they find something they would like to watch. Another point worth mentioning is that I think Twitch is a great example of dark mode done correctly, if you are aware of Twitch as a platform yo may know that almost every user of the platform uses dark mode because of how well received it is. In addition, I also really like how Twitch makes use of tags/badges to provide users with key traits of steams such as what language the stream is in and what kind of games the streamer may play. These similar system could easily be applied to Pitch In such as using tags to let users know the type of goods are redeemable from a provider.

While there is a lot that I like about Twitch, there are a few things I am not a fan of, for example Twitch will sometimes use icons for in-app actions but provide them with a label making it difficult for users to understand without leaving the screen they are already on. 

[calumdixon]

UI Inspiration - Uber Eats

The next UI inspiration I found that I really enjoyed is Uber Eats. Uber eats had aspects I both disliked and loved. The aspects of Uber eats I liked were how it managed were how it used it’s wider range of types sizes to create an a very effective type heicharcy, making it easier to digest screens that were quite text heavy. I was also a big fan of the how Uber eats tackled the issues of maps,  using small bubbles to represent each restaurant and using their rating (falls back to an icon if no ratings present) as way to help users make a determine which one they might like without even needing to tap. I also loved how Uber used tabs throughout to help navigate the app, for instance you on the home the suer uses tabs to select if they are looking to collect or have their food delivered. However, my favourite example was easily the use of an overflow tab bar that included all the different subcategories of food that a restaurant served. This implementation makes it quick and easy to find the kind of food you are looking for, for instance a pizza tab might exist in an italian restaurant’s menu so users looking to eat pizza can quickly access what they want. Overall I’m a fan of the layouts in uber eats and how it utilises overflows to information easily accessible, an example would be the inclusion of quick food filters on the home page, that make it easy for users to filter their options without needing to go to the filter page, and by using overflow behaviour they can add many different quick food filters without adding excessive vertical space that might annoy a mobile user. 

What I wasn’t as much of a fan of was how Uber Eats used colour, for the most part everything was good but there are examples of poor usability I would not like to adopt, for example the navigation items that are inactive use a light shade of grey that would be hard to read for anyone that is visually impaired.

[calumdixon]

UI Inspiration - Airbnb

While looking for UI inspiration I fell in love with Airbnb’s UI Design. I hadn’t actually used Airbnb up until this point so I wasn’t aware of what it looked like.The design of airbnb is one that incredibly effective and minimal. Colour is again used sparingly so as to only highlight the content that matters most. I also really liked that airbnb were weren’t afraid of giving screen elements lots of room to breathe, the amount of padding between elements gives Airbnb gives off the exact opposite feeling of a design being too cluttered and overwhelming. Another point that is similar to the previously talked about Monzo is that Airbnb accents a lot of key information and in-app actions with iconography to help distinction actionable text from text that purely descriptive, it helps give off a more professional feel while also  providing a more intuitive UX experience.

Another aspect I really liked about airbnb was it’s approach to filters, Airbnb avoids using patterns that are often clunky to use such as sliders in favour of simply using check boxes, toggles and steppers which can all be controlled through a single tap and have little to no margin for error. Sliders can be an effective pattern so long as their range isn’t too large, as at this point it becomes very difficult to get a specific number on devices with small screens such as a smartphone.