The goal for this project is to design a prototype for a responsive website. Both desktop and mobile prototypes for three workflows were designed using Adobe XD. 
Workbrew is for users who want to know all about where they are going. It offers real time information coming from users themselves. Features include information on how crowded a coffee shop is in order to eliminate wait time as well as giving the user the power to customize and set preferences in the search process.
Desktop Clickable Prototype
*Screens used in the prototypes can be found as separate images at the bottom of the page!
Mobile Clickable Prototype - Videos
*Screens used in the prototypes can be found as separate images at the bottom of the page!
Interview Findings + Personas
The first steps were brainstorming and gathering information about people around me and my target audience. I conducted several casual interviews in order to help me create my personas and modified them throughout the process as I gathered more information. 
A) There were common frustrations and pain points for all interviewees that overlapped. It was mentioned that the last time they tried to go to a study space such as a coffee shop on/off campus this resulted in unnecessary lingering from place to place and looking for empty spaces.
B) Another common pain point that came up was the importance of outlets and internet connection at the place. An important pain point that followed this topic was distance. Walking long distance to a good coffee shop just to find out it is full or has only a few tables with nearby outlets is simply frustrating. Sometimes students prefer to stay at home at work (which often leads to procrastination) because they are absolutely sure that everywhere is full - especially on weekends.
C) Additionally, interviewees also mentioned that although there is some information about the coffee shops online, they are not always correct. This information includes hours of operation and peak times. Another source of information that came up was Yelp. This app would include tags such as “good for working” and some information was said to be listed incorrectly. It was mentioned that photos and emojis are greatly appreciated in reviews.
Brain-drawings + Hand Drawn Wireframes
The next step consisted of basic hand drawn wireframes as well as exchanging brain drawings with five other classmates in order to gain more perspectives for a better UX. 
Usability Testing Feedback
Usability testing was done using clickable wireframes designed in Adobe XD. There were 4 participants, all Northeastern students, between the ages of 20 and 23. Key issues and positive feedback from the user testing can be seen below.
I presented final versions of the prototypes to my class and guest critiques. The presentation included background information on the design process as well as demos of three separate workflows, which are shown in  videos in the presentation. Videos were recorded using clickable prototypes.
*Key Screens

You may also like

Back to Top