Design Challenge #23
Design Challenge #23 in the books kids! In this design challenge we revisited an old app we made a while back in school. This app was called biblio and the case study can be found in the top navigation. The challenge was to create info cards. I used this to create the mentor bios for the app. I am waiting on getting confirmation from my career coach but ultimately, what I would like to do is create the biblio app so that it is not on invision but is made through figma. Anyway… that is a side thought… let’s focus on the design challenge at hand.
I went into my old invision and sketch files and found the layout of the find a mentor section and remade it in figma (well really just the part where you select the mentor to see their bio before you set them as a mentor or chat with them). I used the following plugins in figma to help me out with the avatars, the icons and of course the spelling (iconify, Avatars, Spelll). Now onto the good stuff… The actual stuff that, I am hoping, you are here to see.
I, at first, laid out the phone interface and then moved onto creating the logo using just plain text and a circle with a brain icon. Once that was done, I moved onto creating the avatars and laying out where everything was going to be. Next I went with the color from the original layout (not to sure about the orange… I might change it to something more soothing) and created the header and footer. Finally moved onto the next pages and laid out each of the mentors bios with social icons.
After that I linked up and prototyped each clickable area on the main screen to show the bios and social icon layout for each teacher. Once those were all linked up and laid out I just had to add a back button on each bio screen and I was done.
Play with My Figma Prototype
Check out the prototype above and don’t be shy. Reach out to me on linkedin.com. I am always up for some discussion or help if I can.