CASE STUDY: FLATSTICK PUB
What is FLAtstick Pub?
Flatstick Pub is a local establishment that offers activities, food and local brews. There are three locations in the greater Seattle area. The website offers information about the menu, activities, and memberships. It also featured an online store while I was working on the project.
Challenge
The challenge of this project was improving one e-commerce feature on a local business' existing website . We were to produce a design with a designated persona in mind. I was familiar with one with Flatstick's Pioneer Square location. This made them an easy company to choose. I had a pretty good idea of to expect for this project.
Client: Flatstick Pub
Product: Client website
Time Frame: 14 days
Platform: Website
Deliverables: Sketches, user research reports, wireframes, mock up designs, InVision Demo, display of iterative process, discussion guide, storyboard, problem statement, hypothesis statement.
Team: E.J. Grijalva
Role: User Researcher, Information Architect, Interaction Designer
The Problem
During the duration of the project there was an online store featured on the site. The online store was the obvious choice for the redesign section. However, the online store redirects you to a third party website. This redirection made the online store off limits because purchases were not made on the Flatstick site. During my initial run through of the site, I noticed there was a membership page and no way to become a member. I couldn't help but think this is a missed opportunity in revenue and customer retention.
approach
Rather than designing a new online store, I decided that I would implement a system that would allow users to become life time members. Not only would I design this, I would restructure the navigation so it highlights the new feature.
Persona
I had to choose one of three personas provided by General Assembly for this project. Having one persona allowed me to ask the important questions like " who is visiting the site?" and "how would they want to interact with it"? I chose the persona that I went with because It was easy to visualize her at Flatstick. I would find that recruiting participants for testing was much easier to do when having a type of person to focus on.
Competitive analysis
Site Map
By mapping out the current site I was able to brain storm how I would be able to improve the existing navigation. at the time of the redesign there was only two Flatstick locations featured on the site. Both locations have a section in the primary navigation. I initially thought condensing them into one location tab would help improve navigation. My thoughts behind this were that it would be one less thing that users have to focus on. I also thought this would help highlight the Membership and Merchandise sections.
paper prototyping
With only 7 days to conduct research and usability testing I needed to figure out a way to make the most of my time. I began to make rapid improvements between each paper prototype. This allowed to take advantage of the short time frame. I built my test around the landing page, membership page, and mini golf page. I included the mini golf page to test the navigation. I found the paper prototype testing to be fun. It was great to see people interacting with the screens and prompts I had built. My participants found the navigation of the prototype to be straight forward. The feedback was encouraging.
Wireframes
With the testing results in hand, I was able to move forward and design wireframes. As I began to work on the wireframes in Sketch I grew more and more excited to test them. Not only was I exploring new tools, I was getting closer to a more tangible design. From testing I was able to gather that I was still on the right track with my navigation. However, I overlooked the most important addition to the landing page. I forgot to highlight the membership and merchandise pages in the navigation. This was a quick fix.After all, E-commerce was to be improved in the site, not hidden. I was able to make a few changes to fix this mistake while designing my prototype. I found user approval through testing these changes.
What's next
- Conduct further testing on wireframes to determine if another iterative process is necessary
- Create a Hi-Fi walk through to present to Flatstick
Retrospect/hindsight
I found that by not rushing my to digitizing my wireframes and spending more time with my sketches I was able to test more efficiently. I would have liked to have more time to spend with my Mid-Fi wireframes.