From Design to Code

image of computer monitor with How-To app homepage displaying

openbook

Allowing scholars to easily find advisors, collaborators, and peer review, while growing their academic network!

After completing a four week case study and creating a high-fidelity prototype in Figma, I began implementing the code to build the design in ReactJS. First, I used Storybook to individually design components, creating a UI library of reusable React components. Then I worked on building out the React app using the designed components.

Storybook user interface — The **Storybook** user interface allows me to view individual components and keep an organized UI component library.

Screenshot of React app in browser — React app running in the browser.

How-To

Allowing users to easily find and create How-To tutorials and share with a community of do-it-yourselfers. Available on desktop and mobile!

I completed the UX design for the How-To app for desktop and mobile during my UX track at Lambda School. I was later able to work on a team of 5 developers to create and deploy the application. My role as a front end developer was to duplicate the marketing page of my Figma prototype using HTML and CSS code.

Image of High Fidelity mock up of How-To marketing page — The marketing page of my High Fidelity prototype for the How-To app in Figma

Screenshot of Deployed How-To marketing page — Screenshot of the Deployed marketing page. You can find the deployed site here and the GitHub repository here.

Sleep Tracker

A web application that allows users to track the time they went to sleep and the time they woke up and their subsequent mood each day. The app will then recommend an ideal amount of sleep for the individual user!

The sleep tracker UX Design work was completed by Joseph Young, another UX developer at Lambda School. For this project, I worked as a React Developer with a team of two other developers. Along with implementing the registration and authentication for users, I used Styled Components to style the entire app based on Joseph's high fidelity mock-up.

Image of High Fidelity mock up of Sleep Tracker registration page — The registration page of the High Fidelity prototype for the Sleep Tracker app in Figma, by Joseph Young.

Screenshot of Deployed Sleep Tracker registration page — Screenshot of the Deployed registration page. You can find the deployed site here and the GitHub repository here.

This Portfolio!

I designed my UX Portfolio on Figma, and then used the design to guide my process of building a responsive website using HTML, CSS and LESS. I hope you have enjoyed this sample of my work.

If you are looking for a designer with development experience or a developer with an eye for UX, I would love to help you create user friendly interactions for your product!