I teamed up with Paul Pearce to help him with his forthcoming DIY app, Pulp. In the comps to the left, you will see the clickable prototype I created using Bootstrap and the Jansy off-canvas plugin.
The project started off with some sketches, a quick comp by Paul, and some initial content (see below). I then created a clickable wireframe to work through the information architecture, workflows, and usability with a cohort group until we got to the stage you see in the next 7 images.
- UX Design
- UI Design
- Information Architecture
- Interaction Design
- Responsive web design
- Responsive web development (HTML, CSS, JS)
Walk-through of the project
Paul and I came together to build an app for DIY users. I was in charge of UX design (wireframes, information architecture), UI design and building a clickable prototype.
As with most of my projects I start by sketching out wireframes. I find it keeps it loose and me off the computer (so I don’t start designing.)
Built around the content
Simply put: the app is for curated DIY articles with a shopping list component. So, the content was established first and the app was designed around it. Below is a comp of the main screen Paul was proposing, and the content we were designing around.
Clickable wireframes, then design layered on top
For this project we started with a sketch and the core content, then moved directly into clickable wireframes using Bootstrap. They were shared with the team as well as our cohorts for testing. They would open it on their phones and let us know how they felt about the information architecture, the layout, and the usability.
We took their feedback and iterated on it over the course of a few weeks. Below are two weekly iterations we did with cohorts. The first one shows two screens from the initial clickable wireframe based on the sketch:
Below is a later version of two screens from the clickable wireframe, now more of a prototype:
Each week we built, then tested with cohorts, assessed feedback, and repeated the process until we got the point you see at the top of the page. The key takeaway here is that this app was designed iteratively outside of Photoshop, or as some like to call it “in the browser.” We found this process worked best for us and this project, and really sped it up.
More mobile work: