Overview

DUKE OFFICE OF INFORMATION TECHNOLOGY INTERNSHIP

Duke Rewards App

Collaborators
Anni Chen, Felix Jiang, Kaila Lattimore, Ryan Middlemiss

Roles
Software Development,
UX/UI, Visual Design, Motion Graphics, Videography

Tools
XCode/Swift, Ruby on Rails, HTML/CSS, GIT, Figma, Adobe Illustrator, Adobe Premiere Pro

Timeframe
May - July 2020

OVERVIEW

Duke Rewards is an iOS mobile app linked to a university-affiliated rewards program that seeks to increase student attendance and engagement at campus-wide events, developed using XCode and Swift. Students attend events and verify their participation through our mobile app, using QR scanning and location tracking. An admin-only web app was built in conjunction for managerial purposes using Ruby on Rails, HTML and CSS. Our client stakeholders include Duke Athletics and Duke Dining.

ROLE

I worked on a team with four other interns and one mentor from Duke OIT as a UX designer and software developer. Throughout the 10-week internship, my role involved:

Consistently meeting with stakeholders to understand business needs
Daily stand-up meetings with the team to discuss our progress
Leading brainstorming sessions and advocating for human-centered design thinking
Creating Figma wireframes and high-fidelity visuals to design the app's user experience
Implementing designs in XCode and developing on front-end for the iOS mobile app
Developing on front-end and back-end for the web app using Ruby on Rails and HTML/CSS
Creating a user testing plan, conducting moderated user interviews and A/B testing
Filming and editing a video of the app demo

THE CHALLENGE

Due to the busy nature of Duke students' schedules, it is often difficult to increase student engagement at certain events on campus. Based on our stakeholder meeting with Duke Athletics and Duke Dining, we compiled our research and identified business goals.

How might we increase attendance and engagement at less popular athletic events by leveraging those with huge turnouts?

How might we improve the broadcasting and advertising of Duke Dining events to reach a larger student population?

JUMP TO FINAL SOLUTION

PROJECT TIMELINE: 10 WEEKS, 5 ROLES

Week 1-2
Ideation
Wireframing
Research

Week 7-8
Final UI Elements
Final Development

Week 3-4
Storyboarding
iOS Development
Web Development

Week 5-6
Visual Assets
Web/Mobile Integration
User Testing

Week 9-10
Videography
Animation Graphics
Final Video Editing

Ideation

IDEATION

Once we finished conducting user research, we started to brainstorm what the information architecture and sitemaps would look like for both the mobile and web app.

The information architecture / sitemap for the mobile app

The information architecture / sitemap for the web app

Wireframes

WIREFRAMES

The next step was for us to start wireframing in Figma to design the user interface of the mobile app. During this session, I engaged the team in the human-centered design process, and lead brainstorming sessions on how to center our design around user needs.

FINDING & ATTENDING AN EVENT

REDEEMING A REWARD

VIEWING THE RANKINGS

Sample medium-fidelity wireframes for our mobile app

Development

DEVELOPMENT

Due to time constraints, we decided on a minimum viable product (MVP) that could be completed, separate from the additional features that we hoped to implement given the time and resources. This meant that our focus was geared towards getting the most important user flows done, which were:

Allowing users to attend events, verify their attendance through a QR code, and enable location tracking to award them points based on how long they stay at the event
Allowing users to redeem points for rewards, with an email confirmation and a QR code verification

Iterations & Testing

ITERATIONS AND TESTING

Around week 8 of the internship, we had enough of a solid prototype working that I suggested we do some user testing. Since most of my team was unfamiliar with how user testing works, I took the lead in drafting up some questions for moderated user interviews and A/B testing, but encouraged input from all of my teammates, and guided them through the process. Each of us conducted around 1-3 user interviews, so that we were able to reach a broader audience, and compiled our findings after. We conducted different user interviews for admins and general users of the app to get insight on both sides of our app.

Based on our findings, we made several changes to our app design.

01

Users had trouble understanding the relation between scanning a QR code and attending our event, as well as the two-currency system, so we modified our onboarding process to break down these steps, while minimizing the amount of text on one screen.

02

