11 Main is like the shopping on Main Streets across America with items including jewelry, fashionable clothes, baby items, sporting goods, toys, collectibles, antiques and furniture for your home. Shop for anything you can imagine with an elegant shopping experience, everywhere and anywhere.
I had a chance to work with Alibaba 11Main as a Lead UX/Visual Designer. My role with the company was to elevate the brands interface and to design a IOS 7 mobile app & IOS 7 Ipad application from scratch. We referenced design trends while thoroughly thinking on how we wanted the thing to look and function. The overall project took 6 months for the wire framing, visual design, testing & development. Since we were pushing on time all of the wire frames were hand drawn and we downloaded UI Stencils. The informational architecture was simple, we were following the same structure as the desktop site.
1. Site Map
Below you can see a snap shot of the organization :
The Iphone app was the first project . No worries, we started drawing up ideas for a homepage screen. The challenge with the mobile project was to showcase carousel headers, display a preview for shops & categories all in one screen. We tried several design solutions before getting into a comfortable spot. The other goal was to make the carousel image act like a navigation. Meaning if you swipe left or right from the carousel you can transition into another category.
The homepage screen has a 40px arrow located in the middle that opens up allowing you see the rest of the collections and marketing tiles. The user can toggle between shops and categories from the buttons beneath the image carousel. We also decided to put a fixed search bar at the bottom on top of the navigation to ensure that users find search quickly from any spot on the app. After referencing other competing applications such as Etsy, Ebay and Modern Touch, etc. We discovered that placing the search bar at the bottom was unique & more convenient for users.
2. Drawing + Wireframing
The drawing shows the homepage, homepage on scroll and a collection page :
The next steps were to draw out the shop profile pages & item view pages. The Shop profile pages have 3 sub categories. They are About, Items & Categories. We didn't want to re-invent the wheel on these pages because the profile pages are a vital spot for shop owners. Below are some examples of shop profile pages :
The drawing shows the Shop Profile Page, Shop About & Category :
While drawing up item view pages we only had a few stern objectives which were to make the add to bag button fixed at the bottom of the page, and having a full screen view of the items. Nothing too corky and we wanted to cleanly design the type and filter buttons to give it a desirable polish.
Below are the Item View Sketches :
3. Visual Design
The next steps were to take the sketches, inspiration and feedback then compile the work into photoshop for some visual designing. Just like the sketches we designed from top to bottom starting with the homepage and so forth. Below are some snapshots of the screens along with the other visual assets as far as collection tiles, marketing tiles and collection carousels. I was lucky enough to be given the opportunity to design all the category type faces.
Below are the full versions of the screen designs :
To ensure that the development team was spot on pixel for pixel with our designs we created Specification docs for several screens. We didn't have to make them for each screen because a lot of the pages are similar the only thing that was changing was the content. developing spec docs is key and saves a ton of audit time.
Below you can see a sample of the spec doc listing the pixel dimensions for type and objects on the screen :
Once the first Beta was released internally we tested it out with small focus groups. We started out testing it with our VP's, Product Managers and Merchandising managers. The overall feedback was excellent and the team loved the experience. One of the top concerns was if the middle arrow button was big enough to attract users to hit and if the search bar decision was substantial. We checked typography, navigation, POV sizing and object size placement with LiveView App. Previewing those objects before development saved us a lot of audit time because we were able to immediately decide if placement and sizing was befitting. The center button was highly important because it played as a garage door to all category content.
After these first steps of the process were completed it was time to send all PSD's files to the development team at Lolay. The overall development process for the Iphone took around 3 1/2 months. We had meetings every other day with the dev team to ensure design precision and fluid functionality. The Lolay team was responsible for Web, iOS (iPad and iPhone), Android, APIs, Node.js, EC2 development.
Ipad App :
For the Ipad design we wanted to marry the aesthetics together for brand consistency and smooth development transitioning. There were a few things we had to keep in mind while designing. Each page has a vertical and a horizontal view, which means each page has two designs. The process was the same as the phone Drawing + Wire Framing, Visual Design, Development & Beta Testing.
Below is a example of the homepage wire frame ideation for the horizontal and vertical view :
The first homepage + category pages are designed just like the mobile app. Looking at the drawings the layout is exactly the same except we eliminated the middle arrow button because there is no need to crunch in content. This decision was made simply because of size specifications whereas the Ipad is sized at 2048 x 1536. The only challenge was designing the search pages because, the team all wanted large item views and more of collection type of feel.
In the vertical view (on the left) we designed a simple 4 column grid to display items. You can toggle between shops and items with the buttons at the top of the page. In the horizontal view (on the right) you can swipe left & right over the large scale items to view more. The lower column shows you a small preview of shops that match your search results were you can swipe left & right instead of a infinite vertical scroll.
Below are the Search Page drawing ideations :
Below I will now show you the designed screens :