OVERVIEW
Brick by Brick is a marketing website for a startup that is creating a first-of-its-kind crowdfunding platform to help local small businesses raise the funds they need to launch. The rise of the experience economy signifies a growing demand for unique and original in-person experiences. Brick by Brick connects entrepreneurs looking to open brick-and-mortar concept businesses and the individual investors who want to back these projects.
Timeline: 75 Hours over 5 weeks
Role: Lead UX/UI Designer
Tools: Figma, Miro, InDesign, Illustrator, Photoshop
Deliverables: Responsive website
RESEARCH
Market Research
To kick off the project, I conducted market research of the experience economy to uncover historical trends that helped me understand the target audience and what motivates them.
Post-Covid Predictions
Synthesizing the learnings of my market research, I made some predictions for the post-covid age identifying needs with possible outcomes.
Competitive Analysis
I conducted a competitive analysis of similar crowdfunding sites to identify competitors and their strength & weaknesses and to understand Brick by Brick's opportunity in the market.
1:1 Interviews
I conducted a series of interviews to better understand the problem this project was attempting to solve. My questions centered on understanding user goals, the context of use, and the future of the experience economy for brick and mortar businesses. I identified two primary user groups with emphasis on two categories: profit and neighborhood cultural development.
Provisional Persona
I created provisional personas for the entrepreneur and investor. These personas help me narrow my focus on a target group.
DEFINE
Empathy Map
I transcribed the interviews and constructed an empathy map to organize observations by: feelings, businesses, finances, location, and customers. The purpose is to synthesize my findings from the 1:1 interviews. From the empathy map, I organized observations into shared patterns and behaviors to identify developed insights and needs.
Insights
Investors prefer to fund businesses that will improve their neighborhood.
Investors prefer to fund businesses that align with their values.
Customers prefer businesses that are socially responsible.
Needs
Customers need a safe places to shop.
Investors need a resource to find businesses they believe in.
Entrepreneurs need a place they can easily acquire funding for their ideas.
Personas
Meet Frank and Shelly, the personas for Brick by Brick. Personas help humanize design by profiling target audience members to design for. Frank and Shelly are based on interview observations and empathy map insights. Moving forward, I based my design decisions on their profiles.
IDEATE
HMW statements
This step helps me transition from the problem to the solution. In the POV statement, Frank's and Shelly's needs are a result of their insights. I then put myself in Brick by Brick's perspective by asking, how might we help them achieve their goals?
Customer Map + HMWs
I created a high-level customer map to better understand where Frank's and Shelly's goals intersect. I then placed the HMW statements on the timeline.
Experience Map
Applying my research to the high level customer map, I created an experience map. This steps helps visualize concisely where, when, and how Brick by Brick can best serve our persona's needs.
User Flows
I detailed the most promising solutions and organized them into key screens for Shelly and Frank. This step helps…
Find a home for proposed solutions.
Builds information architecture to organize screens.
Investor
Entrepreneur
Wireframes
I reviewed competitor sites to source inspiration and incorporate familiar design patterns. I digitized the sketches into mid-fidelity wireframes to create key screens for the site for usability testing.
DESIGN
Brand Guide
To craft Brick by Brick's brand identity, I first defined it's core characteristics by using key words.
Fun • Cheerful • Clean • Simple • Bright
I then created a Pinterest board to gather visual references based on these characteristics. With inspiration for Brick by Brick's design direction in place, I created a logo, chose brand colors and selected typography.
Branding
Using the Interaction Design Foundation's network, I posted comps to get feedback on design direction using 3 options: Photographic, Illustrative and Graphic. The Photographic option was by far the most well received. This option informed my designs moving forward.
Wireframe Revisions
I took the recommendations from the tests to improve usability. The main changes were defining category descriptions, fine tuning push scrolls and adding a modal for sign up. I populated the mid-fidelity wireframes with imagery, brand styles, and UI elements to create high-fidelity wireframes, a highly developed mock-up that I can present to the client.
Responsive Design
I applied brand styles, UI elements and imagery for mobile and tablet to address responsive design requirements.
Final Prototype
I uploaded the high-fidelity wireframes to Figma. Interact with the Figma prototype here (best viewed on desktop).
Test the prototype by:
Browsing projects
Starting a project
Learning about the featured project
REFLECTION
Do your homework. Coming from a visual design background, I had to encourage myself to stay focused on the research in order to make the end result more purposeful. I was happy I made the investment to better understand the customer and the problem I was trying to solve.
Iterate, test, validate. Gathering feedback from user testing is critical in making truly informed design decisions. Social distancing guidelines due to Covid placed some limitations on my testing process. Moving forward, I hope to discover new methods to validate my designs.