Users were also unsure what the points label at the top was so we modified the points icon and added a quick tutorial that also assisted users with general tips for using the app.

Alternative option that was later discarded due to the small icon size:

03

To better suit Duke branding guidelines, we also decided to follow the typically Duke colors in our design, rather than the original color palette that we chose.

PRIMARY COLORS

BACKGROUND COLORS

04

Other changes included adding more options to our filter and sort dropdown lists, implementing continuous search for the search bar, as well as sending out an automatic email receipt once a reward is redeemed.

Final Solution

FINAL SOLUTION

App demo video, edited using Adobe Premiere Pro

Our solution was to create a mobile app and integrate it with a rewards program that Duke Athletics and Duke Dining were willing to sponsor. Through the app, users would be able to:

Log in through the Duke Authentication process for student/admin verification
View a list of events and rewards that stakeholders would input from our admin web app, with the corresponding time, location, description, category, and points worth
Confirm student attendance at events by scanning a QR code, then allowing location services to track their length of stay at the event and award them with points accordingly
Earn points that could later be redeemed for experiential rewards, as our stakeholders wanted to steer away from monetary rewards
Socialize with other users by engaging in friendly competition through the leaderboard
Analyze their personal and general student attendance at campus events by looking at the distribution of points based on category breakdowns
Personalize their user profile by changing their profile image, username, email, and password

Additionally, stakeholders needed a web app API to input data, so our design involves:

Following a model-view-controller (MVC) structure for the app implementation
Integration with other APIs that the stakeholders are already familiar with to make the conversion process as frictionless as possible
Integration with Duke Authentication to ensure administrative access only
Minimalist, easy-to-use user interface that follows Duke brand guidelines

Impact & Takeaways

IMPACT

Our app is currently being delivered for beta testing. All of our stakeholders have said on multiple occasions that they are highly invested in this app and are more than satisfied with our product.

TAKEAWAYS

Take Advantage of the Situation at Hand
Going through this experience remotely from a timezone that is 12 hours ahead of all my other teammates, I learned how to take advantage of the situation at hand by focusing on the positives: 24/7 app development, significantly less merge conflicts, and pajamas on call! Not only did we make up for the disadvantages of a remote experience, we also catered our development workflow to better adapt to the situation.

Advocating for the User Perspective is Key
Having mostly worked individually or on design teams prior to this experience, I did not realize the importance of advocating for the user perspective until I had to work with teammates who were not as familiar with UX concepts. While my teammates were very open to my design suggestions, I had to back up any design-related ideas with reasons why it would be worth the time and effort to do so, as well as why it would benefit our app as a whole.

What Makes a Strong Team
Reflecting on our team dynamics, I realized that our product's success was primarily due to our ability to delegate tasks well through clear communication, stay open and welcoming to new ideas or perspectives, and take initiative with implementing tasks, especially those that seem challenging.

DUKE OFFICE OF INFORMATION TECHNOLOGY INTERNSHIP

Duke Rewards App

Collaborators Anni Chen, Felix Jiang, Kaila Lattimore, Ryan Middlemiss Roles Software Development, UX/UI, Visual Design, Motion Graphics, Videography Tools XCode/Swift, Ruby on Rails, HTML/CSS, GIT, Figma, Adobe Illustrator, Adobe Premiere Pro Timeframe May - July 2020

OVERVIEW

ROLE

I worked on a team with four other interns and one mentor from Duke OIT as a UX designer and software developer. Throughout the 10-week internship, my role involved:

Consistently meeting with stakeholders to understand business needs

Daily stand-up meetings with the team to discuss our progress

Leading brainstorming sessions and advocating for human-centered design thinking

Creating Figma wireframes and high-fidelity visuals to design the app's user experience

Implementing designs in XCode and developing on front-end for the iOS mobile app

Developing on front-end and back-end for the web app using Ruby on Rails and HTML/CSS

Creating a user testing plan, conducting moderated user interviews and A/B testing

Filming and editing a video of the app demo

THE CHALLENGE

PROJECT TIMELINE: 10 WEEKS, 5 ROLES

Week 1-2 Ideation Wireframing Research

Week 7-8 Final UI Elements Final Development

Week 3-4 Storyboarding iOS Development Web Development

