My First Build Week!

For my first build week project at Lambda School, our team was tasked with creating an application that would allow users to build step by step guides on the topic of their choice. Build week is a chance for students to build an application over the course of four days with minimal supervision. For our build week team, we had two UI Developers, one Front-end developer, and one Back-end developer.

Our MVP!

Pitch: Have a life hack? Share it on how-to. Posts with the most likes/reviews/tried it will be at the top of the feed. Simplifying life for everyone.

MVP: 1. An onboarding process for a new general user. (user that will consume the service)

2. An onboarding process for a user who wants to generate content. (i.e. organize how-to tutorials)

3. Ability to easily create/setup a how-to guide.

4. Ability to easily edit/delete an a how-to guide.

5. Ability to easily view/search/find/filter how-to guides.

Stretch goal: Add the ability to add photos and videos to be uploaded.

User Research

Our research led us to the closest competitor of our application, DIY Network. The recurring themes found during our user research led us to conclude the majority of the users for our application would be women aged from 35–50. They own their home and less than 35% of them would have an only child. Their income ranges from $75,000 — $90,000 a year. With this information, we were able to create a viable proto-persona for our application. Meet Alice!

Style Guide

With our Proto-Persona, our Team was able to discuss what colors and typefaces would be appropriate for our style guide.

Front-end Development

Erica, our Front End Developer, used React to create the application. She took advantage of third-party libraries, such as Filepond, to manage file uploads and integration with the backend.

UI Development

Ben, one of our UI developers, used a LESS preprocessor to modify his CSS for the landing page. The LESS preprocessor gives him a variety of tools that streamlined the development process.

Pearl, our other UI Developer, also used LESS, a preprocessor, to effectively lay out styles for the marketing page, including the hamburger menu. She used JavaScript to create tabs and card components for the “About Us” page to show the team as a whole, but also give the ability to highlight each developer.

Back-end Development

Ryan, our backend developer, built a server using ExpressJS and a database in MongoDB. Together, they allow the front-end to create, read, update, and delete data via an API. He designed the data schemes for the NoSQL database and had fun creating nested routes in ExpressJS. The documentation for everything is also great.

UX Design

As the UX designer on the team, I did the user research/testing, created the style guide and laid out the foundation for our mobile application using Sketch and InVision. A live user test concluded our mobile application would be used as intended. The test user was able to use all the MVP features without any issues or complications. The best part about our live test is the user matched the proto-persona very closely!

Our Team Leader

Savannah, our team leader, helped organize our team by initializing team communication and collaboration, ensuring that all MVP goals were successfully completed.

The Build Week Team

Savannah Greuel — Team Leader

Erica Chen — Front-end Developer — WEB18

Pearl Paris — UI Developer — WEB19

Benjamin Lopez — UI Developer — WEB19

Ryan Clark — Back-end Developer — Web 17

Gabriel Romero — UX Designer — UX2

Lessons Learned!

The biggest takeaways from build week for me as the UX designer was to communicate changes to the style guide as soon as they happened. This gave the team time to make adjustments as needed while they developed their code. Which leads me to the style guide. A more detailed style guide from the beginning would have resolved some design related questions before they even arose.

With the experience I gained this week, I’m definitely ready for the next build week challenge!