Participated in a Hackathon creating a responsive order-ahead web App for The Little Social, an internal café in a hospital.
Product designer
Mobile and desktop browser
2 designers, 3 developers, 1 UAT tester
2 weeks | 1 ½ days to design and develop
This project was done as part of the Girls in Tech Australia virtual Hackathon: Hack4Health 2020. The teams had 1 ½ days to complete designing, prototyping and developing for their chosen charity. I chose to team up with the charity, Youth Projects, and help tackle the business problems it was facing. The charity was about to open its social enterprise cafe, The Little Social, which caters for staff at the Alfred Hospital. Youth projects came to Girls in Tech for an order-ahead solution to reduce the customer experience of waiting in queues.
Existing delivery Apps could not filter customer reach so this wasn't a viable solution since The Little Social is an internal café. Additionally, these Apps took commission, making a significant dent to the revenue for the charity. During Youth Project's pitch, we were provided two specific problems:
.png)
Working across end-to-end product design, I advocated for conducing discovery user research and design ideation sessions before the Hackathon even began.
I collaborated alongside the team's incredible co-designer brainstorming product strategy, ideating user flows and creating the wireframes, visual mockup and mobile prototype.
After the Hackathon had finished, I refined the UI on my own, conducted extra testing sessions, and iterated on the design to prepare for the launch!
While exploring the problem space, I recognised the team was building a product for a distinct user group, and so asked myself - In what context would our user be looking to place a pick-up order?
I only had a few days to conduct discovery research of our user's behaviours and goals, but I wanted data to back-up our assumptions and inform design decisions. I created a short survey to individuals who had various jobs within a hospital. The responses from the survey revealed that:
I found that the majority of medical staff only had access to a mobile phone while on break. This was a vital piece of information that suggested we should prioritise mobile first. Also, the survey revealed that both food delivery apps and eating on hospital campus were popular lunchtime choices and validated the user need for our product.
Our stakeholder had provided us with a list of requirements which also focused on future potential. Considering our deadline, I plotted list of features on an impact vs. effort matrix which helped narrow down what we needed for our MVP. I consolidated with engineers throughout the process to fully understand what would be feasible deliverables.
Jess and I wanted to better understand interactions from screen to screen and any not-so-happy paths. We also sought to provide vital information to the engineering team on the functionality and flow of data for the back-end of the business-facing side of the product.
How would our product grant exclusive access to its correct users?
One of the biggest challenges was creating a gateway that ensured only users who were medical staff at the Alfred Hospital were able to access the ordering platform and place pick-up orders.
User Responses
When I began ideating the interface, I wanted to use familiar flows and design patterns so users would be able to intuitively navigate through the service. In doing a competitor analysis, it also became obvious that many food delivery and pick-up apps used similar architectures and UI.
Using familiar UI patterns
Instead of focusing on trying to innovate on already tried-and-trusted design methods, I took inspiration from these patterns so I had more time to focus on The Little Social's specific problems.
How can we ensure an accessible experience among all users?
A super important value of mine is accessible design. I knew want this to translate into my work with The Little Social. The branding colour palette consisted of a green colour that was unable to pass WGAG guidelines, so instead I selected a new UI colour for the design system.
Meeting stakeholder requirements
Aside from the brief, our stakeholder had provided us with a list of requirements. I plotted list of features on an impact vs. effort matrix which helped narrow down what we needed for our MVP. I consolidated with developers throughout the process to fully understand what deliverables would be feasible.
Designing for ROI
As part of the competition, I wanted to go above and beyond in our solution and added multiple touchpoints in my design to allow for increased access to the donation screen. It was an easy addition for both design and development and would assist the charity with their overarching mission.
Our solution won first place! On top of that success, we were able to win our charity $2000 to contribute to their initiative. We were chosen as the winning team since our solution had the following:
Going into a Hackathon, one of the main judging criteria is the delivery of a quality prototype and so the part of including user's experience is often overlooked when trying to produce design and software code deliverables within the deadline. However, when given the problem statements, I sat there ideating possible solutions in my mind and soon realised how far from the user I was, both in terms who the user was and the context in which they would use the App. It was difficult to collect user research with a short window for prepping, however it truly paid off when prioritising feature building.
Throughout this project, I needed to iteratively release deliverables to the devs so that they could have a point of reference to work from. Communicating ideas and considering feasibility was vital in our development process when producing an MVP. I also gained an understanding of both front-end and back-end workflows, tools and constraints. In all honesty, every time I heard of Heroku at the start of the Hackathon, Jess (co-designer) and I thought our back-end dev was chatting with a mysterious Japanese man before realising it was the PaaS she was using.
Moving on from the competition, it was time to turn our proposed solution into a real-world, functional product. In order to see this through, we spent a week on testing and iterating to maximise usability.
Here's the final result of The Little Socials' website. An intuitive, personalised order-ahead solution that caters for the Hospital staff who work on the same campus as the café.
Allowing hospital staff to place and schedule orders
The Little Social's website allows for filtering access to only cater for hospital staff. Familiar and intuitive UI patterns are used, which allow for customers to schedule orders to pick-up during their work break.
Test it out for yourself!
The prototype on the left allows users to place an order for an Almond Croissant.
chelsrosechisholm@gmail.com
Chelsea Chisholm
