Cosymbolic: Case Study (Part 1 - Wireframing and Sitemaps)

Hello!

It's been a long 10 days of working hard. I'm currently taking online classes in UX and UI design from the Interaction Design Foundation, working on my dad's app, working on my own app, working on a few personal projects (birthday cards for friends, mainly), as well as continuing the search for a job. Busy, busy.

But, that's how I like it.

Anywho, here's an update on my progress with the Cosymbolic app my dad and I are working on together. We've had a couple meetings over the past week to solidify what the app is going to do and how it's going to do it, and I've begun my planning phase as far as mapping out the different screens, interactions, and functionality we'll need.

To begin, an overview of the actual app.

Cosymbolic: Emergent Art for Everyone

The purpose of this app is to provide everyone, no matter what level of creativity they think they have, to be creative. The main feature is the ability to create a random pattern of dots with varying density and size, and then to use tools to bring forth (by highlighting and shadowing) the image that it seems to create.

It's like seeing shapes in the clouds, or seeing a face in a speckled pattern in wallpaper. Really, it's using Gestalt principles to create meaning out of visual chaos.

By simplifying the creative process to a judgement-free, random, and totally mindless activity, the app takes the ego out of creativity and gives anyone the freedom to create.

Wireframes and sitemaps

He's had a few ideas about the layout of the app, specifically the sort of 'feed' home page and the 'transform' page where users would manipulate the dots to bring out what they saw in them. I took those ideas and used UX basics and guidelines to make them a little more intuitive and user friendly.

Below, you can see the basic tool layout of the 'transform' screen from dad's original ideas, as well as my first draft of the wireframe.

Before

After

I simplified the tools by getting rid of the ones used in a previous step (creating the pattern, whereas here they'd only be transforming an existing pattern), and framed the canvas with the tool set to create a sense of proximity and free up more space for the canvas.

I worked out the color bar/wheel functionality in portrait mode, as well as the position of the layers, and added a 'back to pattern' link to go back and edit the dot pattern if desired.

I also designed a tap bar at the bottom to house the main feature of the app, including home, create, exercises, and profile. While wireframing the landscape modes of the screens, I decided to put the settings icon (originally up at the top right corner), into the tap bar, so as to even out the bottom tap bar and make the settings closer to the rest of the screen icons.

Updated tap bar

I've worked out a rough idea of the sitemap (or in this case, list of screens and how they relate to each other), and based my wireframes off of that. It's looking like it's going to be about 12 screens altogether.

Looking forward

For the rest of this week, I'll be cleaning up the first round of wireframes and getting ready for feedback at the next meeting (this weekend), working on a bit of a color scheme idea based on what dad's told me about the overall 'feel' of the app, and thinking ahead to the next steps of the design process: mockups and a style guide.

I'm really enjoying having such an interesting project to work on every day, and it's been a good exercise in applying what I've learned in my classes and readings to a real-life app.

Cheers!

- Liv