Table of Contents:

  • Vocab Prep UX Design

  • 24/7 Experts UX Design

______________________________________________________________________________________________________________

Vocab Prep

Vocab Prep was the very first UX project I have ever worked on. It was a short prototype project that was a vocabulary app for learning. I added two features on the app that are on the prototype. The first feature is how to start a vocab game on the app, and the second being how to create a deck & add vocab on the app.

Note: this project is more focused on the UX than the UI.

One of the very first things I did beginning the project, I made a competitive analysis, followed up with doing user research & interviews after with 3 participants in person.

Interview questions:

  1. Tell me about yourself. What’s your name, age, occupation, are you a student, where are you from?
  2. What does your day usually consist of?
  3. Do you study & how do you find time to study?
  4. How do you study & what is the best way for you to study?
  5. Do you use an app to study sometimes?
  6. What has been the most challenging part when it comes to studying?
  7. What can make studying easier for you? 

After interviewing my 3 participants, I learned the way they were thinking, feeling & doing during the interview process.

My first participant’s results:

Thinking – 

I believe that learning vocabulary is not so difficult. All I need are flashcards & I’m good. I think that it is great that there are different ways of learning vocabulary now. It would be more beneficial for my kids to use the internet & apps than me. 

Feeling –  

I feel like learning is easy for me. I don’t struggle to learn vocab at all. I feel like my kids need studying peers maybe online or some fun ways to study online. 

Doing – 

I am a financial planner with a wife & 3 kids. There are many additional certifications you can get to show your value to companies. I took out the time a few years ago to study hard & use physical flashcards & sometimes would get my wife to test me on them when I feel like I want a challenge. For my kids, I would want them to have fun studying. It’s difficult sometimes needing to sit down with my kids 24/7 studying with them. There should be some fun apps for kids to study on that are interactive. 

My second participant’s results:

Thinking – 

I believe that studying with peers & collaborating together makes it easier to study

Feeling – 

I feel annoyed sometimes when I can’t remember a definition or word. 

I feel like having apps with a variety of ways to studying would be easier.

I also feel like having more apps that would have people from all over the world to do collaborative work with could be more fun too & easy too. 

Doing – 

I am a college student, I take notes & will look back at them & have my friends quiz me or play little online games with me to make it more fun. I enjoy going into study groups. I am in need of more people to help me study when my friends are not available to. 

My third participant’s results:

Thinking – 

I believe learning vocabulary on the internet is a much more fun way of learning. You can be very creative with it. 

Feeling –

I feel like I can get frustrated easily when I can’t study on apps due to how they are made & set up. I feel like it’s hard for me to study when I don’t have a whole lot of different ways to study. I like a variety of ways to study. I lose attention off of studying when I get bored of it. I like visuals as well, I feel like if there were more pictures in some apps I could be more interested. 

Doing – 

I am an artist, & I am a visual learner. I struggle sometimes to learn if I don’t see things or ways of learning. Or even see pictures of what I am learning to better understand it. I am learning a lot of new vocab in my classes about music that I have never heard or learned of before. I need help studying these visually. 

After knowing how our participants were thinking, feeling & doing, we believe that by executing a fun experience for users to learn vocabulary, & to execute having a nice, appealing, clean slate on the app for users, we will achieve having more users that work better with simplicity & entertainment with improved results in learning.

Information Architecture

After gathering all the information & data based on the user research, interviews & personas, this lead me to creating the IA & sitemap for the navigation of the app. Creating the navigation sitemap helps structure out the layout & how it will function.

Wireframing & Prototyping

Here, I started sketching out the wireframes while having my flows sorted out & knowing how the app is going to navigate. I wanted it to be a simple process with not many different pages/screens to achieve tasks.

Usability Testing

One of the very last steps to finalized this project was usability testing & gathering feedback after I did the wireframing & prototyping. I tested the Vocab Prep app, & this app has vocab studying games for people that need a more fun way of studying & that can help them prep for possibly their next vocab test if so. The scope is in 2 user flows, how to access playing vocab games on the app & how to exit or end the game, & how to add vocab. After the testing I then developed the usability test report & here were the metrics, direct tasks & results.

Metrics: 

0 = I don’t agree that this is a usability problem at all 

1 = Cosmetic problem only: need not be fixed unless extra time is available on project 

2 = Minor usability problem: fixing this should be given low priority 

3 = Major usability problem: important to fix, so should be given high priority

4 = Usability catastrophe: imperative to fix this before product can be released

Final Product

After going through all the usability testing & gathering feedback from users, it seemed that the users were happy with the prototype & did not have any problems or complications with it. Here is the prototype of Vocab Prep.

______________________________________________________________________________________________________________

24/7 Experts

24/7 Experts is an app for users that have a question that they may not be able to find the answer to & would like to get the accurate information on & accurate answer by a specialist virtually. This app has features from where you can search up questions & answers that have been asked by other users & answered by experts. It has a feature where you can search up a specialist online in any industry that you can ask a question, & a feature where you can chat with experts. ​​​​​​


Note: this project is more focused on the UX than the UI.

