CECILIA'S PORTFOLIO
Sarnies Sandwich - Extended Version
This is the extension project from Project 1. Just to re-cap, I have picked a food ordering service project and related this to a real-life scenario case - I called this shop Sarnies.
​
Sarnies is a regional sandwich establishment & located in the financial districts. They strive to deliver superior; quality sandwiches and provide the flexibility for people to first choose the kind of bread, filling; condiments, and dressing. They target busy professionals. Currently, Sarnies do not provide any ordering app; the existing website only provides information about the company.
​
In this project, we will use another tool called Adobe XD and concentrate more on the total solutions i.e., individual orders (dealt with previously) and group orders all in one application. I'll put more focus on the group order as currently, not too much business is coming from the Group catering service due to the complexity of the current model. Focus will be extended to cover items from the promotion prospectives i.e., inbox and landing page.
Project Duration - April 2023 to May 2023 around a couple of hours a day
The Problem
The company is facing challenges as there is always a long queue at core hours and customers tend to leave the premise before they even order. Currently, Sarnies do not provide any ordering app and the existing website only provides information about the company. The current catering process is complex and is a completely different process, it has not gained too much traction in the market.
​
My Role
UX researcher as well as UX designer designing an app for Sarnies from taking an idea to reality by exploring UX Research Methods & leveraging the UX Design Framework.
The Goal
Sanies have conducted several activities to empathize with users, define their problems, created wireframes & developed prototypes. The company is determined a website/app must be in place and the goal of this project is to consider the effectiveness of this total solution design so that customers can seamlessly order & schedule their pick-up time.
​
Responsibilities
From research, competitors’ analysis, conducting interviews, paper & digital wireframing, presentation and low/ high-fidelity prototyping to conducting usability studies. Include accessibility and iterating on designs to ensure they conform to the WCAG standards.
Methodology
The methodology used is based on UX Design Framework - Design Thinking Process. The attached listed the actual processes I took as well as the deliverables created in each stage of the framework Not all the deliverables are attached here in the case study but kindly reach out if you need specific information.
User Research Summary
I conducted interviews and have identified all the information that can be put forward to an empathy map. Several groups are being identified but will focus on a primary user group here which is young professionals working in commercial centres.
​
This user group confirmed initial assumptions about Sarnies' customers, these people have tight schedules due to their work nature and always need to make quick food orders from outside and consume at work, possibly at their desk or in the office pantry. This group makes regular visits to Sarnies due to the loyalty incentive given.
​
Research also revealed this group compare their ordering experience to the technology experience they encountered at work and even from other restaurants that already have mobile ordering services.
User Pain Points
01
Long Waiting Time
​Ususally spend 1-2 mins reading the menu before ordering. Shop assistance need to ask about their choices verbally one by one while preparing for the order. Each order would take up to >5 mins per order excluding the time you have to wait in line.
03
Mislaid Loyalty Card
The shop gives out physical paper loyalty card. The card is small, and customer keeps mislaying or losing them.
Breakfast and group order does not count towards loyalty.
02
Complex Group Order
Difficult group ordering service. First the catering menu is not very clear with their items. A completely different process for ordering. Call in then email/WhatsApp making customer completely avoid ordering from Sarnies.
04
No App Ordering
Currently all ordering have to done physcially as no alternative available.
Waiting time seems to be avoidable and customer by-pass this issue by going before /after core hours.
From Ideas to Final Wireframe Selection
Based on the competitive audit. The design has to be clean and neat providing a seamless ordering process. In addition, it will have a re-order functionality and feedback incorporated. reward option and group orders have to be incorporated into the same application. Brand awareness has to be fulfilled during the design process and all these are the core components. Because the group catering is currently not doing too well and hence the landing page will highlight the group ordering features plus the individual option as well, hence the ideas. The final version is selected for prototyping using Adobe XD to create a responsive website.
Ideas
Final
Design and Functionalities Thought Process
The individual ordering has been dealt with in Case Study 1 previously and hence to further improve this application. I have focused on the group catering services as well as the marketing and promotion in this app and put in the relevant to ease the promotion process.
These overall features are considered in the design phase as these will solve user frustrations.
Quick and seamless ordering process to save time for the customer. Enhanced icons with attractive pictures to enhance user experience.
The user has the flexibility to choose the pickup time.
​Redemption available will be automatically shown up during the payment process. Users can also sign on to their account and check for their profile, reward option, and last transactions with re-order capability as well as go into the application inbox to check for the promotion items. The inbox feature within the application will be good to avoid too many emails and promotion items going directly into the user email to create bulk emails which would result in annoyance.
The current app is able to handle individual as well as group catering orders which is a competitive advantage as currently the sandwich market seems to be missing this consolidation.
​
From Paper Wireframe to Digital to Low Fidelity to High Fidelity to Mock up
From paper to digital wireframe is easily achieved by doing it in Adobe XD. Then going through iterations of designing and testing before the final mock-up is achieved. A lot of time was spent in understanding the Abode tool to start with, resizing was a bit time consuming, but it turned out the effort is well spent. There are some differences between Figma and Adobe, but I reckon each has its strength and weakness. For example, Adobe has not got all the fonts and you have to download elsewhere and upload it to the software; components features were great in Adobe, but it worked a bit differently from Figma and you have to think through them thoroughly before applying it as a component. The checkbox status could not be captured from frames to frames in Adobe and you have to create extra frames to fake the prototype slightly if you really need to. Looking back, it was a great enjoyment when the final version is done. The final product is all conforming to the WCAG standards, and all visual design elements are considered (type classification, typeface, fonts, colours & iconography), scale & proportion, balance layout & other elements to ensure they comply with the Gestalt principle.
​
I have chosen to use Desktop 1920 x 1080 as the webpage and responsive iPhone 14 version 393 x 852 just because this is the latest model when this case study is written.
Screens and design evolvement
Colour Theme
Fonts
Based Colour Themes and Related
Open Sans 15
Open Sans 16
Open Sans 30
​
Other colours for buttons & wordings
Blue 346AF7 Brown 86553F
Red EB001B Orangish DBB657
All recommendations and suggestions incorporated in the design after two rounds of usability studies
The usability study was carried out while I was travelling in London as I was there during that time. As this is the extension of Case Study 1, therefore I kept everything intact but received more information on their preferences about meals in general and also tested out the market a bit related to this sort of food ordering application.
Whether it is a Priority 0 (P0), Priority 1 (P1) or Priority 2 (P2) item, all modifications and fixes have been applied. P0 are items that must be fixed before the product can work. P1 are items that should be considered in the future release and P2 are those that could be addressed later. In fact, during the two usability studies, there are not any P0 items as they have been tested thoroughly before showcasing to the participants.
​
Round 1 findings
Round 2 findings
-
Enrich food content & ingredient to suit locals' preferences.
-
Additional features for the account page
-
Build a new separate individual menu rather than starting from the homepage all the time.
-
Extend change password and profile change functionalities.
-
Fix some wordings in the context.
-
Merge some existing functionalities under account to centralise related items
Sample Mock-ups Pages
There are few a selection I can choose here but have selected these for illustration.
Above showing a few core mock-up screens are indicated here for the webpage design
Corresponding mock-up screens for the mobile design
Links to Prototypes
A responsive mobile iPhone 14 version basing on
393 x 852 size in Adobe
Accessibility Considerations
01
All the text and colour contrast are complied with the WCAG standards.
03
Including bilingual capability for Chinese language translation (this is still too early at this point but already pencil in under the menu items). Can consider extending this to other languages.
02
Heavy use of recognisable icons to ease navigations
04
Design using headings, scale & proportion, balance & layout to ensure better hierarchy and to ensure they comply with the Gestalt principle.
What I learned
The whole process from taking an idea to requirement gathering to producing a proper high-fidelity prototype by using Adobe XD. This project is an extension of Case Study 1 where I used Figma as the tool, instead of just translating the app from Figma to Adobe XD. I have covered more on the functionalities, especially on group items where Sarnies can cater for group orders on the same application. As currently the group catering business has been ignored by the general public, therefore I put more focus on this particular area and build them into the existing business process and hence giving Sarnies a total solution (which is missing in the current market and gives Sarnies a competitive advantage).
​
From Figma to Adobe, there are a few adjustments in the learning process and the functionalities, and I managed to learn this by further reading the Adobe documents, searching on the internet and practising them a bit. Here are some highlights on Adobe, if encountered missing fonts, you might need to download the required fonts and then upload that to Adobe; think way ahead when designing for the components and accommodate all the steps and results you want to see before making them a component. Some states may not be carried through frames but if you need to, you can fake this by creating intermediate frames, as my prototype is a full system, therefore, it will involve too many screens if I want this to happen; therefore, for checkbox items, I leave them as it. Adobe is powerful and can do many things that make design stands out e.g., overlay, animation and sound, just like Figma. The other item is that I thought it would be easy just to copy out the images from Figma and port them into Adobe, but it was not due to the image resolution. I later use the Unsplash plug-in, but it was not working swiftly then I changed my tactics to use Unsplash online and save the files on drives before copying them into Adobe XD, that works nicely!
Throughout the project, I have employed the UX Design Framework, design thinking & putting it into action throughout the whole process. I deliberately not used any community tools that are available as this would be the best way to learn a new tool i.e., roll up your sleeve and just dive in.
​
During the usability studies stage (I was in London, UK at the time). I have to ask around in coffee shops and ask people to help to test them out. There were a number of occasions where I got turned down, thicken my skin a bit and changed the tactic and saying this project was for a real-life situation, then seemed like people are interested as it is something that might impact their daily life. This is the trick I have learned to attract people to help with the usability test.
Though hard work but looking back it is well worth the effort and I have learned another tool and skills.
There is room for improvement in the prototype for sure, for example the "look and feel" but I am more concentrated on the functionalities this time round. Not perfect yet but I am positive that this will be achieved with more practice as "practice makes perfect" after all!
Next Steps and Going Forward
01
The payment was intact from the previous Case study. In real life, we cannot give users all the payment options and need to do a proper investigation & survey to see which ones are popular. Also, need to check into the charges each payment option would incur & decide on the feasible ones. (for the UK, seems like people are happy with the credit card/debit card option which I found out during my stay in the UK)
02
Would love to see this product come to life and the next step would be to get a buy-in and get a sponsor for this project before sending it to the developers to code. A short business plan with some facts on this subject, and a storytelling deck with supporting data would be useful to present to the potential sponsors to get the buy-in before the real systems implementations. Then apply the go-to-market strategy for this.
Being able to learn the theory but apply it to real life is a great way to thoroughly understand the subject in my opinion.
​
03
Check into the bilingual translations. This should be done once the English version is completed. We need to accommodate those users who are more comfortable with Chinese and less fluent in English.
​
In the future, can extend the language capabilities to other languages.
​
04
Add social media icons, currently, I have deliberately not put them there as everything is working, and I do not want to put some icons there that are not clickable, that's all. The common ones we should consider will be Facebook, Instagram etc. Can look into the popular ones in the region before implementing them. All it needs are icons and a clickable link that would bring you there.
I welcome all comments and not all the work related to this case study is listed. If you need to know more about any part of the details and the work I did, kindly click and reach out.
What Did They Say
