The Logistics: Designing What’s Underneath the Hood

Our continued efforts to understand what’s possible and what’s the best way to serve up content and information.

Radha Nath
MHCI 2018 Capstone: Team numo
4 min readJul 16, 2018

--

Recap from the last post: We came up with a plan to test our Mid-Fi Prototypes and synthesis those insights to understand what improvements we could make. A few members of the team worked on understanding what a final tech prototype could be!

Design: Further Understanding the System Details

In efforts to clarify how certain pieces of content would be served up to a user’s feed, we took some time to map out the system and really understand what’s going on behind the scenes.

Our first step to understanding was getting all our questions out and organizing them. We organized questions first by system feature, then by type of question (e.g. feasibility, design strategy, visual / UI). This helped us decide which questions to tackle first: design strategy.

V1 Profile Design (left), V1 Feed Design (right)

This is where we started focusing our design efforts to further make sense of our system. Although we had some interfaces and an idea for how this could manifest…some of the biggest un-answered questions were:

  1. What input does the system take to understand a student’s skills and interests? (Profile, left)
  2. How do these variables affect what information shows up in a students’s feed? (Feed, right)
  3. How does the system start to suggest job information to the user? (not currently designed)

Second, to answer these questions we took time to visualize our system to make sense of what were the exact inputs and outputs of the system, and which system elements affect others (and how). Below is an example of what this started to look like. Through this we had many interesting discussions (e.g. ‘Are skills relevant for High Schoolers?’) and made many design strategy decisions (e.g. to leave out skills for MVP). We also started to get a sudo understanding of what a snapshot of how the algorithm would function.

Diagram of the System Objects

Tech: Making Functional Progress and Decisions

As the design team worked towards the strategy behind the system. Our tech team began trying their hand at React. As Nathan mentioned in the previous week, we decided to explore building a functional prototype as a final deliverable. For this week, they tasked themselves with coming up with the “Questions” portion of the application which featured different swipe-able cards. And they were able to make some progress, check it out the swipe action they had going on!

“Questions” Feature Mockup (Left), First React Prototype of Questions (Right)

Realigning as a Team to Focus our Efforts

Towards the end of the week, we came together as a team to regroup on all the progress we made so far. We realized that we had a lot of design strategy work ahead of us that we needed to understand before we could build a functional prototype.

This forced us to re-evaluate how we’re spending our time and resulted in a decision to step away from a React prototype. We started looking into alternate options, including Framer. Another decision was to get more of the team involved in design strategy.

Where we’re Heading Next!

As we were getting the team more focused on design, we found our next steps to be creating a screen map to represent system structure, and a data model to represent how object are captured and related in the system. From there, we would go off to iterate on the current design of the system. Check in next week to see how we furthered our designs!

Till next time! ✌️

--

--

Radha Nath
MHCI 2018 Capstone: Team numo

Product designer with a love for exploring different perspectives and personalities. Fueled by black coffee and tabletop board games. ✌️ ☕️