 Yoshi's Redesign- the calligraphic stroke will animate (scroll down to see animation example video) - This was the general look-and-feel for all 3 solutions (click through to see the 3 solutions) |  Solution 3This is the one I recommend to the client |
|---|---|
Landing page- the calligraphic stroke will animate (scroll down to see animation example video) - user can hover and click on Oakland or San Francisco |  Hover effect (on San Francisco)Shows the details of the restaurant at San Francisco like Michelin star, time established, etc . Making it an easy choice to make for the user after reading the info. |
 Hover (on Oakland)Shows the details of the restaurant at Oakland like Michelin star, time established, etc . Making it an easy choice to make for the user after reading the info. |  Home Page - San Francisco |
 Home Page- has a drop down menu |  Solution 2 |
 Landing page- same as solution 3 - the calligraphic stroke will animate (scroll down to see animation example video) - user can hover and click on Oakland or San Francisco |  Hover on San FranciscoShows the details of the restaurant at San Francisco like Michelin star, time established, etc . Making it an easy choice to make for the user depending on the info. |
 Hover on OaklandShows the details of the restaurant at Oakland like Michelin star, time established, etc . Making it an easy choice to make for the user depending on the info. |  - navigation is aligned to the calligraphy. and placed according to the eye moment pattern. - Main page acts as a the navigation bar, making it the HERO the center of action. Its good as ‘main page’ has ‘Call to Action’ : Buy show tickets OR Reserve Table. The remaining pages act as extension or supporting information - Right side link will navigate to the page on right and the left side link will navigate to the page on left |
 Hover on a linktext color changes to suggest that the link is click-able |  'future shows' link is clicked- displays the future shows page - link color changes to suggest you are on that page |
 Solution 1 |  Solution 1 - landing page- the 9 rectangles appear as click-able buttons and the complete calligraphic stroke can be seen - each of the 9 rectangles represents one page of the website |
 hover effect- when Hovered on any rectangle |  When clickedthe page linked to the button is displayed when you click on the 9 rectangles |
Task
Redesign of website "www.yoshis.com", belonging to the restaurant - Yoshi's. Yoshi's serves Japanese cuzine and has Jazz music performances everyday.
Solution
Yoshi's has 2 art forms Jazz and Japanese food and hence the website should be based on ART to be in sync with the brand. Hence my solution is built on 2 Japanese art forms Origami, inspiring the Interaction of the website and Calligraphy, which is used for the Visual/UI inspired by the ‘O’ in the YOSHI’s logo. (This is explained in more detail in the Design Process below)
3 different approaches are provided as Solutions, every solution can be interacted with differently
Done at: Freelance | 20 hrs/4 weeks
Year: 2014
Platform: Fluid - ipad, laptop, desktop
Tools Used:
SOFTWARE: Photoshop, Illustrator, Balsamiq Mockups, Indesign
HARDWARE: camera, pencil sketches
Design Process
Evaluative Research
Current site was assessed by conducting Usability Testing with a focus group of new/first time users, on the current site 'www.yoshis.com'. The following questions were documented:
- What works
- What does not
The solution for the same, were thought out / and jotted down as a start.
User Profile
- Interviewed 5-10 users and built 2 user profile that will use Yoshi’s website. This will help to design 'for the User’ keeping in mind their needs first
Artifact Analysis
As this restaurant brought 2 beautiful art forms together Japanese cuisine and jazz music, I started to read about Japanese culture and art, during the same time as I was making rough sketches for the wire-framing stage.
Pencil Sketching
Lots of explorations were done at this stage, to get a fair understanding of all the possibilities of interactions. There were around 5 explorations, some of them are documented here.
Brainstorming
- Yoshis website serves 2 main use cases- one booking a table (come with a jazz show); two booking a show (table included). Giving these use-cases higher priority Rough Sketches were then categorized into 3 distinct concepts.
- Yoshi's has 2 beautiful art forms- Jazz live performances (for music) and Japanese (for food). Hence I chose one of my ideas that concentrated on 2 Japanese art forms Origami and Calligraphy, to add art to every aspect of communication for Yoshi's and to round the whole experience.
1 individual page for Concept 3
Entire website view for Concept 3
1 individual page for Concept 3
Sitemap
The Site map was created to understand the task flow, the segregation of information, its organization + labeling + find-ability
Wireframes
Click-able wireframes were created
They were used for usability testing as the navigation menu was different
Typography
- Logo
- Font Choices
- Color recommendation
- Pairing of the selected fonts with a calligraphic stroke, to check if it works together.
User Interface
A lot of color iterations were conducted at this stage with continuous user testing for feed back not only on the flow but on the Visual elements.
A continuous calligraphic stroke I drew on paper, scanned and used for building some color layouts
Color explorations using the hand-drawn stroke
The results of user testing showed:
- the idea of calligraphy was not being obvious
- it was too busy compared to the current trend in apps
- people with slight inclination to art liked it and the lay man did not
- Subdued the color to grey
User liked the change and felt like it looked like an app built for today's audience
- changed the stroke from hand drawn to illustrator brush
- made around 15 -20 such strokes using different illustrator brushes and user-tested again
- changed the arrangement and the focus on the information by rearranging and color emphasis
- button variation
