https://dabeubee.com/about daily 1.0 2021-09-21 https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e19faadf3730241dfeea3e3/1578760989838/53508485_10157216022271096_5422307683334094848_o.jpg About https://dabeubee.com/redesign daily 0.75 2020-01-13 https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e1ffc751312f174809f0a50/1579154558360/Comparison1.png Chope Mobile Redesign https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e1ffc996520195adfbef7f2/1579154627039/Comparison1.png Chope Mobile Redesign - Focus on users interaction Focusing more on visuals From past findings, users are more incline to interact on images and icons. Also, as the service supports the food & beverage Industry, there is great emphasis on visuals like food & restaurant photography. What was done is to create better spacing rules like implementing the 8pt/dp grid system and and left & right margin rule of 16pt/dp. And I’ve increased the padding between components https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e2020dff0b63e06cfde6b1c/1579163930125/Button.png Chope Mobile Redesign Buttons As buttons are one of the most important transactional component, we have created a set of buttons all with standardise roundness, font size and placement and the states. This allow us to apply them across most of our products and marketing materials without the need of building new ones, https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e202a9057b4c425dea4f523/1579166363664/Comlib.png Chope Mobile Redesign Components Library A major part of the design system is the component library where the elements serves as the building blocks of the mobile app. These component serves to build up recognisable patterns of interaction whenever user interact with them,. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e203b556520195adfc39bfc/1579170653549/Branding.png Chope Mobile Redesign - Visual Update to be consistent with new branding. Updated look to new branding https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e20e0d8ea165940537770f0/1579213028304/Iconography%402x.png Chope Mobile Redesign Iconography In order to create the visual balance between the background, content and the icon, we have decided to replace the old solid icons with outlined ones. We do maintain some of the glyphs but they are mainly meant for activation state purpose. The icons are mainly used in 2 sizes, 24pt/dp & 16pt/dp. They can be interacted alone or be placed on components like cards & buttons. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e1ff84c57b4c425dea146b2/1579153521684/DesignSys.png Chope Mobile Redesign - A new design system that improves team collaboration & efficiency A new design system that improves team collaboration & efficiency https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e201c0b57b4c425dea4088a/1579162647382/Font.png Chope Mobile Redesign Font Standardisation To make the reading experience tighter, we standardise new sets of fonts to use depending on the medium. For mobile native app, we’ve decided to use system fonts, SF Pro for iOS & Roboto for Android. This decision was made because it mades the app feels part of the eco system of the platform. Also, with only using the mentioned font family set for the specific platform, it creates a tighter, cleaner reading experience. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e202e8b4293956c31b3d567/1579167403847/Collage.png Chope Mobile Redesign Samples of working art boards (not all are shown) https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e207b3450880c2dddcc9e3b/1579187013661/Search.png Chope Mobile Redesign Faster development, improvement on feature function & stability As the component align, many features are able to developed fast and with greater stability. Less design production mistakes were made. Even the time I take to design reduce significantly. An example is the search feature where the app use to be multiple search tool & whenever we proposed to unify the search experience, we were unable to align due to conflicting component functions. Today, the search has vastly improve and due to the redesign that allow us to upgrade the feature, we see huge increase(30%) in adoption rate of deals search. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e2030644301a9378dc462dd/1579168101150/Comparison+Shopping+Cart.png Chope Mobile Redesign Improvement to user flow and navigation Task Success rate has gone up since the redesign has been implemented. No longer are ambiguous call to action button or components that doesn’t provide basic clarity and understanding to the users. https://dabeubee.com/redefinesearch daily 0.75 2021-12-13 https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5eba4658b9b26c7630375a86/1589266011866/research+1.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e20564b4301a9378dc77662/1589265756134/Chart.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e205f5df0b63e06cfe37cb6/1579179907440/TripAdvisor.png Redefining the search experience on Chope Mobile TripAdvisor (2018) https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e205c1ef0b63e06cfe33336/1579179163915/Redmart.png Redefining the search experience on Chope Mobile - Redmart (2018) Redmart was a Grocery Delivery App and their search excel in providing auto suggestion and also giving the user direct click through to suggested products. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e817b2447c7f816da087b50/1639360213400/Screenshot+2020-03-30+at+12.52.25+PM.png Redefining the search experience on Chope Mobile Customer Journey to identify various barriers & opportunities across the app https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e205fc921744238196ca777/1579180001048/OpenTable.png Redefining the search experience on Chope Mobile OpenTable (2018) https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e2063c3aba2e60526c4fb8a/1589266266108/Legacy.png Redefining the search experience on Chope Mobile The app in 2017 prior to the search improvement project. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e205d8621744238196c6bb5/1579185803432/Google+Maps.png Redefining the search experience on Chope Mobile - Google Maps (2018) As the biggest search engine company in the world, I’ve looked into their established patterns of searches. In the map app, they presented their auto-suggestion in categories which allows the users to have some expectation to what will happen if they click through https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e205f9750880c2dddc93aa0/1579179944269/AppStore+iOS.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e2125f19713f543997b4655/1579230715380/Strat.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e81892d4ada5c79805ec7ba/1585547585446/autosuggest.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e208808ba1b7664a192936c/1579190299909/WF%231.png Redefining the search experience on Chope Mobile The base wireframes of the new flow. I tested this in a rapid prototype and found out that: Most candidate will engage with the restaurant listings in the input phase Very few people will try to pick Party Size, Date & Time(PDT) when they use the search While the old PDT is on the home page, most people didn’t realise it was gone and they interact with the new PDT on search result page without much friction. With ChopeDeals as part of the app already, people want to see deals information on the search result page With these insights, I’ve decided to make a few changes and proceed to production specification for this feature. This is because we(mostly data team + me) desired a much higher quantity of behaviour data to know how our users interact with the search. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e208ed8aa05136fbe603e58/1579192045767/MVP%231.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e203e36f5403e49cd90b5d5/1579171392486/Search+MixPanel.png Redefining the search experience on Chope Mobile As the new search has trackers embedded in the flow, we finally could look at some of the behavior & usage patterns of our users. Most of our users search for restaurants and locations. We make the assumption that users who use our search tool has high intent of finding a specific restaurant/vendor information more than for discovery purpose. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e8176cf5dad3f3c15505191/1585542870254/MVPEnhanacement.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e818fe53ae6d4439be6c4be/1585549295454/SingleSearchEntry.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e8180c45ed80a421911d224/1585545476330/ Redefining the search experience on Chope Mobile As around 45% of our users who engage in search will end up on a search result page, we have updated the component so that certain information are better presented to the diners - Deals information, Like & share button etc. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e818971d5037c115706647c/1585547646682/SR+Update.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e816434554fd6780ad6221d/1589267947415/Screenshot+2020-03-30+at+11.13.53+AM.png Redefining the search experience on Chope Mobile MixPanel Flow chart of top search query that converts. Table created by Raymond Chan(DS). The flow tell us that around 55% of our users will tap on a restaurant suggestion and the remaining will go on to a search result. This shows that the auto-suggestion feature that was introduced in 2018 was a success as it brought users to their destination quicker The drop-off rate has been reduce from 26% to to 12.7% https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e8161fa844cdb35846efe4b/1585537538207/App+Search+Enhancement+-+Search+Results+Page+A_B+Preference+Test+%281%29.png Redefining the search experience on Chope Mobile - A/B Testing on usability hub We did a quick Hi-def mockup for this perception test, to find out if what we proposed will make sense or not https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e8161f263d7965a88c784a5/1585537524549/App+Search+Enhancement+-+Search+Results+Page+A_B+Preference+Test+%282%29.png Redefining the search experience on Chope Mobile - Findings Proposed design works better https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e8176a53ae6d4439be455aa/1585542830571/Global+Search.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e8161597d4e8e31879f25ca/1585537376867/App+Search+Enhancement+-+Search+Results+Page+A_B+Preference+Test.png Redefining the search experience on Chope Mobile - First Perception User Test UX research planning by Denise Ding(UX Researcher) https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e817d6186693d3dcc5a0206/1585544582202/Search.png Redefining the search experience on Chope Mobile https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e818b7d4ada5c79805efd80/1585548172926/AutosuggestImprv.png Redefining the search experience on Chope Mobile https://dabeubee.com/hack-voucher-clearance daily 0.75 2020-03-30 https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e20ff1e2ea93e14b2b67f6d/1579220794355/Voucher+Clearnace.png Hack: Voucher Clearance https://dabeubee.com/chopebook daily 0.75 2020-01-17 https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e20ffcc12540e1f1c6d650d/1579220954961/DinerDirectory.png ChopeBook The CRM allows restaurant staff to record and learn more about. It automatically record diner into the app via Chope Reservations on the B2C end or manual input while making a reservation in ChopeBook directly. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e20fffb2ea93e14b2b6a9fa/1579220991372/QMGMT.png ChopeBook As some restaurant accepts both walk-ins and reservations. We have integrated the Queue management feature into ChopeBook so that it can pass information directly to the queue display and change up the timings/quotas for queuing customer. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e21000d977670311f76ab82/1579221020845/Gantt.png ChopeBook By request of some of our top tier restaurant group, the Gantt Chart serves as a timeline view for tables. Restaurant staff is able to change the turnaround time of a particular reservation on the fly, drag & drop reservations to a different timing and table & slot in last minute walk-ins with proper time estimation. https://static1.squarespace.com/static/5e19244fde7f2748e9e7d185/t/5e20ffe4c8ae141b3edcb85a/1579220978185/TPV.png ChopeBook The table plan view allows the user to check on each table status, like a reservation turnaround timing, and if the table has any upcoming reservation. Also by tapping on the table, the operator is able to check the current diner detail or if there are more upcoming reservations for the day.