Qian - UX designer


Stocked



Client Project



Improving the functionality of the app which makes the order flow a faster, more intuitive process and development of the communication platform so that it is more informative and clear.


Check Results & CLIent's feedback

Challenge



Problems and Client's goals



Worked as the team of 4 UX designers to delivery the solution for current issues which is to speed up the ordering process also reduce error rates and improve within-team communication regarding orders.



The problem



Stocked app was aimed to revolutionize the interaction between suppliers and small hospitality businesses by digitizing and streamlining the ordering process. In turn, it looked to reduce error rates and improve within-team communication regarding orders. However, the app in its current form is experiencing high attrition rates and low usability ratings.



Client's goals



Designing the function which can make placing and create orders quicker and easier to use.


Designing the function which can make editing/ adjusting orders more smooth, so that both restaurants/ bar managers and suppliers have a clear and final version of the order.


Designing the function which can make clear and efficient communication not only between supplier and ordering manager as well as between the team of restaurant and bar staffs, managers has to know who ordered what and when prevent staff members placing repeated orders.



Amending orders means cancelling them and starting again - would like for amending to be just that, amending whereby you just edit the order instead of starting again.





Manager of Sodo



Discovery



User Interviews | Persona Creation | Affinity Map | Task analysis | Competitor Analysis



User Interviews



For our user research, we stopped by 28 independent coffee shops, restaurants and bars to interview with chefs, managers, and other team members. Big, small, or medium - every place had it’s own habits, quirks, frustrations and processes. We gain very useful industry insights. It helped us to input highly valuable functions into the original design.


From the all the interview notes we took, we made affinity map, so that we be able to see the trend around the issues and narrowed down to some key takeaways:


Want to be able quick and easy to place an order especially some similar/ repeat orders making navigating easier.
Be able to editing and add to basket more accessible
Be able to get alerted or notification when my colleagues were placing an order.



Personas




Based on all the research we had, we came up with our 4 Personas and made a primary persona Hector who doesn’t plan on changing his system unless it can really save him time, which means the App has worked very easy and efficient the way they need it to be.



“I need it to save my time
so I can focus on the other stuffs like to develop new business for coffee shop ”



Hector, 28 year old, Manager at Coffee Corner





Primary Persona

Hector has been working at Coffee Corner for about 6 years and managing the coffee shop of 4. As a small coffee shop, it’s important to Hector that everything runs smoothly so he can maintain a good relationship with his customers. To him, this means always knowing what needs to get done by each member of the team.



“As a mother when my son is sick I would like to take a few days of so I can take care of him without being disturbed.”



Inita, 29 year old, Sales Assistant at Betty Blythe





Because the manager always relies on her and sometimes for example she has to place orders from home, or she has to run over because a mistake was done, she would like to be able to share some of her responsibilities with her colleagues.



“I wish I don’t have to go through the long wine list to order the wines we always order.”



Alistair, 33 year old, Bar Manager





Since he became the bar manager, he found that the process of placing an order for new stock and inventory takes far too long, and he has to place orders in different ways.In the meantime, he would love to each member of the team can contribute and help him with the ordering process, but with his current method of communication and identify, he is not too comfortable to do so.



“It would make my life easier if I could share our responsibilities but still maintain end control when it comes to spending. ”



Zara, 29 year old, Coffee owner and Manager





Her cafe is her passion and she is driven to make it a success; she recently hired a social media manager to aid growth. With a growing establishment comes a growing team and, naturally, sharing out the responsibility is a part of this process. However, she still wants to retain ultimate control over what orders are put through and to be kept in the loop at all times.





Task analysis



Base on our primary persona Hector, we went through his ordering journey to identify his pain points during the process, so that we can improve by focusing on those pain points.



Editing an order



Placing an order




Hector has to spend quite a lot of time checking inventory quantities around the shop or double check the notes left by his colleagues.




..then he makes a plan to order them and from which supplier. Each supplier has a different schedule and deadline, in case any change after the deadline, it can be very stressful.




He wishes his colleagues can share some

ordering works so that he can have more

time to concentrate expanding the business.



Solution



Based on current issues, we focus on improve 3 main features:
​



Make the order flow a faster,
more intuitive process



Cross team communication more informative and clear, to aid in-team efficiency and foster the important B2B relationship



