Rapid Prototyping: Internal Website
Through my network, I heard of an issue that a Fortune 100 company was having with the communications flow of an internal website.
Part of the group wanted the website to be a wealth of information for people in other departments about what this group was and how they could work together.
Part of the group wanted a database with all of the paperwork and information current employees of this group could possibly need.
I thought - why can’t it be both engaging and informative for those on the outside, and a helpful tool for the employees that needed it! So, on an informal basis, I got to work creating a wireframe of several web screens in the hopes that it might help solve the company’s problem.
The Home Page
The home page breaks down all of the key information for both current team members and people in other groups looking to know more. It gives a brief introduction and the mission of the group at the top, a scrolling menu of key customers they work with, and a brief break down of the numbers this team does annually.
Below that for anyone wanting to go more in depth or looking for more specific information, users could click into one of four relevant sections.
New Employee
This page makes it super simple for any new member of the group to get all of the paperwork they need to set up their day-to-day tasks, all they need to do is click that button and they’ll receive everything in zip file!
Resources
I wanted it to be as easy as possible for existing employees to find any documents they may need. I designed this page with a search bar for if they need to find something specific, as well as an organizational system by job type incase they need to do a bit of browsing first to find exactly what they need.
About Page
This page uses image cards and descriptions to help give outsiders more in depth information about who the key players in this group are and what all they are working to achieve.
I was able to present my prototype to this group’s communication director, and they are using it as the basis for the design of their new internal website! The design was being sent off to an engineer elsewhere in the company and is currently in production.
End to End Design
Udacity was considering opening a digitally enabled coffee shop experience. The company wanted students to be able to use this app to help place their orders, collaborate with other students, and facilitate a productive studying environment.
My task was to create and optimize the user flow for placing an order and receiving it with minimal disruption to their studying.
In interviewing several students about what they like in a coffee shop experience, I wanted to make sure the app was simple to use and intuitive for those who aren’t used to ordering coffee with an app.
Bottle necking at the pick up counter was a common complaint amongst the students, and pinpointing when their drink would be ready could help minimize the disruption in their studying.
I also wanted to equip it with a unique feature that would allow students to know when they could expect their order to be ready.
With a basic idea of what features I wanted to implement, I started to sketch some basic outlines of screen layouts. Then I turned the sketches into wireframes in Figma and started to map out the best flow.
By mapping out the colors, typography, and icons in a style guide, I was able to transform the wireframes into high fidelity prototype screens
After the screens are given some life, it’s time to make sure everyone could use them easily. I tested color contrast and changed color schemes, spacing, font sizes/boldness levels, and button sizes to make sure the app passed AAA accessibility guidelines
Making the screens look pretty is only half the battle! I turned the individual screens into a clickable prototype with a flow matching the mock up below. Then it was time to send the prototype into the world for a bit of usability testing.
I enlisted 10 different potential users to test the app out and put it through its paces. I asked each user to:
1. Add 2 items to the cart
2. Confirm the order
3. Pick up the order
In doing this I got some valuable information about the app. There were features that the users loved. They said the timer to when their drink was ready was cool, useful, and something they hadn’t really seen before. A total win for me!
But there was also a hole in my process that I needed to fix…
During my usability tests, I found that 60% of the users tested got confused when trying to add items to their cart. The original flow took users straight from the menu to the cart screen, and they were frustrated by the lack of transparency and choices in the navigation.
By adding in a new option where users could click further into a menu item to clarify the size or any additional flavors they may want in the drink before adding it to the cart, I was able to provide users with the clarity they craved and increased the success rate of the task to 100%
By making sure the flow made sense to actual potential users of the app, creating the style guide, and making sure the elements of the app are accessible to everyone - I can now hand off the design to the engineers to truly turn the order placing flow of the online coffee app into a reality. You can check out the full clickable prototype here.