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.
UX Research
People track the food they eat to keep track of calories and other metrics to help monitor their weight and other health goals. Since the pandemic started in March of last year, more people have been consistently cooking at home than ever. The currently existing digital products make it difficult to get an accurate count of metrics from recipes of food cooked at home.
I was interested in creating a product for adult home cooks who are trying to easily and accurately count macros and calories to reach a goal weight.
My task was to learn about how home cooks currently use digital tools to track the food they eat, and what goals they are trying to achieve with these products. Then, I needed to help brainstorm the features that would be most beneficial to potential users and help set our app apart.
After conducting interviews and surveys with real people who had used nutrition tracking apps in the past, I discovered that the current process for tracking food was not easy and often encouraged eating less healthy processed/ prepackaged food to get the most accurate information. This was frustrating to almost every user I talked with and the roadblocks to easily track home cooked meals is what often lead users to quit using these apps altogether.
“It often seems like these apps are pushing me towards eating out or processed foods just because it’s easier track. This seems counterintuitive to my overall goal of losing weight and being healthy”
Users wanted to use these apps to make sure their calorie intake for the day was in an acceptable weight loss range. They also wanted to be able to see tangible proof of their progress. But they wanted to do so using food that they had prepared
In aggregating the information I got from user interviews, I was really able to see what people did and did *not* like about similar apps. This allowed me to start brainstorming where we needed to set ourselves apart
The two features that I gathered would be the most important to potential users of the app were:
a way to track the correct nutritional information based off a recipe they used to prepare food themselves and
a way to make sure they were still on track with their targeted weight loss goal.
I did a lot of concept sketching to get the general idea and eventually came up with these mock ups of what those screens might look like.
Users want to use products like this, but they need the products to work for them. In running this research study I learned just how big the opportunity is for our company. When the majority of users are complaining about a lack of a feature in the market place, we should try to figure out how to make that feature a reality.
Ultimately the next steps for this app are to:
run a large scale survey to validate the findings
create a wireframe to begin outlining potential user flow
collaborate with the engineers to make sure they can code what our users have been dreaming up
Web Design: Adobe XD
To help round out my design skills, I took a course on how to design with Adobe XD. Below are some examples of projects I completed in that class!
A custom header with custom cards, designed to show a variety of different projects in a clear way.
On this page we learned how to make custom shapes to further organize information, and learned the art of the repeating grid in several forms.
A sample home page for a travel site, this project taught me how to create a clean blurred background for text and how to create an exciting menu in an intuitive, yet unexpected place.
Clean lines, typography, repeating grids, color theory, blurred backgrounds. This book store home page mock up was a culmination of everything I learned in the class!
Digital Marketing
As a project for a local, all-girls, Catholic school, I created some digital marketing pieces to help with school campaigns and advertising. These projects were created using a combination of Adobe Creative products and Canva.
This poster was designed for increasing virtual tours during the pandemic.
Punchy yellow helps catch attention
Gets across message of what/how/when
Graphic can be used across a variety of mediums
This quote graphic is part of a campaign to foster pride in the community
This graphic lays out a standard process for faculty members to call prospective students to increase admissions
Personalization is the best tool available to increase admissions, especially in pandemic times
Calling each student lets them know that they are a valued member of a community, not just a number
The script tells faculty members what to say, easing anxiety and making the process smoother!