Make editing/ adjusting orders
more smooth and both sides have
a clear and final version of the order



Design Process



Feature Prioritisation | User Flows | Site Map | Design Studio | Sketching | Low Fidelity Wireframe
Mid-Fidelity Wireframe | User Testing | High Fidelity Prototype



User Flows



Followed by Hector’s journey map, we developed the key user flows to outline the main issues our user is having during the ordering process.



Placing regular order



Placing order you have previously ordered





Feature Prioritization



We arranged feature prioritisation for our app followed by rules. It helps us focus on what matters to our user.
The features Must have / Should have / Could have / Won’t Have:





Design Studio



The method is for each team members to sketch as many ideas as possible with a limited time box based on one user flow or problem to solve. After this everyone gives a description of their ideas, with design solutions shown on paper. Often new constraints are introduced, and new opportunities arise. The group will discuss what could be the best design solution for each problem, then in the second round, everyone will sketch design with a distinct improvement in mind.​





Design Studio



We meet clients together for 2 hours design studio which include:


Give the outcome of what we have been worked on and what key takeaways we get from user research.


Branding thinking: the tone of the voice.


Each design: Placing standard weekly order / Team Communication.


Design Studio has helped us to move from concept to more visualised designs, and by put feature thoughts in our design and get feedback immediately with stakeholder.



Initial Sketches - Simple and Visual



After design studio focused on the user flows and feature prioritisation, we sketched our individual designs and combined our designs to come up with our initial wireframe, and then we can move on to our low/mid fidelity digitalised wireframe.


Low/Mid-Fidelity Wireframes
& User Testing



Then we used 'Sketch' to finalize our low/mid fidelity wireframe; we made clickable in 'Marvel'. It will help our user feel more realistic to do our user testing.


Testing and feedback





Feedback on this page



Place new order page





Change saved order names to more personalised things.
Take out “My products” - Not relevant.
User didn't know swipe to deferent supplier section, they all tried tap first.

People try to pull down the top menu instead of tap.



FEEDBACK ON THIS PAGE



Add to Cart page





When press “tag as low in stock”, and get to message feed page, didn't know to tap message to go back
Confused with “1” icon of low in stock alert and “add to cart” button. maybe put “1” icon next to tag as low in stock.



FEEDBACK ON THIS PAGE



Edit weekly drinks page





Rethink the bin swipe - not intuitive, make the text that says “swipe left to delete more noticeable — maybe in red?”
Better to have an alert if you really want to delate these items.

​



FEEDBACK ON THIS PAGE



Add an order to your saved list page





Pop up, with OK and Back at bottom? no X
More responsive once you add to an order- confirmation/reassurance that product was added to list.



High Fidelity Prototype



While doing our research and talking with people working in small coffee shops and restaurants, we realised that a lot of the orders are based on more or less the same items, with small quantity variations. Following that we thought that having a ‘Saved Orders’ function would help our users, by making the process of ordering quicker and easier. On our first set of wireframes, we introduce this feature and went testing again.


After testing, we came to the conclusion that they don’t need a ‘Saved Orders’ function. Creating and recreating a saved orders list would make the process too long and not practical. To follow that up, we combined the ‘Saved Orders’ and the ‘My Products’ features by creating a ‘Favourite Item’ function, which places your most ordered items in the top of the list on the suppliers' page, with changes we made our final high fidelity Prototype.



Favourite and Tag As Low Stock





Place Order





Result



Have met our persona's goals and clients' goals



Result



With all this new features Stocked now allows Hector to spend more time focusing on his business as opposed to getting stuck concentrating on smaller details. With a bit less stress on his plate, he now has a window of time to think about expansion (partnerships with Uber Eats for example) and brainstorming ways to improve his coffee shop in general.



Has been a really great experience for us.
The quality of work delivered was far beyond our expectations. The team delivered some great ideas, many of which we are planning to implement. We were really impressed with how the team got stuck into the problem and understood our customers.

Overall really pleased with the quality and quantity of output. The team did a great job of getting involved and interviewing customers.

Thanks, Peter





Peter, CEO of Stocked.co



Next Steps



Develop Stocked from the supplier’s perspective​
Create tablet-friendly design to serve as an information hut within restaurant and cafe spaces



Thank you for visiting, get in touch





© 2020 Q-SHEN. ALL RIGHT RESERVED