SET Lab

UX/UI DESIGN AND VISUAL BRANDING  •  2023

Objective

Design a website and visual branding for Dr. Areen Alsaid, head of the new SET (Safe, Empathetic, Trustworthy) Technologies Lab at the University of Michigan-Dearborn.

The designs should help both technical and general audiences explore human factors research.

Timeline and Tools

This part-time project was completed in July and August of 2023.

Tools
• Figma (Wireframes)
• Adobe Illustrator (Logo Creation)
• Google Analytics (Website Analysis)
• Canva (Branding Guidelines)
• Framer (Web Development)

Design Process

I performed all research and design activities, allowing user and stakeholder feedback to guide my work.

I also developed and launched the final design in Framer after validating my decisions with end users.

Impact

The project was completed on schedule and under budget.

Deliverables
• Mobile Responsive Website
• 72 Social Media Templates
• Scalable Brand Guidelines
• Vectorized Logo

Budget Friendly without Aesthetic Compromises

• Developed within the constraints of Framer's free plan
• Optimized to support the lab's budget
Dashboard mockup

Built for Researchers and General Audiences

• Explore summaries of publications
• Read abstracts

Designed to Engage Users with Research

• Access free interactive web apps
• Browse SET Lab news updates

Supported by Playful Interactions

• Website sports an academic theme
• Animations resemble highlighters

Developed with Scalable Brand Guidelines

• Consistent colors and typography
• Vector logos for digital and print

Approach

An iterative human-centered approach was utilized to discover how to best simplify research for general audiences and strategically grow SET Lab's online presence.

Initial Thinking

Assumptions

  1. Target Audience: Researchers, university students, and prospective doctoral students
  2. Tech Savviness: Users visiting the website or social media pages have at least a basic level of internet proficiency
  3. Maintenance: A member of the lab will update the website and social media pages periodically
  4. Engagement: Visual content is more engaging than text-heavy pages

Constraints

  1. Budget: The project must be completed in 100 hours or less over a 2 month period
  2. Tools: Technical tools like Adobe Creative Cloud should be avoided for easier website and social media management

Defining What Success Looks Like

Discovery Phase: Stakeholder Talks

My first priority when beginning any new project is to establish clear expectations through open and honest communication. In my first meeting with Dr. Areen Alsaid, I asked several questions to clarify our goals for the project:

Strategy

• What do you want people to remember about your research?
• What audience do you want to connect with most?
• What is the tone and brand personality you want to convey?

Expectations

• Are you hoping to drive web traffic, increase followers, or something else?
• How frequently will the website and social media pages be updated, and by who?
• What tools should I use or avoid to best support your team in the future?

Primary Objectives

1. Discover general and technical audiences' goals and deliver a website that satisfies their needs

2. Establish consistent visual branding that reflects the professionalism of academia

Establishing a Brand Identity

I compiled logos and website designs from research labs and similar industry players. After presenting these designs and discussing their advantages and drawbacks, I sketched multiple logo concepts. We iterated the designs until our target audience felt a proposed logo matched the lab's research focus.

View Logo Inspiration

Vectorizing the Logo

Once we settled on a final design, I vectorized the logo using Adobe Illustrator so the design could be scaled digitally or on print without losing quality.

Implementing Brand Guidelines

Developing a Scalable Solution in Canva

Given the lab's website and social media would be maintained by different individuals of varying technical backgrounds, I knew brand guidelines were necessary for ensuring design consistency over time. I provided guidelines for colors, logos, wordmarks, typography, social media templates, and presentation slides in Canva for easy reference. Each slide links to its respective file, where blank templates can be accessed.

View Branding Guidelines

Reaching General Audiences

Social Media Templates

While researching other labs, I learned that social media is typically used to communicate research findings, announce participation in upcoming conferences or podcasts, and expand teams through hiring notices. Once I confirmed that SET Lab had the same goals, I developed 72 social media templates for LinkedIn and Twitter.

The designs, built in Canva, allow any individual to easily input text or graphics and publish directly to social platforms. Each template is configured using the lab's brand guidelines to ensure consistency between the website and social media.

View Templates

Building the Website

Understanding Users' Decisions: User Flows

I conducted open-ended interviews with several individuals of varying backgrounds to uncover how technical and general audiences want to use the website. I asked each individual what content they wanted to see, how they typically interact with academia (if at all), and how the landing page should be structured to best support their goals.

I learned researchers and students prefer to browse publications while less technical audiences favored bite-size news and social media posts to stay up to date with the lab's work.

I developed a flow chart to account for users' decisions and help plan the basic structure of the website:

Balancing Users' Goals: Sketches

I didn't want to jump into prototyping without iterating the initial building blocks of the website. After I completed each sketch, I showed multiple individuals my work, explained the lab's goals, and asked them to identify areas of improvement.

By the third iteration, we had landed on a basic outline that provided the breadth and depth needed to support both technical and general audiences' needs.

Design Sprint: Building Strategically and Affordably

With budget restrictions in mind, I opted to build the prototype in Framer, a website builder with a free plan that would allow me to advance to user testing within a week. I developed the basic structure in a day and allowed users to interact with the website, collecting their feedback for further revisions.

Validating the Design with Testing

After sharing the website with five individuals and receiving similar feedback, I polished the design for final testing. I explored whether the design clearly communicated the lab's research and asked participants to complete common tasks, such as identify papers' abstracts and locate the contact information for certain lab members.

With all known errors remedied, I shared the design with stakeholders for final tweaks. The website was launched in less than two weeks without costing the lab any additional funds.

Iterations

Interview Protocol

I spoke with 4 participants, who agreed to review the Figma prototype. I asked each to provide feedback on specific user flows, such as finding a species or browsing a collection, using think aloud protocol.

Results

The participants all agreed the prototype's interactive quiz and UI design were better than other leading encyclopedias. However, there were some questions about the placement and relevance of particular elements. I recorded these concerns and made the following reiterations:

Final Design

Live Website
Dashboard mockup

Lessons Learned

1. Designing Within Constraints: Anticipating Stakeholder Needs

Knowing this was a short-term project, my focus was developing designs others could maintain after I left my role. This meant taking the time to create brand guidelines and instructions for updating the website that could be shared among future lab members. The value of anticipating others' needs made for a more successful project.

2. Balancing User Needs: General and Technical Audiences

It was challenging to meet the needs of general audiences and technical researchers. By designing elements, such as the accordion that allowed users to read publications' abstracts without page redirects, we ensured our content was accessible to novices while still providing depth and detail for experts.

3. Organize, Organize, Organize!

Every layer and file was renamed to help future lab members easily manage the designs. Without this methodical approach, the website or social media templates could easily be viewed as a burden if lab members struggle to make basic edits. Providing helpful documentation ensured a clean handoff.

I appreciate your time!

To everyone who has ever read, critiqued, or shared my work - thank you.