— UX | UI | Frontend development
Splitscreen Jespers torvekøkken
Jespers Torvekøkken produces delicious lunches for companies in Denmark and also catering for events. Their ambition is to create tasty, healthy lunches and catering with fresh and seasonal vegetables and avoid food waste.
at Smartpage A/S
Help the user to get the right area from the beginning
The problem for the project
Understanding the user
The design process
Final solution and thoughts
01. the problem
The problem Jespers Torvekøkken wanted to direct the customer to the right departments in Denmark, but didn’t know the best and user friendly way to ensure that the customer got to the right place from the beginning when visiting the site.
02. Understand the user
There are two main users/visitors of the site. Firstly the people who want to be part of the lunch arrangements in their company to provide delicious healthy lunches for their employees place someone in Denmark. Lastly, the second user group are people that want to order catering for special events can either be private or companies.
To provide an optimal and easy way for people to select their region and be given the possibilities for the right information in their area was the priority.
Companies that need lunch for its employees
People that need catering for events
03. the design process
the right fit
I started considering different possibilities for the best user friendly way to ensure that a customer would be navigated to the right city/region from the first time they visit the website.
One option was to use a location tracking on the website, this will allow us to tracking the customers location and send them to the right area of the website. A downside to this will reguire the user have activated location tracking for the website. Another option was to create landing page with a dropdown selector for the different regions/cities, this is great when having multiple options, this option would make more sense if there were more than a few options to choose from.
The option that made the most sense to this project was a splitscreen, because they only had two regions/cities and they has a wish for it to standout and be visual.
Though the design process, one of the areas in interaction design I focused on was the usability. Designing of the core elements of usability was to ensure that the design was easy to learn and navigate in for first time users. Also, the usability focus would also help to ensure that they would be able to achieve the task efficiently.
I have developed a responsive design that took in consideration the different users that have various of screen sizes when using the website. The interaction difference between desktop and mobile devices such as touch screen requires an optimizaition for the design to fit de individual device such as hover effects and animations when hovering.
User Interface Design
When designing the splitscreen from a UI-perspective, i used the brand identity that Jespers Torvekøkken already had to ensure a consistent design and visual expression, that included the color scheme and font choice. Besides that i worked with the gestalt principles such as Harmony by repeating the same region/city option design so it was easier for the user to understand the it was different but had same purpose. Also, i used the principles of balance to ensure symmetry in the design of the splitscreen.
“Design First, Program Second” – Prototyping
The project was run from a princip called “Design first, program second”, which was to ensure the requirements was met and every detailed was handled before it was put into production. That included doing a high fidelty prototype in Adobe XD that illustrated the repsonsiveness and the interactions with animations, but also the complete UI-Design. With this done it was easy to hand it over to the programmer, so they had everything the need for it to be developed.
04. solution & thoughts
The final solution ended up with a splitscreen that was responsive and solved the problem of users not getting to the right region/city by presenting them with a visual selection when accessing the website for the first time. There was also added a cookie option for the users selection to be saved for a short amount of time, to ensure the user experience of the selection.