mjam.at is the biggest food ordering platform of the Austrian market and a Delivery Hero Venture. With more and more competitors emerging we wanted to make the site responsive, make the user experience more pleasant and the UI more modern.
What I did
From the first wireframes over editing branding guidelines to the final touches on UI and preparing assets before development: I was the lead designer of the project. Easy to say, because I was the only designer on the project back then.
Challenges along the way
This time we had to fight against a very outdated backend. Instead of first merging to a newer backend system and then do the redesign, they decided to do it the other way around. We had to find out along the way, that the old backend didn’t like a modern responsive look, so the devs had to hack more and more lines of code, in order to make it work. Imagine a css doc with over 1200 lines of code. It was madness!
And unfortunately the other challenging factor was TIME. Design and development had to be squeezed into the last 3 months before christmas and with the new TV ads rolling out in December, we had just a little bit of pressure 🙂
What I’ve learned
If a client wants something super fast, I can deliver! My wireframes and final designs were pleasing and we received good feedback from the users. And here comes the big BUT: During the development there was no time for testing, not even for QA! A few basic user interviews would have done the job from the UX percepective. Fortunately management caught that need and launched 5 months after the promised launch date. Testing was one of the reasons. 🙂
Considering all the obstacles we had to overcome in order to launch, I can be really proud of the outcome.
My Role
UX & Web Design
Tools
Sketchapp
Invision
Branding Guidelines
Principle
Year
2016
See it in action
Wireframes and ux flow
As a basic starting point I used the old website, so I didn’t have to worry about the copy or the basic content. The happy path for new users was pretty simple: Enter postcode, choose a restaurant, choose dishes and customise them, checkout. However, with 90% returning customers, we had to worry about the logged in user more. So I made wireframes for the homepage with a more customised UX. The postcode search should be saved from the last time (with the possibility to edit) I was thinking about a teaser of the order history with re-order functionality, a list of favourite restaurants, favourite cuisines, restaurants close-by etc.
Unfortunately we found out along the way, that the old backend system will not support all these new features, so I couldn’t do much about a better experience for loyal customers. But Mjam had a feature none of the competitors had: Group ordering! Yay! So I made a ux-flow on how to improve that. For the homepage the Marketing team had a huge wishlist with lots of different content. So also started off with wireframes with content blocks, which were supposed to be exchangable, depending on what they wanted to test. So we had a very good base for internal discussions and we settled for a simple solution. Here is the block wireframe:
Branding
The branding team provided the new logo, but colors, typo and imagery were determined by me. I wanted to give the brand a more modern and fresh look without loosing the connection to a traditional Austrian look & feel.
Responsive Web Design
The main flow is pretty simple: Enter postcode, select restaurant, select food, customize dishes, checkout. With all favourite restaurants and the order history on the homepage, we wanted to create a more customized exerience for the returning user. With the difficult backend system situation, some of my original wireframes and functionalities had to be altered or simplified, e.g. filtering/searching on restaurant menu. Also, sometimes the team needed the final visuals in order to make a decision on the final content.
