to UI/UX
Back
Yoshi's
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
How the stroke will animate
How the pages open when links are clicked
Design Process
to UI/UX
Back
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.
Entire website view for Concept 3
1 individual page 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
Click on the image (along side) to view the slide, showcasing all the pages.
Color explorations replicating the hand-drawn stroke in Adobe Illustrator CS. This was finally chosen to build all the mock-up screens of the website.
before
after
