Bizzy

Bizzy is a mobile and web responsive location based app that helps it's users find the best spots to eat, shop and explore.

— The Objective

I wanted Bizzy to have many different features to appeal to a wider audience. I wanted all users to feel excited to explore, find their next meal or discover a great new sweater at a local gem thrift shop. I knew an exciting yet simple UI would be key to this app.

— Purpose & Context

This is my 2nd student project. The project brief was to create a web responsive application.

This was my first time making anything responsive and it was an exciting yet challenging experience. I had some struggles with getting the overall sizes of the larger breakpoints correct- but did it in the end! What I learned from this project I know will help me with future responsive designs.

— My Design Process

I started with some wireframes to get an idea of what I wanted the screens to look like, then created a simple inspiration board to gather the type of feel I wanted Bizzy to have.

After tweaking the designs and applying some style, I jumped in to user testing.

— User Testing

First, I did an A/B & preference test using Usability Hub.

Link to A/B & preference test results

I had participants choose which screen they liked best, with the option to comment why:

Findings of A/B & preference test

Out of 39 participants, 31 chose the first design, and 8 chose the 2nd. The first design was a clear winner.

Many who voted for the first stated they liked the layout more, and liked that the ratings of the restaurants showed a color scale, which always helps when judging if they want to go to that restaurant or not.

— Peer Review

My next task was to ask some other Career Foundry students if they could review some of my responsive design screens. I chose to show them my home page for this task and this is what they were sent:

As you can see, I actually forgot to create a footer for my large breakpoint- which is my web page design! This of course was an oversight on my part, as this was my first time creating a responsive page. It was designed quickly after.

Feedback From Peer Review

• Participant #1- Kristina Kim

"The only thing I find difficult is that on some images I cannot clearly read the name of a restaurant and its other characteristics, like here for Ex.: (she linked photo)

Maybe a gradient could help, so that the bottom part of images is slightly darker than the rest, and maybe additionally a little bit of shadow for the text to create a stronger contrast and increase readability? :)"

My comments: I brought up to her that I do have a gradient at the bottom of the photos to help legibility, and showed her a screenshot of what it actually looked like. For some reason it wasn’t showing in the PDF. She agreed that that was good.

I said I would work on making the text easier to read regardless!

Participant #2- Elizabeth Bush

"I think you could spice up the Bizzy logo to make it more in the same league with the icons. And then maybe use that same light blue to just fill in the active icon at the bottom while keeping the outline.

The text at the bottom of the images is visible but maybe make the smallest text slightly bolder."

My comments: I like her idea of spicing up the logo, I’ll definitely be looking at that again. I also agree about trying to define the text more as both of them have pointed that out and I agree that might be hard to read.

Both Kristina and Elizabeth were extremely nice and encouraging!

I took their feedback in to the finalization of my designs.

— Final Results

Note: I plan on re-designing a lot of things in this application, especially the larger breakpoints. There’s some things I would change and improve now that I know more!

Thanks for reading! 🖐