Jam Pan

Jam Pan has been connecting the right people with the right projects in the UK’s digital learning arena since 2014. Inspired by how online marketplaces have disrupted other sectors, Jam Pan wanted to create a better way to connect digital learning talent with opportunities. They came to Mosquito Digital with a fleshed out concept and some rough wireframes for an online portal where companies in need could find and hire talented eLearning suppliers. With a set of refined requirements, Mosquito set out to design and build this platform.

Kick-off meeting: In this first meeting, our team (myself, a product manager and two developers) and the stakeholders refined the requirements for Phase 1 of the project – the launch of the MVP. We talked about Jam Pan’s existing customers / users and what they need.

User Stories: As lead designer, I was responsible for taking the project from a rough concept to an interactive prototype. With a tight deadline, I translated the requirements into user stories, looked at how the competition was doing it, and jumped straight into the design phase.

Sketching: I always start with sketching. It’s the easiest way of visualizing ideas. It’s also the quickest way when working on a site or application that has a lot going on both in the front-end and the back-end. By sketching, I could include everything that was going on both on and off the screen – whether it be email notifications to users and administrators or status changes in the database.

Benchmarking: As I sketched, I looked to the Axure wireframes that Jam Pan came to the table with as a rough guide, and to other online marketplaces for best practices – Upwork, Peopleperhour, etc.

Prototyping: The sketches came together to form the early prototype. Ideally at this stage the prototype would have undergone a couple of rounds of user testing, in order to validate the concept with real users. However, limited time and resources meant moving on directly to the detailed design stage.

Wireframing: With a good idea of how the main structure of the portal would look like it was time to get into the look & feel and detailed design of the portal. Working against a tight deadline, I skipped the wireframing stage. In order to be as quick and efficient as possible, I relied simply on my sketches. Otherwise, most of the time I use Sketch to create low-fidelity wireframes.

Look & Feel: I went with a simple user interface and a colour palette and UI inspired by Jam Pan’s website – which I had recently designed. I looked for existing design examples and common patterns as needed – these were accumulated from a variety of sites including Upwork, Amazon, Google, Dribbble, etc. I like to use Pinterest boards and Dribbble buckets to collect and share ideas.

Mockups & Design System: The high-fidelity mockups were created in Sketch. I built a symbols library and set of styles that became the visual design system for the portal – a set of re-usable UI components including buttons, cards, inputs, etc.

Prototyping: The interactive prototype was built in Marvel. There was a lot of back-and-forth with the clients throughout this stage to fill in content gaps and get sign off of the designs.

Detailed Screen Flows: The user flows were already mapped out in my sketches, but the complexity of the interaction between the portal, the database, and the administrator made a more detailed screen flow necessary. I created a detailed flow in Sketch to show all the connections on and off-screen for the benefit of the developers and clients.

User Acceptance Testing: This was a tricky platform to test. I wrote a detailed User Acceptance Testing plan that I put together in Trello. Once the site was built and ready for testing, I enlisted the help of a junior designer – we went through the testing plan methodically, acting as client / supplier / admin and creating countless accounts in order to test all of the user stories.

Usability Testing: A couple of rounds of user testing were carried out with a handful of Mosquito employees that were not involved in the project.

Following a successful launch, we’re taking a short breather and preparing to enter into Phase 2 of the project. What will this Phase involve?

Measure & Iterate: We’re tracking bug reports and collecting support tickets and user feedback. We plan to address these and other issues identified in User Testing in Phase 2 of the project.

New Feature: We plan to add a new workflow feature to the portal. Here we go again!