April 16, 2015April 16, 2015 by AndrianaArt

Mockups with Interactions

For this last round of mockups, I added a lot more screens and described the interactions between them in detail. Doing so brought up some usability and visual issues I had yet to really deal with. For example, on the map page I have “back” and “next product” buttons which made perfect sense at the time but now seem kind of odd. I’m going to have to re-visit the functionality of them and see if they still make sense. I am displaying all the search results on the map anyways so when would users need to see the next product?

March 31, 2015March 31, 2015 by AndrianaArt

Mockups v2.0

Thesis Project
jQuery, mobile, mockup, prototype, sketch

After re-working my wireframes and following my updated user flows I have began to work on mockups to reflect these changes. Since I am going to build my prototype using jQuery Mobile, I now know the UI library I am working with. Trick is going to be getting my prototype to look like my finished mockups.

Here is v2.0 done in Sketch, I want to add more finish and show interactions in the next round:

Home Page

Search Autocomplete

Refine Search

Product Page

Scan Item Page

Store Map

March 13, 2015March 13, 2015 by AndrianaArt

Wireframes v2

For this round, I built out my full wireframes using Sketch instead of Balsamiq Mockups. I wanted to convey more detail and learn how to use the app at the same time. Earlier this week, I attended an online web design conference called the RWD Summit, put on my Environments for Humans. Needless to say, I learned a ton about design and new workflows including Sketch.