Capstone: How to Design a User Interface (a reflection)

Nov 13

For my year-long capstone project, I am working with the University Information Technology Services (UITS) to develop useful and exciting technologies for Indiana University (IU).

A key initiative for UITS is the development of the IU Mobile app. This native app provides information for thousands of students, and there is a huge opportunity to build more functionality.

There’s only one problem. Up until this point, my experience with visual design has mostly involved print materials for marketing. Designing for digital interfaces is new territory to me. Along with three other members also working with UITS, I wanted the opportunity to try designing a user interface. So, we decided to help UITS on an important project. Our task was to design iPhone widgets to support the Kuali Time feature currently being built for the IU Mobile app. Kuali Time is the university’s employee timekeeping system.

Based on user interviews, I discovered that employees often forget to log out of Kuali Time after signing into the system. I wanted my widgets to convey information and visual cues so employees can manage their time better.

Over the last 6 weeks, I reflected on my progress completing this project. As my design iterations improved week after week, I grew my abilities and competency as a designer. I want to share 6 lessons from my first time designing a user interface for a client.

Consistency

Week 1: September 28 to October 2

Shown here are my first attempts at designing widgets for Kuali Time.

The design on the left is for a “clocked in” state while the design on the right is for a “clocked out” state. If you think these look ugly… you’re right they are ugly. OOF!

To be honest, I had no idea what I was doing. And that’s okay. With design, the only wrong thing to do is to do nothing. So, I played around with different concepts and experimented with different styles. When I showed this to my teammates, they very nicely pointed out the lack of consistency. I had unintentionally mixed three design styles together. In the design world, this is a big no-no. Blending styles together is confusing and frankly not very attractive. I realized I couldn’t just do whatever I wanted; I had to be consistent.

Practice

Week 2: October 5 to 9

They say practice makes perfect, but that’s a line of bull. Nobody’s ever perfect, and there’s no such thing as a perfect design. What does “perfect” even mean?

Practice makes improvement. I’ll never be perfect, but I can get better. So what did I do? I practiced!

I re-designed my widgets using three alternative design styles.

The first style shown here is called flat design, the second style is called neumorphism, and the third style uses a gradient. I knew UITS wasn’t going to use all three, but I wanted to practice designing with consistent styles.

If you’re interested in learning more about the different kinds of design styles and their history, I recommend reading this article. You can also check out this article, by Michal Malewicz, on an emerging style called neumorphism.

Development

Week 3: October 12 to 16

After receiving feedback on my previous designs, it was clear the flat style was ideal. Even after just two weeks, I already felt like I was learning a lot about designing for digital interfaces. However, there was an important piece missing from our process: the people who would eventually develop our designs.

Our designs are prototypes - they simply represent the look of what a design can be. Once UITS is satisfied with our design, we will hand it off to the developers who will code the functional product.

From a designer’s perspective, it’s important to communicate with developers so we can avoid misunderstandings of what we can and can’t do.

Our team was starting to design larger-sized widgets with more functionality. Shown here is a large-sized widget I designed using the flat style. We had a talk with the VP of Information Technology who is in charge of building the API (Application Programming Interface) for Kuali Time. He helped us better understand which information would be feasible to build from a developer’s point of view.

As it turns out, creating the time ring would be a challenge to make because there are a lot of employees with different time limits. The weekly time chart would be fairly simple to build, and we confirmed that we were allowed to display the full assignment name. He also suggested we follow the standards of Apple guidelines, add more context to the information displayed, and appeal to IU’s branding more prominently.

Intentionality

Week 4: October 19 to 23

After meeting with the developer, I set out to apply his feedback. I designed the widgets shown above which include more context, IU branding, and a dark mode. My widgets were finally ready… or so I thought.

After presenting my designs to UITS and other classmates, I realized there were small details I hadn’t considered. For instance…

The icons aren’t clear. One person thought it looked like a loading icon and didn’t understand what the lock represented.
The blue box might confuse people into thinking it’s a button.
The text is not consistently aligned and lacks contrast.

It became apparent I hadn’t asked myself why I made these design decisions. To create a design, nothing can be taken for granted. The devil is in the details. Every detail in design needs intention because every detail in design matters.

For a great resource on designing user interfaces, check out this book by Adam Wathan and Steve Schoger.

Accessibility

Week 5: October 26th to October 30th

For my next iteration shown here, I created new icons, aligned the text, removed the Kuali Time name, and added colored backgrounds.

It looks better, but there’s one issue.

By adding vivid background colors, I made the visual cues more apparent. However, the UITS team pointed out that these backgrounds would be difficult to distinguish for someone who’s colorblind.

This is especially true for my large-sized widget. On the bar chart shown here, the blue lines could blend into the background for someone who’s colorblind because there’s not enough color contrast.

I’m glad that accessibility is a top priority for UITS. I think we are beginning to see the design community embrace accessibility as an expectation and not just as a nice thing to have. Now, I understand that accessibility takes awareness and commitment. I recommend reading this blog post by Unma Desai. It explains the impact of color choices on the game Among Us and it gives examples of the different forms of colorblindness.

Inspiration

Week 6: November 2 to 6

After 6 weeks, I’m happy to reveal my final design for the Kuali Time widgets.

My final design includes each size of the widget and its dark mode alternative. I have changed the colors so that it is more accessible to people who are colorblind.

The UITS team has been impressed with the widgets me and my other teammates designed. Their plan is to start building the widgets once the API’s are ready.

So what’s my final takeaway?

How did I get from the abomination of my first attempt (on the left) to this acceptable design (on the right)?

What rings true throughout my entire process is that I didn’t do it alone. Each week, I was thankful for the support and guidance given by the experienced UITS team. I want to acknowledge the teammates who worked on this project with me. Together, we shared ideas and gave feedback on our designs. Kaustubha taught me how to apply gradients and keep designs consistent. Nan gave me inspiration for the time detail style and icon illustrations. Jeena made me aware of the importance of accessibility and representation in tech.

Growth happens together. Design takes a willingness to fail, but more importantly it takes a willingness to learn from others. I’m lucky I had other designers on this project who inspired me to become a better designer.

This project was a success because I learned so much on how to design a user interface. I hope you learned something too!

Next semester, I look forward to applying these lessons to help UITS develop solutions for student engagement. I hope the next stage in my capstone will be just as rewarding as the first.