Category: ux

Creating Wireframes

I’ve always had a special place in my heart for creating things. Just ask my husband about my craft “corner” that’s really sprawled across our whole house.

One really cool part of creating things, is the idea phase. Last fall, while still working in HR, I was building our benefits enrollment training program. I had this awesome idea to create a game where we would take employees through the Game Of Life to select their benefits for the following year.

I started to draw my ideas out on the whiteboard.

Things just took off from there and out came a very simple game to make the benefits enrollment process a bit more interesting.

What does that have to do with wire framing? Well that’s exactly what I did.

I quickly sketched out boxes and labels and defined the path our users would take while going through the game.

Here’s what it looked like:

Wireframe for Game Of Life Benefit Enrollments

Playing With A New Toy – Figma

I felt a bit spoiled during my internship because I was using a mac as part of my development setup. This also allowed me to try Sketch for a bit. As the internship wrapped up though, and I returned to my Chromebook, I felt frustrated that I didn’t have a design tool that was comparable to Sketch or Adobe Suite.

Refusing to accept that I couldn’t get into web design simply because I didn’t have a mac, eventually I came across Figma.

What a super fun tool!

It’s completely web based so I didn’t have to download anything and I could create a team (if I had one) so that we could all collaborate projects with the most up-to-date information.

I’m sure this also shows just how much of a newbie I am, but I thought it was so cool to see the design I made and what it would look like on an iPhone8. You can also take a look at Project Coffee, the project in which I was building a mock-up.

While building my mock up, I wanted to use a component I saw in a training video. It was the top bar of the iPhone that shows the battery, date time etc. I did a quick search and found an iOS tool kit! Ahhh! It had all the components for Apple products I could possibly need for a mock up.

And it appears that I’ll be able to use my mock-up and convert it to React when I’m ready.

It will be fun to learn more about vector images and see what else I can do. But for now I’m blown away at the prototyping and the ability to share and receive feedback. Well done!