![\"Pakk-case-study\"](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/08\/UXstudio-Hero-Pakk-v2-1-720x420.jpg\")
<\/p>\n<\/p>\n
When a voluntary initiative tries to help local businesses, and they need you to design the product in less than two weeks, it\u2019s everything but usual. Here\u2019s how we approached this seemingly impossible task and what we\u2019ve learned.<\/span><\/p>\n <\/p>\n Content:<\/span><\/p>\n Pakk\u2019s concept was created by a handful of Hungarian enthusiasts who had a simple goal in mind: to connect struggling small businesses with their customers and help them during the coronavirus outbreak. They envisioned a mobile app that would let users explore local shops nearby, allow them to see what services they offer and enable them to order a custom package put together just for them. Hence the name: Pakk, which means package in Hungarian.<\/span><\/p>\n Their initiative reached out to UX studio to ask for help with designing this product. So a team of two UX professionals accompanied the Pakk team for a short period of time. The task was to walk them through the UX process and guide them in creating a useful and easy-to-use app. The UXers were:<\/span><\/p>\n As small businesses struggled to keep up with the lack of customers, shortened opening hours, and other regulations, every single day counted for the Pakk team. So we had to move quickly, too \u2014 this meant that we had only hours and days for design and product decisions. We started on the second week of April, and our goal was to <\/span>deliver the final UI in just two weeks<\/b> to have Pakk ready and running by the end of the month. Honestly, it seemed impossible.<\/span><\/p>\n The main problem was that the core idea of Pakk was shaping right before our eyes. Plus we had to face a short working week as well due to Easter, which clipped off two precious days of the already little time we had on our hands. So here\u2019s what we came up with:<\/span><\/p>\n We also recognized that instantaneous communication between our team members was crucial, so we set up a Slack workspace and relied on short, on-point video calls. These helped to make key decisions in minutes and allowed us to react to user feedback immediately. On the other hand, it was clear that many of our design choices could not be validated in just two weeks. So we created a <\/span>list of problematic\/promising points <\/b>for future reference<\/span>.<\/span><\/p>\n We prepared a kickoff meeting to get to know each other, the product itself, and decide on how to approach the design in general. A widely used mission-vision workshop came handy to define Pakk as a brand, while the value selection workshop showed us how Pakk wanted to represent itself and connect to its users. During the latter, we tied down that Pakk should be <\/span>accessible<\/span><\/i>, <\/span>effective<\/span><\/i>, <\/span>trustworthy<\/span><\/i> and, most importantly, <\/span>safe<\/span><\/i>. These were the key values we followed when it later came to design choices.<\/span><\/p>\n Along with the developers, we also established an impact-effort matrix to see which features could launch with 1.0 and which should be prioritized later. This allowed us to see that the <\/span>classic webshop experience was way out of scope<\/b> \u2014 the Pakk team simply did not have enough resources to maintain a database in the 1.0 version with items, services and prices. Therefore, we had to convince users that contacting these businesses manually would be an easy way to order and pick up a custom package.<\/span><\/p>\n So there we were with a few, easy-to-implement features with a huge impact: geolocation, the option to search on a map, the possibility to see which businesses offered contactless payment, where staff worked in protective gear and a few more. Because of this, it seemed clear to go with a map-focused solution: our first prototype showed local businesses nearby on a map.<\/span><\/p>\n Although we agreed it was a good approach design-wise, we realized Pakk was not something users might use for browsing between different <\/span>kinds<\/span><\/i> of shops. See, if you want to buy milk, you won\u2019t really consider going to a butcher shop. Instead, you\u2019ll want to see different <\/span>shops <\/span><\/i>to choose from. So, we figured <\/span>a more funnel-like flow<\/b> would better satisfy user needs \u2014 and this is how we arrived at the second version, on the first day of the second week.<\/span><\/p>\n A <\/span>home page was introduced<\/b>, which was beneficial both for the businesses (to gain exposure) and the users, who were able to browse shops sorted into predefined groups. Taking the main values of the brand into consideration, these groups were specified as: \u201cpopular\u201d (frequently favorited), \u201csafe\u201d (shops where staff worked in full protective gear), \u201conline ordering available\u201d, and \u201cnew shops\u201d (that joined Pakk recently). We <\/span>moved search onto a dedicated page<\/b>, which allowed us to keep the list and map views. Since we assumed that search was going to be a heavily used feature, we put tags on the home page that lead to search results outright, speeding up the wayfinding process.<\/span><\/p>\n We still had to convince users to contact the shop manually, and the Pakk team raised the need to somehow tease with a full-fledged webshop experience, which would eventually be coming in later builds (and was excluded from this MVP 1.0 version). That\u2019s why this \u201cfunneled\u201d flow <\/span>drew a lot of attention to the vendor\u2019s subpage<\/b>. This was iterated many times, and the final solution cultivated into a straightforward screenflow that explained the ordering process and encouraged users to contact the shop.\u00a0<\/span><\/p>\n Meanwhile, recruitment for testing was ongoing. Since this was a pro bono project, we couldn\u2019t offer incentives. Despite this, people were open and excited to participate, so it was relatively easy to find people for the usability tests. This heartwarming experience motivated us along the way, and we are incredibly thankful for all of the participants for their time and precious feedback. Besides intensive recruitment, tight scheduling was also cardinal to be able to jump into tests during the second week.\u00a0<\/span><\/p>\n We started these tests with a <\/span>short interview session<\/b> to find out our target audience\u2019s shopping behavior during the lockdown. This made it possible to add quality-of-life improvements to the app. One great example is that we added average walking time instead of simply using meters, which turned out to be a really helpful addition since a lot of our subjects preferred to take a walk to these shops rather than using public transportation. <\/span>\u00a0<\/span><\/p>\n In the testing phase, <\/span>we focused on wayfinding<\/b>. Subjects were given a task (to find a bakery, for example), and we followed them through the prototype while constantly reflecting on problematic points. To bring an example, one of the most frequently encountered problems was the switch between the map and the list view of search results. After trying many different solutions, it was finally decided to use a floating CTA which performed well during the tests \u2014 but was marked as a potential problem point that should be monitored closely later on.<\/span><\/p>\n Our team moved on to the UI as soon as we settled on the structure. This happened in the middle of the second week and also posed a great challenge. We proposed various approaches to match the values defined during the branding session. The Pakk team wanted <\/span>a powerful style<\/b> that was going to grant individuality to the brand. That\u2019s why the complementary red color became the background color in the final version. At the same time, it suddenly became hard to design even smaller components to maintain visibility and emphasis on key elements.<\/span><\/p>\n Because of this bold and venturous design language, the proper final test of the UI became even more crucial. Using Invision, we build a simple UI prototype with a single flow, but this time <\/span>research aimed to examine specific interface-related issues<\/b> like readability and recognizability. Issuing minor tweaks, recoloring elements, iterating on icons, letter spacing, and implementing many other smaller improvements, the final screens were slowly taking shape.<\/span><\/p>\n We regularly updated the Pakk team on our findings, while continuously pushing new screens to Zeplin (which we used to hand over the screens and explain mechanics to the developers). A UI kit with many elements and their states was also created and kept up-to-date, which made it easier to <\/span>migrate this system into code<\/b>. This resulted in a smooth transition into the development phase, where our collaboration officially ended.<\/span><\/p>\n\n
The Pakk idea 💡<\/span><\/h2>\n
\n
Approach and plan 🤔<\/span><\/h2>\n
\n
Designing Pakk 🌈<\/span><\/h2>\n
Kickoff<\/span><\/h3>\n
An ever-changing prototype<\/span><\/h3>\n
![\"Pakk-first-prototypes\"](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/08\/image1-720x450.png\")
![\"Pakk-UX-design-examples\"](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/08\/image2-720x450.png\")
Conducting usability tests and interviews<\/span><\/h3>\n
Package delivered 📦<\/span><\/h2>\n
Creating a strong visual language<\/span><\/h3>\n
![\"Pakk-final-design\"](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/08\/image3-720x450.png\")
![\"final-design-on-phone\"](\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2020\/08\/image4-720x450.png\")
Takeaways<\/span><\/h2>\n