Our users will need a user friendly experience that will hold a purpose. Users need an app that they can use whenever they have a question or need an answer to something as soon as possible, whenever & wherever they are, no matter the field. Having answers from experts be relevant, true, & helpful because users are not able to either look up answers, do research, or are able to reach people from certain industries & various of fields, as well as wanting or needing to know the answer to something now. Will we need to have this Expert app provide accurate responses & answers from our experts on the app from any field you can think of that will be answered right then & there for users if needed. With experts that are either certified, licensed, or have a degree. The app will have a simple & clean interface making it easy for user to access. 

User Research

Research Goals: 


I want to know if the potential users like the purpose & idea of the app, what features would users find helpful or would like in regards of the app & how this app can be beneficial for users based on their wants, needs & goals.

Affinity Map: 

Insights: 


– Users want the app to filter down the question(s) they have so it would know what users are talking about & what they mean & have it narrow down the topics.


– Users want the app to have answers that are relevant to the question being asked.


– Users don’t want to pay experts in advance. 


– Have secure payment by having a tag with granted by financial service so merchants don’t have the users banking info. 


– Users do not want answers to biased but to be accurate. 


– Users want a simple & easy navigation & design of the app. 


– Users want a review & bio feature for the experts so they can pick out what expert they want. 


– Users want topics to be organized so searching things will be easier.

User Personas & Journeys


After my User Research, I then create user personas to help me understand from a users point of view so this will give me an idea of the users that I will be designing for. User personas & journeys help me understand users better so that way I can make this app have the best experience. So with all of this information & data I collected, this helped me figure out how the navigation & design should be set up. 

Navigation Sitemap


After gathering all the information & data based on the user personas, this then leads me to creating my sitemap to figuring out the navigation of the app. The navigation is very important because this will determine how everything will function & how all of it flows. Before setting up the sitemap, I conducted a card sort of 4 categories with 19 cards to see how most users would think as to where every feature would be on the menu navigation, figuring out where they would each belong. 

Low Fidelity Paper & Sketches

After developing the sitemap, this is when I begin to figure out the layout of the app by drawing wireframes. Sketching out the design layout helped me get an idea of how I could see the design of the app. I knew all of the sketches would only be the first rough draft of the layout, because there is so much that can be done digitally as I start designing. Also, more and better ideas come with time throughout this whole designing process.

Mid-Fidelity Prototype

After doing the sketches as my vert first rough draft, I created the flow on Balsamiq, now there is a better visual of the design. I have created 3 of the main features of the app into mid-fidelity prototypes translated from my low-fidelity prototypes. Then I may begin testing the design with users then refine the design with its main features.

My main features are: 

  1. Choose an Industry & Expert 
  2. Search for Q&A
  3. Chat & Pay an Expert

Usability Testing

Six usability tests were conducted. Each session was held for about 10-15 minutes & had a usability test plan & script. These sessions were done remotely moderated. To test the prototype, the prototype the shared from Figma. All of these tests were done on a mobile device. Participants doing a remotely moderated test will share their screen via Zoom. Each session is recorded. After conducting all the usability tests, I have received a lot of feedback & input so far on the design. All of this information from the participants that I have received has better helped me understand what it takes for me to improve on this app for users. A lot of the users found the navigation & layout very simple & easy to use. Although, there were a few errors, complications & things that needed to be resolved, I have found the solution to them already. Usability testing really helped me figure out more of the needs & goals of potential users. 

With the previous mid-fidelity as seen before in grey-scale, I made some revisions to it for users to interact with the prototype for the usability testing. People are more visual so colors & images can make people feel a certain way so I wanted to incorporate some color in the app as they tested the mid-fidelity prototype. Adding color & images also helps me figure out what colors I think would fit best for the app & helps me figure out what layout idea would be best as well.

High-Fidelity Prototype

24/7 Expert’s greyscale prototype helped me get the idea of the flow for the app’s navigation, as well as giving me an idea of what the potential wants & needs would be for users. With the higher-fidelity iteration, I cleaned the design up a lot more & made it look more simple & modern. After the usability testing & coming up with solutions for the issues the users had with the design, I then moved onto creating the high-fidelity wireframes so that way I can do a little more testing on it before I begin the next few steps for the final design. After the final testing I will then work on making sure that the app has great accessibility & readability for all.

Refining The Design – Style Guide

With every iteration, came me getting happier with the visual aesthetic of the design. I decided to go to with a simple color palette with a pop of color. With the pop of color that I chose, I made that the main color for the overall app. For example having the navigation menu be in purple if a user is on that page, or having buttons be purple as well.

I also designed for accessibility. With the design regarding accessibility, includes contrast between text & background, I made form fields, labels & placeholders accessible for users, & also designed accessibility for users with motor impairments.

There is a contrast with colors & the background making it easily visible for users to go through with using the app. Such as the colors of the contained buttons being purple. Using a good text size for users to read & having the contrast of the font color from the background so users can see. 

UI elements are the main building blocks for all applications. They are responsible for interactions between the user and the application. They are what allows for effective user navigation and input/output data, to name but just two core functionalities.

Final Product

For this high fidelity design iteration, we went through one last test to gather feedback from other designers. After collecting all the feedback, I went up & cleaned up & finalized every screen of the app & created this as the final prototype.

Prototype Link: Click here