Korjuu - An ethically produced, high quality local food ecosystem, 2021, Helsinki (FI)
Korjuu is platform for ethically produced, high-quality local food. Korjuu aims at creating a healthy and efficient food ecosystem that reduces data fragmentation among actors and increases supply chain transparency through temporarily free-to-use services. Users can register either by creating new profiles or by logging in via Facebook. The platform has many innovative features to explore: products can be ordered and picked up either directly by the producer or from registered food venues. You can register as a participant in events or create your own. You can also join groups and participate in purchases, discussions, read, and write blog posts. As a producer, you can add an organization, products, product batches with different expiration dates, etc. You can further discuss about customized services by email on firstname.lastname@example.org. The following work showcases Korjuu’s UI/UX card development both for desktop and mobile platforms:
• Not always the higher contrast works better, in some ways it can actually be harder for the eyes.
• Black on white vs shade of grey.
• Dark grey as opposed to pure black.
• Calculate the right amount of contrast on different screen formats.
• Color calibration on the designer’s monitor could appear slightly lighter or darker than on the user’s.
• It's especially important have enough contrast on mobile, where users might be outdoors in bright spaces, or even moving while performing an action.
• Pure black text can cause more eye fatigue over long periods of time and can be more difficult to read for individuals with reading disorders (such as dyslexia).
• It’s important to test color legibility with real users in natural environments and on every possible device.
- Take into consideration Open Source or collaborative fonts like Google fonts: Work Sans, Source Sans, Chivo.
- Authentic Sans: varied weights like version 60, 90, 130, and 150.
- Consider premium typefaces from different platforms depending on budget, such as Type Network and oder foundries.
- OpenType formats (OTF, TTF) are cross-platform compatible, supporting widely expanded character sets and layout features.
- Ensure glyphs / set of symbols can be displayed on different languages.
- Test outline font formats on different browsers and devices.
- The size and layout of the text can influence the user's online reading experience.
- Bear in mind individuals with visual difficulties, who might struggle reading a small text.
- eye fatigue can be experienced by people with perfect vision when staring at screens for a long time
- Important to design quick and dynamic user flows across different layers of information and screen levels.
- Desktop fonts: Good readable body text: between 50-75 characters per line / 16 pt font.
- Mobile fonts: Small fonts on bright screen can be difficult to read. Use around 30 characters per line for mobile.
- Make sure the fonts allow to match the user's needs and experience and the product's business goals.
- Emphasize the details of the visual language.
- Elevate the hierarchy structure of the card.
- Color selection (create color system/primary ones).
- Use clear and simple fonts: Authentic Sans.
- Apply alignment, spacing, text size and contrast from the background.
- Make the card look clickable with small interactions.
- Do not use inline links – the card itself is a link.
- Use light shadowing to give cards a more realistic impression.
- How many cards do we display in a row?
- Set an intentional height and width of the cards.
- Make it easy to read, to learn about a product, to purchase.
Multi-platform prototyping (Desktop / Mobile)
- Web pages that have horizontal cards, or mobile devices that have vertical cards are easy to read.
- A card UI design on a website can help users easily navigate through various product categories.
- Social media sites apply card UI designs as it makes content easy to scroll.
- Card UI designs work well for many web or app pages and have multiple uses: they can display image galleries, textual content, downloadables, audio libraries, videos and many more.
- Card UI designs are responsive. They facilitate responsive design.
- They fit in any grid system
- The layout provide organization to the visual interface, which is designed according the user's needs.
- Provides relevant data, remove noise and set specific purpose: small cards, large cards, cards with avatars, cards with thumbnails, cards that link to a product detail page, cards with status, cards with metrics (number of times shared, or saved).
- How much information do I need? How can I use interaction? Hover state to display more information, select the card to go to a larger detail or page, set an intentional behaviour.
- Select one size for desktop and one size for mobile: they could have a variable width depending on the responsiveness of the environment.