To better design this page, a solid review of the Tiffany App is necessary. Please understand that the Tiffany App is only for illustration. Our app must look entirely different.
This is an iPhone and iPad app and everythign should be designed for retina and non-retina displays.
The homepage needs to be designed. It should be really clean but very memorable. The title will be at the top (possibly together with the icon). There should be four primary links. “Try on a ring”, “Buy a ring”, “Education” and “About Us”. There should be small links at the bottom directing to facebook, twitter and pinterest.
The LoadingScreen will have the same background and title as the Home Screen but without the links (and a loading… message) so it doesn’t need a new design.
The ring selection page needs to be designed using a similar UI as the Tiffany App but with a different look and color scheme. It should feel different to the Tiffany App. There should also be place to put in a longer product title with more words.
At the top there will be a ‘back’ link, a number of visible ring (changes based on filters below), and a reset button. At the bottom there will be 3 options of categorisation. The ‘gem types’, ‘carats’, and ‘shapes’. The pop-up for the selection should pop-up above it.
- Gem Types: Diamond, Emerald, Sapphire, Ruby, and Onyx.
- Gem Carat: 0-0.99ct, 1-1.99ct, 2-2.99ct, 3-3.99ct, 4.00ct+
- Gem Shapes: (You can either put names or pictures of shapes) Old Mine, Round, Princess, Square, Emerald, Oval, Pear, Marquise, Cushion.
The inside page of the product page should have the title and image at the top followed by a brief description of the ring and price. Like the previous screen, the user should be able to slide to the right to view more pictures. But in this case the user will be scrolling through different angles of the ring. At the bottom of the screen there will be two big buttons: ‘Try it on’ and ‘Buy it now’.
The next page that needs to be designed is the ‘try it on’ page. This page should have an outline of a hand with an icon ring over the ring finger. There should be a large ‘Take Photo’ button at the bottom. In the top corner there should be a button to switch to finger view and that will replace the hand with a zoomed in ring finger (with maybe a part of the two rings on either side) on the full screen.
As part of this page should be the rendered design that pops up over it. It should have the picture rendered with the ring above the place that the icon was. There should be a button to go back and try again (there isn’t going to be an option to reposition the ring), and there should be an nice links to save the image to the gallery, to email, to post it to facebook, instagram, twitter and pinterest.