Case Study 2: Responsive Web Design

Poki Run Page Redesign

Bringing a brighter and clearer Poki to you

Overview:

Poki Run is a local poke restaurant in my area, however their website has been black and white with very minimal visuals or website identity. This projects works to create more vibrant colors and improve content clarity, allowing users a more modern and engaging website that matches the restaurant atmosphere.

Problem:

Many users have experienced that although the ordering system is easy to understand, lack of clear visuals from website along with lack of clear descriptions, especially for a ‘build your bowl’ style of menu causes users to turn away from the website.

Role:
UI/UX Designer

Duration:
4 Weeks | September 2025

Process:
User Research and synthesis, Solutioning, Prototyping, Usability Testing

Design Process

Emphathize - Design Process

Research Process

I conducted research to get a feel for what other restaurants are doing with their home page.

Pokeworks and Poke House are popular Poke competitors which I wanted to do for this analysis. Mountain Mikes is a neighboring restaurant and wanted to see if they are doing anything different. Doordash for the base of online order interaction and wanted to research them as well.

Things I found:

  1. Sharing story, especially for these small chains have helped to bring branding as well as show the people who are the ones behind the kitchen.

  2. Giving vibrant and a unique view of the restaurant helps to show and explain a lot about who the restaurants are as a whole.

  • Originally Poki Run did not have an online presence. However with the addition of Covid-19, the store was forced to shift to have online presence. Although not great, PokiRun has managed to get their website up and running, however very bare bones, as you can see from the screenshots.

User Interviews

I conducted interviews with 6 users who generally use YouTube for their music needs and practices (mostly musicians and people who use YouTube to practice their said instrument).

Things that I have found through my initial research:

  1. 3 users found that there is a time consuming element when it comes to finding the right key to practice. Often having to use 3rd party applications to try and get the sound that they desire

  2. Many users found they really like certain parts of songs that they would like to learn, but sometimes cannot hear the part and having freedom to change and manipulate certain parts of the track would improve their practice.

  3. Almost all of the users explained wanting some sort of way to see sheet music or some sort of help learning songs.

  • After gathering the user interviews, I found users also wanted functionality of sheet music/tabs as well as the mixer function. At this point I considered adding this feature, do to the user interviews and proceeded to try and implement this feature as well as the mixing.

After Finishing the User Interviews, I made some personas that would help to solidify what the target for this project is and how I can move forward to problem solve these Persona’s needs and challenges

With the personas made, I then went to the user flow step. Because of the feature being implemented is pretty simple and adds to existing YouTube,

Defining

Design

Low Fidelity Wireframes:

I created some low fidelity sketches from some of the ideas that were mentioned during the user interviews. The idea initially was to try and implement this into the UI of the YouTube videos themselves.

However, after some feedback sessions, I decided to shift the idea into a button because of the limitations of the slider.

  • After gathering the user interviews, I found users also wanted functionality of sheet music/tabs as well as the mixer function. At this point I considered adding this feature, do to the user interviews and proceeded to try and implement this feature as well as the mixing.

Mid Fidelity Wireframes:

After some rethinking, I realized by having a button like the ones that are found next to the like and dislike button, I can create a dropdown option that would implement all the ideas (Audio mixing, Transposing, and Chords) through the use of AI could be accomplished.

Design/Mood Inspirations

Starting this project from scratch was more difficult than I thought. My goal was to bring familiarity to the website with the actual store. After going to the store and finding that their store has a character of its own I decided on some inspirations to tackle.

  1. I loved the color theming of the restaurant. I wanted to try and use the yellow and black and use the red for the accent color

  2. They have a lot of hand drawn menu items and instructions in their store. I wanted to use the black and the font choice to reflect a bit of that feeling of chalkboard along with drawing some images like in their menu.

Testing and Iterations:

After testing and finding the designs some of the things that I ended up changes as a result of those results:

Iterations to the Mixing Element:

  1. Added instrument Icons to indicate which instrument volume is being changed

  2. Through user testing found users asking if music had more than 1 instrument how to would there be a differenciation,

    1. Added a descriptin of the instrument

  3. Wanted clearer way to indicate when an instrument is fully muted and made the icon also turn red and changed to say “unmute” when muted

  4. Added a volume and mute in place of - and + through user testing finding it reduntant.

Iterations to the Transposing Element:

  1. Through user testing, found that keeping color simple between the two functions were key.

    1. many users found that having the red felt like something was "quite” because of the mixing color being red when muted

Iterations to the AI Mixing Button:

  1. Many users indicated having a simplier design would be better.

    1. the square design was too busy with the design, and so I simplified the button to become an AI star with a music note.

  • While doing user testings for the AI Chord generator function, I found users being very confused about the functionality, indicating “"not knowing what it was suppose to be at first glance".”

    After some more user testing and iterations of the design. I found myself deciding, for the scope of this project, to omit this function and focus on Mixing and Transposing functions.

  • After some user testings, many musician testers asked why there were little customization (EQ capability, gain stage controlability)

    I considered making the design more elaborate, however through one user testing (who likes to dance and teach dance) explained that this simple layout was great for her teaching classes [example is raising the drums so that students can hear better the beat pattern clearer]

    I decided (with the time limit of the project) to keep the simple design, and after launch and more feedback, that the next iterations can include more mixing capabilities.

High Fidelity Prototype:

High Fidelity Prototype:

Figma Prototype

Takeaways/Reflections

I had a wonderful time with this project. I love playing music and to try and problem solve a problem that I had for a while was something that grew my passion for the project. Some take aways from this project:

  1. Sometimes user needs and my ideas may not always align. But navigating through those things and continuing to be open mided is key to navigate through these times.

  2. Although there were many directions to take with this project. Sometimes once things are doing its things correctly and functions well, that is good enough.

  3. Many elements go into adding a feature, color matching, familiar elements. Research and data collecting go a long way to helping create a familiar but new element.