Week 5-6 Visual Assets​ Web/Mobile Integration User Testing

Week 9-10 Videography Animation Graphics Final Video Editing

IDEATION

Once we finished conducting user research, we started to brainstorm what the information architecture and sitemaps would look like for both the mobile and web app.

The information architecture / sitemap for the mobile app

The information architecture / sitemap for the web app

WIREFRAMES

The next step was for us to start wireframing in Figma to design the user interface of the mobile app. During this session, I engaged the team in the human-centered design process, and lead brainstorming sessions on how to center our design around user needs.

FINDING & ATTENDING AN EVENT

REDEEMING A REWARD

VIEWING THE RANKINGS

Sample medium-fidelity wireframes for our mobile app

DEVELOPMENT

Due to time constraints, we decided on a minimum viable product (MVP) that could be completed, separate from the additional features that we hoped to implement given the time and resources. This meant that our focus was geared towards getting the most important user flows done, which were:

Allowing users to attend events, verify their attendance through a QR code, and enable location tracking to award them points based on how long they stay at the event

Allowing users to redeem points for rewards, with an email confirmation and a QR code verification

ITERATIONS AND TESTING

01

​Users had trouble understanding the relation between scanning a QR code and attending our event, as well as the two-currency system, so we modified our onboarding process to break down these steps, while minimizing the amount of text on one screen.

02

Users were also unsure what the points label at the top was so we modified the points icon and added a quick tutorial that also assisted users with general tips for using the app.

Alternative option that was later discarded due to the small icon size:

03

To better suit Duke branding guidelines, we also decided to follow the typically Duke colors in our design, rather than the original color palette that we chose.

PRIMARY COLORS

BACKGROUND COLORS

04

Other changes included adding more options to our filter and sort dropdown lists, implementing continuous search for the search bar, as well as sending out an automatic email receipt once a reward is redeemed.

FINAL SOLUTION

App demo video, edited using Adobe Premiere Pro

Our solution was to create a mobile app and integrate it with a rewards program that Duke Athletics and Duke Dining were willing to sponsor. Through the app, users would be able to:

Log in through the Duke Authentication process for student/admin verification

View a list of events and rewards that stakeholders would input from our admin web app, with the corresponding time, location, description, category, and points worth

Confirm student attendance at events by scanning a QR code, then allowing location services to track their length of stay at the event and award them with points accordingly

Earn points that could later be redeemed for experiential rewards, as our stakeholders wanted to steer away from monetary rewards

Socialize with other users by engaging in friendly competition through the leaderboard

Analyze their personal and general student attendance at campus events by looking at the distribution of points based on category breakdowns

Personalize their user profile by changing their profile image, username, email, and password

​​

Additionally, stakeholders needed a web app API to input data, so our design involves:

Following a model-view-controller (MVC) structure for the app implementation

Integration with other APIs that the stakeholders are already familiar with to make the conversion process as frictionless as possible

Integration with Duke Authentication to ensure administrative access only

Minimalist, easy-to-use user interface that follows Duke brand guidelines

IMPACT

Our app is currently being delivered for beta testing. All of our stakeholders have said on multiple occasions that they are highly invested in this app and are more than satisfied with our product.

TAKEAWAYS

Thanks for reading!

Work

View my case studies

Duke Rewards

Edusphere

Oishi Mimic Screens

Ideate Designathon

Collaborators
Anni Chen, Felix Jiang, Kaila Lattimore, Ryan Middlemiss

Roles
Software Development,
UX/UI, Visual Design, Motion Graphics, Videography

Tools
XCode/Swift, Ruby on Rails, HTML/CSS, GIT, Figma, Adobe Illustrator, Adobe Premiere Pro

Timeframe
May - July 2020

Week 1-2
Ideation
Wireframing
Research

Week 7-8
Final UI Elements
Final Development

Week 3-4
Storyboarding
iOS Development
Web Development

Week 5-6
Visual Assets
Web/Mobile Integration
User Testing

Week 9-10
Videography
Animation Graphics
Final Video Editing

Users had trouble understanding the relation between scanning a QR code and attending our event, as well as the two-currency system, so we modified our onboarding process to break down these steps, while minimizing the amount of text on one screen.