overview

Everyday, thousands of students across the world are writing papers, working on projects, and working on school assignments.

eggcite is a website and mobile app designed to aid high school and college students with citing and organizing their sources.

Role & Responsibilities

UX researcher
UX designer
Visual design

August 2021 | three weeks

the problem

Currently, there are many online citation services available, however, online citation websites are overridden with too much unhelpful information, too many ads, and confusing formatting for students to navigate through, which are costing students too much time.

the solution

eggcite. eggcite is an online website and mobile app aiding high school and college students worldwide cite and organize their sources accurately and with ease.

see final design see process

kickoff ~

understanding the user

interviews |

Before jumping into designing any solutions, I had to figure out exactly what frustrations users had when using online citations websites.
‍
I created a survey using Google forms and asked a series of questions to get a general overview of who my users were and how they felt about the citation process as a whole.

πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users could not find Stephanie's home design portfolio
πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users did not like the inconsistent font style, size, and formatting
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned an overwhelming amount of information
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned the navigation bar was confusing

The most common key pain points I identified through conducting user research further assured my predicted assumptions of challenges users were facing while navigating through the website.

key pain points |

πŸ‘‰ Overwhelming amount of information
πŸ‘‰ Inconsistent design across website
causes confusion
πŸ‘‰ Information scattered across the website
πŸ‘‰ Portfolio is hard to access

key insights |

πŸ‘‰ Users want access to the most important
information Β (i.e. services, portfolio, contact
information, about, testimonials)
πŸ‘‰ Users want to view credentials in order to
establish SBS as credible

painpoints |

In order to get a better understanding of the root problems students were facing when citing their sources online, I conducted five user interviews.

User interviews allowed me to get into in-depth conversations with real students and understand their frustrations better. Here, I discovered that the main frustrations students were facing were dealing with saving time, saving their progress, viewing previous work, and organizing their citations.

meet adrian |

"As a busy undergraduate student, I want to save recent work and access it easily, so that I can jump from task to task without worrying about losing my progress."

defining our problem |

Adrian is a busy undergraduate student who needs a way to save and organize citations because he needs to access them easily when he leaves to complete other tasks.

mapping out our user journey |

Creating and constructing a user journey map revealed how helpful including additional features, such as an option to save and organize citations, would be to a student like Adrian

It also revealed improvement opportunities for accessibility for students who have limited mobility

competitive analysis |

IΒ looked into products in the market that offer similar services to students to see what they were doing well, what they weren't doing well, and to compare the different user experiences students had within these existing products.

I found that:‍

✨Easybib, CitationMachine, and bibme, were bombarded with ads and focused less on creating an easy citing experience for students.

✨None of the online citation sources offered a way for students to save their citations or organize them by assignment or category.

✨Easybib, CitationMachine, and bibme, offered various citations styles, while Scribbr only offered APA and MLA citation styles.

πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users could not find Stephanie's home design portfolio
πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users did not like the inconsistent font style, size, and formatting
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned an overwhelming amount of information
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned the navigation bar was confusing

The most common key pain points I identified through conducting user research further assured my predicted assumptions of challenges users were facing while navigating through the website.

key pain points |

πŸ‘‰ Overwhelming amount of information
πŸ‘‰ Inconsistent design across website
causes confusion
πŸ‘‰ Information scattered across the website
πŸ‘‰ Portfolio is hard to access

key insights |

πŸ‘‰ Users want access to the most important
information Β (i.e. services, portfolio, contact
information, about, testimonials)
πŸ‘‰ Users want to view credentials in order to
establish SBS as credible

ideation

paper wireframes, mockups, and prototypes |

Grabbing paper and pens, I was able to start ideating possible solutions. I used various ideating methods to begin brainstorming solutions, such as HMW's and Crazy Eights.

creating an intuitive and familiar process |

I approached user's needs by creating an intuitive process that was easy to follow. Citing sources consists of a series of steps. I wanted to ensure that navigating through that process was as simple and usable as possible

πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users could not find Stephanie's home design portfolio
πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users did not like the inconsistent font style, size, and formatting
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned an overwhelming amount of information
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned the navigation bar was confusing

The most common key pain points I identified through conducting user research further assured my predicted assumptions of challenges users were facing while navigating through the website.

key pain points |

πŸ‘‰ Overwhelming amount of information
πŸ‘‰ Inconsistent design across website
causes confusion
πŸ‘‰ Information scattered across the website
πŸ‘‰ Portfolio is hard to access

key insights |

πŸ‘‰ Users want access to the most important
information Β (i.e. services, portfolio, contact
information, about, testimonials)
πŸ‘‰ Users want to view credentials in order to
establish SBS as credible

recent citations |

One of the key frustrations users had was being able to save a citation and refer back to it later
‍
Adding a recents section allows students to access their citations for further editing and completion

organizing citations |

An easy way to organize citations was another pain point students, like Adrian, were facing.
‍
With a section for organizing citations, students can now add their completed citations to their corresponding assignment folder

Students may also add new assignments as needed

revisions after usability testing |

Revised wireframes after low-fidelity prototype testing:

After a series of usability testing using my low-fidelity prototype, it was revealed that some users were confused about the meaning of different icons in the navigation bar.

I decided this favorites feature was similar to the recents feature and opted to leave the favorites feature out.

"citations" was changed to "assignments" in order to clearly showcase to students the exact purpose of this feature

Students can choose to save and finish citations for future editing

Once a citation is completed, students can easily add it to the corresponding assignment and add a new assignment as needed, directly from the same screen

πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users could not find Stephanie's home design portfolio
πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | four out of five users did not like the inconsistent font style, size, and formatting
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned an overwhelming amount of information
πŸ‘€πŸ‘€πŸ‘€πŸ‘€πŸ‘€ | five out of five users mentioned the navigation bar was confusing

The most common key pain points I identified through conducting user research further assured my predicted assumptions of challenges users were facing while navigating through the website.

key pain points |

πŸ‘‰ Overwhelming amount of information
πŸ‘‰ Inconsistent design across website
causes confusion
πŸ‘‰ Information scattered across the website
πŸ‘‰ Portfolio is hard to access

key insights |

πŸ‘‰ Users want access to the most important
information Β (i.e. services, portfolio, contact
information, about, testimonials)
πŸ‘‰ Users want to view credentials in order to
establish SBS as credible

design system |

final screens and prototype |

After various iterations, usability testing, and focusing on the underlying UX, I created a high-fidelity prototype which reveals all the eggciting features available for students which include; viewing recent citations, saving citations for future editing, and organizing citations by assignment type.

measuring success |

Measuring success with an application like eggcite meant testing with students and interviewing them afterwards. When asking students their overall thoughts and feelings about using eggcite, this is what they had to say:

mobile to desktop adaptation |

eggcite isn't over yet! IΒ am currently working on creating a similar and smooth experience from mobile app to desktop platform. This project is constantly being updated with new information. Please check back soon to learn more!

what I learned (and still am learning) |

eggcite was a very interesting case study. Citing sources is a task I as a student am familiar with and have had my own share of frustrations with. It was exciting to work on a project that would be useful to a student like me, as well as students around the world.

Because eggcite was a brand new application concept, focusing on user research was vital to the entire process. User research and continuous usability testing revealed how the design process should move going forward, and brought about new insights throughout the process.

Some next steps I would consider are how to make the mobile app more accessible by including less touch points and making it a voice-controlled app. IΒ am also working on a desk-top version of the application as well. My next steps also include how to create a familiar cross-functional mobile app experience onto the website for students

Thank you for checking out my case-study and please feel free to let me know what you thought about it :)

‍

back to top
designed & built with <3
andrea maritza romero Β© 2021 all rights reserved