Web design and UI

SWEDEN´S FIRST LOCAL FOOD STORE ONLINE

ASSIGNMENT

Fodi is Sweden's first local food store online. Their goal is to change the way Swedes shop for food. Their major focus is on local suppliers, personalized service, and environmentally friendly deliveries. As a tech company they use AI where the store learns their customers' shopping patterns.
Fodi needed help to redesign important parts of their digital service and also a new design for their website. I worked as a freelance consultant and took part in their first launch which was a big success and they are expanding to more areas in Stockholm.

SOLUTION

For the digital service project I collaborated together with a UX lead, PO, developers, and marketing team. In the other part of the project, their website, the responsibility for both visual design and UI was assigned to me. I worked closely with UX lead in discussing and creating user functions, flows, high fi mock ups, overall UI design and graphic assets. We had well structured design systems and symbol libraries. Finally everything was delivered as pixel perfect designs for the development team.

SERVICES:
UI design
Visual design

FODI WEB APP

For the the digital service project I collaborated together with a UX lead, PO, developers, and marketing team. The other part which was their website where the responsibility for both visual design and UI was assigned to me. I worked closely with UX lead in discussing and creating user functions, flows, high fi mock ups, overall UI design and graphic assets. We had well structured design systems and symbol libraries. Finally everything was delivered as pixel perfect designs for the development team.

Web app

PRODUCT ITEMS & CARDS

When shopping food it's essential to have a clear ovierview of the products when browsing and scrolling so as little "clutter" as possible would be ideal. One of those factors was adding a yellow-colored label for the comparative prices, the same way physical stores do, to easier identity and scan through especially in a bigger grid of product items. I also added a white border around the add/subtract buttons to make them more visible regardless of background image.

FODI WEBSITE

High fidelity mockups for the Fodi website linked to the online store. This site is the first encounter for the user and is mainly like a gateway to the store so the approach was a simple and informative layout. On the top menu, I placed a button that links to the store for those who already have an account and want to go directly to the store.

Web design and UI
Web design and UI
Web design and UI

DESIGN GUIDELINES & SYSTEMS

Here are a few assets from the design guidelines where I also created additional icons that would match accordingly to Fodi's existing brand guidelines. I worked with their design system and the library features in Sketch.

design guidelines

Söker du efter en engagerad och mångsidig designer?

Kontakt

Marisa Wang Pallin
Email: marisa@spiritarts.net
Tel: +46 (0) 765 63 53 75

Länkar

Portfolio