NICOLE PAPP
The Biz Hive
TEAM
MY CONTRIBUTION
​
Sketch
Adobe Photoshop
Adobe Illustrator
​
​
I managed this project from
concept development,
design to presentation
User experience design: brand design, style guide, user flow design, wireframes, mock ups
​
TOOLS
Overview
As apart of the UI Design course at Brainstation in Toronto Ontario, we were tasked with creating an app and/or website design including the branding and style guide to match what the concept we were presenting. I chose to create a platform for Entrepreneurs in the form of both an app as well as a desk top site. I went through the entire design process which included the logo concept, colours and typography being chosen, creating the user flow of the entire site's navigation hierarchy, designing the mock ups and finally designing the final version of the site.
Problem Statement
This project's purpose was to solve the solo struggle of being an entrepreneur via resource sharing across entrepreneurs. There was an additional component of offering insurance for independent entrepreneurs
User's & Audience
The target audience for The Biz Hive is an independent entrepreneur.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Roles & Responsibilities
I held several roles during the Biz Hive Project which included the following:
​
-
Brand designer
-
UI Designer
-
Content Designer
Scope and Constraints
This project had a scope of specifically being designed for mobile and desktop and it had to be an original idea.
​
The constraints of this project included:
​
-
The project needing to be completed from start to finish in 3 months
-
Include a style guide
-
Showcase our process which included a navigation overview and mock ups (first with pencil)
The Process
1.
2.
4.
5.
6.
The project started with having to do a competitor analysis. I evaluated three specific competitors to my concept:
​
-
Entrepreneur connect
-
Google + Communities
-
Biznik
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​​
The​ next steps taken were to put together a mood board for the basis of the design language for The Biz Hive.
​
​
​
​​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
The next step was to design the logo and put together the style guide that built on the mood board.
The next thing that was explored was typography. I started out drawing the type of font I wanted for this project and moved on into researching what font pairings looked best.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
I then began my wire framing process on paper; this included the screens and a map of the navigation menu which included user flows for different goals.
It was time to move into the digital mockup stage of the project!
The final step was to move into the final design process to showcase what the actual website would look like. The design was made for both desktop and mobile. Scroll down to the Artifacts section to see the final product :)
​
​
7.
8.
​
Outcomes & Lessons
The final outcome of this project was that I presented everything I had created to my UI Design class and I got some great feedback! Overall most people thought my project was well done, especially my focus on the design process.
​
The biggest lessons of this project are outlined below:
-
Next time, don't spend so much time mapping out the entire navigation flow as I could have had more time to refine my final website design. My mind focuses on the big picture first so that was what I was naturally inclined to do
-
Add in more time to take specific photos to fit the design of the site as it will really look cohesive brand wise
-
Collaborate with more seasoned designers for their suggestions and guidance to elevate my designs
Artifacts
Website Wireframes (desktop)
Website Mockups (Desktop)
Website Mockups (Mobile)
