What to do… what to do…

Using site maps, task flows, and sketchy screens to further explore the activity suggestion feature

Katherine Gjertsen
3 min readMar 2, 2021

Converging on an overall vision 🌀

After each of our team members designed individual wireflows, we began the next step of converging on an overall vision with collaborative site-mapping. We stepped through each point of user interaction with our platform and created the following site map as a team:

Collaborative site-map for the creation of an overall vision

Identifying our tasks 🔍

The site map provided our team the clarity that we needed to identify our platform’s core tasks and actions. We then divided the tasks between each team member so we could begin an efficient design process:

  • [Isha] Onboarding (screens: sign up + add friends)
  • [Rose] Update your profile (screens: change name, see activity log, customize blob character)
  • [Jenny] Beep your friend and post-adventure notifications (screen with prompt to view progress + post about activity)
  • [Katherine] See recommendations for outdoor activities (screens: view 3–5 generated ideas, nav bar)

Identified tasks not covered above:

  • Add another friend (screen: load contact)
  • Playground view (acts as home screen)

Activity recommendation task flow 🌊

I began focusing on designing the activity recommendation task. Below is the task flow the encompasses the user interactions associated with this specific task. A user can access the recommendation page through the nav to receive three randomly generated outdoor activity recommendations. I illustrated this flow below:

Task flow for activity suggestions

Sketchy screens for activity recommendations ✏️

Finally, I converted the task flow into 3 different “sketchy screens”. I decided to draw my screens with pen and paper in order to focus more on the actual user interactions rather than the detail of each screen. My three screens depict the flow from the playground screen to the activity recommendation screen. The flows then show a user generating three more activities before returning back to the playground:

Three sketchy screens depicting the activity suggestion flow

Next steps 👠

Next, our team plans on meeting to discuss the work we completed on each of our assigned tasks. We will work on converging our work and ideas into a cohesive mock-up for future usability testing.

Image by Riccardo Chiarini (source: unsplash.com)

--

--