Mobile Design – Individual Projects
HCI 530 - DePaul University
| I decided to include this entire course that mainly dealt with the design of interfaces as they entered the mobile platform, whether it be mobile or tablet screen size in either Android or IOS operating systems.
The bulk of the work/artifacts for this course consisted of redesigning determined website failures from desktop to mobile including “CityofChicago.org” and “Sears.com”. The two chosen projects were creating low-fidelity Axure prototypes screens that were redesigned depending on screen size and operating system standards. The final artifacts presented here were creating Axure based specifications of the redesigned applications. |
CityofChicago.org
| I began this mobile project by going onto the City of Chicago desktop site and imagining what would be some of the user’s most numerous and important scenarios to complete. Immediately I thought of where I would find the general contact information for the city. To my amazement, the information architecture of the site was set up in a way that it was actually difficult to find something so general and important. The contact page was not found in the main navigation, so for both operating systems of the native application I have provided access to it on the home screen in slightly different ways and the flow is documented on how to access it. |
| For the second scenario I chose something that I have done in the last 6 months on the desktop city site and wanted to see how I would design it for mobile. I reported that a street light was out near my building because I walk my dog at night and not having the light was actually an annoying problem. This specific scenario lends itself perfectly to a native mobile application given that you can provide the exact information to the city out in the field. |
Sears.com
| The approach for the responsive mobile and tablet breakpoint of this Sears product page was intended to keep important aspects of ecommerce integral to its function while streamlining the visual aesthetics. The main purpose of this site on any medium is to sell the merchandise and provide the user with all the key information that Sears can offer them about their products. Given the small screen size on mobile, I initially determined what were the most important affordances to complete the current purchase of the item and made them the easiest to access. This ease was based on proximity to the fold and size of the clickable elements so the user could easily press them.
Next, I determined what secondary items were and attempted to hide as much as I could, but give the user the opportunity to access them. Finally, I arranged the items in an aesthetically pleasing composition based upon common patterns found within ecommerce sites for both mobile and tablet specifications. |
