Concept for a restaurant ordering app with a very complex level of customization
This was inspired in part by the June 2019 Adobe XD Design Challenge, which was for a food delivery app.
As I was thinking more about the food ordering user experience, I started to think about the restaurants I frequent. Many of those places offer super-customizable meals: for example, half-chicken half-vegetable rice bowls, extra sauces, extra vegetables, etc.
The possibilities are endless, in the restaurant. If I order from one of these places online for pick-up, however, I cannot get the same extra customization that I would get when in the restaurant. The apps don't really allow for too much customization, sometimes they just offer a "notes" field, and if they're really busy, sometimes those notes get missed.
I thought that this would be an interesting UX challenge, so I created this concept.
Wireframes
From sketching and wireframing I could easily tell that a complex level of customization could lead to a busy and overwhelming UX, as these early wireframes for an ordering wizard show:
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/231156b4-415d-4cd5-b6d7-b621adf65f1e_rw_600.png?h=6a7d608728f20f24fc55e6ebdcf479b6)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/802dd659-86c8-460e-8e30-c4f376d15ade_rw_600.png?h=96d4589dc93922995960e8a8ee6eeb35)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/c0d31a13-45c4-4a6a-9916-3660e4da8995_rw_600.png?h=66d256fddcea0cfc963768296276995c)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/2198bcc9-9aa4-4519-98e4-3c7754faa39d_rw_600.png?h=c9e203b3c771753074d54058f64a075d)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/aa0498b8-b00d-4113-956a-08e139d043a5_rw_600.png?h=ece482a663aebc7c6ac2a07ddb38bd0a)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/6e1afacd-5dc2-4aa0-a50a-a52572d6210c_rw_600.png?h=b1293eddb236e5525458b088d364eefd)
These got overwhelming because not only did I have the buttons for customizations, but I also had to include information important to customers, such as allergens, spiciness, extra charges, and if something was sold out.
User Interface
I organized this content with a card-based solution, which was a better visual way to show that much data. I also added a step counter near the top and buttons on the bottom for next steps and to track order pricing:
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/bba97910-3fa4-47ca-b6d6-9d373dd90e76_rw_600.png?h=86fe88ce78ed1d2c051877c6c1e8d270)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/f264b09d-1891-4eb3-a10e-4eb2312e60e9_rw_600.png?h=ecd291529a26b99d99a7b83af6d8d151)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/3c5bba79-d220-4278-af0d-e3ac85bc35be_rw_600.png?h=bb32745aab6568d56c96e4c225a63574)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/2a495e45-f1db-44e0-be1f-75c3990b5194_rw_600.png?h=f9fa62cc7ed7732ec0e3eb4c49625e7e)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/9bcd0be9-c089-4a50-b34e-16a95dd4fc1a_rw_600.png?h=fe510584bfbdbf01e6916dced319914e)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/805f0ca1-2d3a-44af-8182-f5d1ee17d665_rw_600.png?h=ea166df51eae3a7e6b6369f2833f366e)
Final User Interface
When it came to choosing colors, I went for a dark purple and a light green theme. I also toned down the customization buttons and added iconography to the beginning of the ordering process to help customers better find their favorites:
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/98301a79-ad08-4f6b-a405-83c73b67d91a_rw_600.png?h=323104f07eac7a48c2751034c89c8876)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/e9a644f1-9dde-4c83-a697-14b07f70078b_rw_600.png?h=6fdbcd05dca625c2e02026ef4c0189c3)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/477498cb-0bdb-481a-bd1f-5d6babed8807_rw_600.png?h=4fe497c9807fb3a78ae33a0cb639298d)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/2224831b-3450-4b73-98bc-781b93dd2b81_rw_600.png?h=5529271373387763df52f367fd3f65f9)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/7a050e99-0ca7-4122-a5ef-3cd6afd631f9_rw_600.png?h=ef7483aac5be64b5f223c3c2d9e2e799)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/096eb914-7c42-4c35-91e5-e70db1b7eac0_rw_600.png?h=5bf4d33d4c993f0ca42f75085a8ef570)
![](https://cdn.myportfolio.com/20f34e5ef347645bfb42b4827a145ef8/d87926f2-6381-4c95-858d-c8638cae3e4e_rw_600.png?h=a07ed76610d7960f8b303d9705a0fa00)
The final prototype can be found here and embedded below: