Drexel CCI Web App Design Competition

Drexel CCI Web App Design Competition

Drexel CCI Web App Design Competition

Drexel University

Drexel University

(

(

2023

2023

)

)

A web-based system that allows users to search University Certificate Programs. First place winner out of 60+ submissions

A web-based system that allows users to search University Certificate Programs. First place winner out of 60+ submissions
A web-based system that allows users to search University Certificate Programs. First place winner out of 60+ submissions

Client

Client

Drexel University
Drexel University

Timeline

Timeline

1 month
1 month

Devices

Devices

Desktop, Tablet, Mobile
Desktop, Tablet, Mobile

Team

Team

Solo UI/UX Designer
Solo UI/UX Designer

Services

Services

UI/UX Design
UI/UX Design
,
,
UX Research
UX Research
,
,

The problem

The problem

Students pursuing higher education at Drexel face challenges in customizing their academic paths to align with their specific career and educational goals.

Currently, students lack an intuitive tool that allows them to explore and combine certificate programs into a master’s degree. This results in difficulty planning an academic route that offers both flexibility and clear guidance toward obtaining a full degree.

Students pursuing higher education at Drexel face challenges in customizing their academic paths to align with their specific career and educational goals.

Currently, students lack an intuitive tool that allows them to explore and combine certificate programs into a master’s degree. This results in difficulty planning an academic route that offers both flexibility and clear guidance toward obtaining a full degree.

The solution

The solution

Design a web app that allows students to seamlessly “mix and match” certificate programs, offering a clear visualization of possible master’s degrees they can achieve based on their selected combination of certificates.

The interface will be intuitive, enabling users to browse, view, and select certificate options. When three certificates are chosen, the tool will automatically display the master’s degree(s) available from the combination, providing flexibility and informed decision-making to students.

Design a web app that allows students to seamlessly “mix and match” certificate programs, offering a clear visualization of possible master’s degrees they can achieve based on their selected combination of certificates.

The interface will be intuitive, enabling users to browse, view, and select certificate options. When three certificates are chosen, the tool will automatically display the master’s degree(s) available from the combination, providing flexibility and informed decision-making to students.

Research

Research

Interviews

Interviews

At the discovery phase of my project, I conducted interviews with people between the ages of 21 and 35 who have the undergrad degree.


I asked respondents a few questions regarding their attitude to the admission process, then I let them use the current website and asked to try to choose the degree. After it, I asked about their overall impression and challenges they faced using the current site. I found patterns in users perceptions and tasks and aggregated my findings in the form of a persona.

At the discovery phase of my project, I conducted interviews with people between the ages of 21 and 35 who have the undergrad degree.


I asked respondents a few questions regarding their attitude to the admission process, then I let them use the current website and asked to try to choose the degree. After it, I asked about their overall impression and challenges they faced using the current site. I found patterns in users perceptions and tasks and aggregated my findings in the form of a persona.

Key Findings

Key Findings

Persona

Persona

Based on the interviews I set up a user persona. Anna (26) is a potential graduate student at Drexel University.


She's still poorly guided in programs, but needs to choose certificates for starting a master's program. I showed her background, motivations and pain points. It was also important to show her knowledge of technology needs. I referred to the persona throughout the entire product development process.

Based on the interviews I set up a user persona. Anna (26) is a potential graduate student at Drexel University.


She's still poorly guided in programs, but needs to choose certificates for starting a master's program. I showed her background, motivations and pain points. It was also important to show her knowledge of technology needs. I referred to the persona throughout the entire product development process.

Ideation

Ideation

Sketches

Sketches

After summarizing the information from the research, It was the time to sketching my ideas.


As it turns out from the interviews, the admission process could be stressful for many students, so I didn't want to frighten them with even more obscurity. Otherwise, it may seem a little frustrating for people who haven’t been acquainted with fancy solutions before. The goal for me was to create a clear and simple interface using familiar elements like tags, lists and progress bars. 

After summarizing the information from the research, It was the time to sketching my ideas.


As it turns out from the interviews, the admission process could be stressful for many students, so I didn't want to frighten them with even more obscurity. Otherwise, it may seem a little frustrating for people who haven’t been acquainted with fancy solutions before. The goal for me was to create a clear and simple interface using familiar elements like tags, lists and progress bars. 

Mid-Fidelity Wireframes

Mid-Fidelity Wireframes

I developed more detailed wireframes to conduct early testing and make informed adjustments based on user feedback.

Using Axure, I transformed initial sketches into a structured digital prototype for clearer visualization and interaction.

I developed more detailed wireframes to conduct early testing and make informed adjustments based on user feedback.

Using Axure, I transformed initial sketches into a structured digital prototype for clearer visualization and interaction.

Test

Test

User Testing

User Testing

Before proceeding with the high-fidelity design, I conducted user testing to identify potential usability issues.


I shared the wireframes, scenario, and tasks with a classmate and asked for her feedback through a series of targeted questions. Based on her responses, I gathered valuable insights and made design adjustments accordingly.

Before proceeding with the high-fidelity design, I conducted user testing to identify potential usability issues.


I shared the wireframes, scenario, and tasks with a classmate and asked for her feedback through a series of targeted questions. Based on her responses, I gathered valuable insights and made design adjustments accordingly.

Key Findings

Key Findings

These adjustments enhanced both the clarity and functionality of the interface before moving into the high-fidelity stage:


Positive Feedback: She appreciated the core concept and found the interface intuitive. The overall composition, design solutions, and tool functionality received positive reviews.

Improvements: The initial version lacked clarity in certain areas. I added a counter to display how many certificates the user had selected out of the required number and included a prerequisite warning under the degree options. Additionally, I implemented a slider to signal that each block of master's degrees is interactive and clickable.

These adjustments enhanced both the clarity and functionality of the interface before moving into the high-fidelity stage:


Positive Feedback: She appreciated the core concept and found the interface intuitive. The overall composition, design solutions, and tool functionality received positive reviews.

Improvements: The initial version lacked clarity in certain areas. I added a counter to display how many certificates the user had selected out of the required number and included a prerequisite warning under the degree options. Additionally, I implemented a slider to signal that each block of master's degrees is interactive and clickable.

Prototype

Prototype

Style Guide

Style Guide

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Prototype

Prototype

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Tags

Tags

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Responsive Layout

Responsive Layout

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

Balancing Neutrality with Strategic Accents for Clear Communication


  • I selected Helvetica for this project to emphasize its clean and neutral aesthetic. One of its key strengths is its ability to maintain simplicity without overwhelming the design.

  • For the color palette, I chose neutral blue tones as the primary colors, complemented by accents of green ash and bright fuchsia to highlight key elements and draw attention to important details.

What I learned

What I learned

This project taught me the importance of not being afraid of tight deadlines and working alone.


The competition gave me more self-confidence and inspired me to improve the presentation skills.

This project taught me the importance of not being afraid of tight deadlines and working alone.


The competition gave me more self-confidence and inspired me to improve the presentation skills.

/ What's next?
Now, when the design is approved, Drexel started to execute on the project. Once the app is fully interactive, it'd then be worth exploring additional features that would be possible to implement to our persona's needs.
Now, when the design is approved, Drexel started to execute on the project. Once the app is fully interactive, it'd then be worth exploring additional features that would be possible to implement to our persona's needs.
Now, when the design is approved, Drexel started to execute on the project. Once the app is fully interactive, it'd then be worth exploring additional features that would be possible to implement to our persona's needs.
My work has been featured by:

Let’s chat

Contact me today at egarafieva97@gmail.com, and let's start transforming your ideas into extraordinary digital experiences.

Site designed and built by Ellie Garafieva.

Copyright © 2024. All rights reserved.

My work has been featured by:

Let’s chat

Contact me today at egarafieva97@gmail.com, and let's start transforming your ideas into extraordinary digital experiences.

Site designed and built by Ellie Garafieva.

Copyright © 2024. All rights reserved.

My work has been featured by:

Let’s chat

Contact me today at egarafieva97@gmail.com, and let's start transforming your ideas into extraordinary digital experiences.

Site designed and built by Ellie Garafieva.

Copyright © 2024. All rights reserved.

My work has been featured by:
Let’s chat

Contact me today at egarafieva97@gmail.com, and let's start transforming your ideas into extraordinary digital experiences.

Site designed and built by Ellie Garafieva.

Copyright © 2024. All rights reserved.