Next Case Study:

Hashtag

 This project was conducted under an NDA so the specifics of this project cannot be shared publicly

Transforming desktop functionality into mobile
  • Competitive Analysis
  • Workflows
  • Wireframes
  • Prototypes

Project Summary

An Angie's List project was already underway, they were building out a new part of their product. I was brought on for a few weeks to take charge of the mobile aspect of the new project. Most of the initial heavy lifting had already been done, scenarios, functionality, etc. It was my job to take what we currently had and make it work on mobile, not just from an interaction stand point but also architectural. I worked with the internal Angie's List team as well as our team with DesignMap. My primary source of informatation were the mostly-completed wireframes for the desktop version.

Ramp Up

I initially met with the Angie's List team and got an understanding of what they wanted for the mobile version of the product, which functionally to include, to ignore, to prioritize etc. I also met some of the developers to get an understanding of what type of functionality was going to be possible.

The Navigation

The first step was to figure out the structure of the app, I had all the peices but I needed to figure out how they were going to fit together. The mobile app was meant to work alongside the desktop app, not replace it so the desktop navigation could not just be placed in a mobile setting. I started by looking and breaking down some other apps that needed to solve similar issues.

Navigation breakdown of the Etsy seller app

From there I started to plot out options for Angie's List. By the end I had several, the best of which I presented to the team at Angie's List.

Navigation Concept Example

After some iteration and feedback from the client we moved forward with a few directions in higher fidelity.

Higher Fidelity Navigation Concept Example

In order to ease communication with the Angie's List team we limited the navigation to only 3 viable options, each of which had their own individual strengths and weaknesses. We worked with the team to work through which of these factors were most important for their mobile users.

Navigation Option Strengths and Weaknesses

At this point, because the navigation concepts were getting too large for a PDF to convey, we also started to user some invision prototypes to test out the concepts.

Invision Prototype Screenshot

Wireframes

Once the navigation was finalized, I moved onto making wireframes for each page.

Example Wireframes

After several iterations and feedback from the client the wireframes were completed, and annotated to include much more detail about interactions, edge cases, etc.

Example Annotated Wireframes

Android Wireframes

This project gave me a chance to dive into something I knew much less about, designing for Android. I bought an Android phone and started to document some of the more popular apps. I also spend a lot of time on the Android Developer Documentation. It was important to keep the app consistant with standard Android design and funcationality.

Android Material Design Documentation

Once I had a handle on the particulars of Android I made wireframes for the Android version for all the key pages and actions.

Android Example Wireframes

SiteMap

In addition to wireframing out specific workflows I created a sitemap to document the entire app and all it's pages.

Example Sitemap

Conclusion

This project gave me a chance to dive into something I knew much less about, designing for Android. I bought an Android phone and started to document some of the more popular apps. I also spend a lot of time on the Android Developer Documentation. It was important to keep the app consistant with standard Android design and funcationality.