Sophie

Loesberg

Experience Designer & Strategist with 4+ years of experience & an insatiable wanderlust for adventure and creativity.

Currently crafting customer experiences @ PwC's Experience Center

Inspiring the nation's youth to go above and beyond for others

Empowering you to care for the ones you care about most

Helping women feel more in control of their bodies

Enhancing off-roading vehicle education for Polaris digital retail experiences

Connecting everyday people to personalized experiences

eventric

Timeline:
5 Weeks

Role:
Digital Product Designer & Product Manager

Skills:
UI/UX Design, Graphic Design, Sketching, Empathy Mapping, Focus Groups, User Personas, Wireframing, Prototyping, Usability Testing, Figma, Adobe Photoshop, Adobe Illustrator, Pivotal Tracker

//The Problem

Users who visit new cities and places have difficulty finding recreational activities that fit their specific restrictions.

//The Solution

The solution is a central platform for all types of users to find events and try new activities with friends. With the ability to filter, users can find new activities to enjoy that fit their limitations or restrictions.

//focus group

To establish an understanding and consensus on user needs, I conducted a focus group among my peers to gain an understanding of their past event searching experiences. After hearing the input of my peers, I was able to gather positive responses to a central platform that users can filter and search through to find events that fit interests. Many frustrations and pain points my peers pointed out was the lack of a central location to find activities to do. Users of all ages and demographics want to find enjoyable activities to partake in and have difficulty searching for them.

//empathy mapping

To take a comprehensive look into the pain points and challenges users face when searching for events, I created an empathy map for my primary user to encompass their thoughts, feelings, and desires when going through this process.

//Persona Development

I established a primary, secondary, and supplemental user for this interface. My primary user is a young student intern who has specifications for the events that she would like to attend. My secondary user is a middle-aged couple with grown children who want to find new and engaging activities to do with friends on the weekends. My supplemental user is a music venue that wants to generate business for their concerts and festivals.

//Brainstorm

From brainstorming, some key takeaways included:
• Filters for students to indicate specifications before browsing profiles
• Matching through quiz to find compatibility and lifestyle similarities
• Messaging feature for user to reach out to potential roommates

//Action mapping & infrastructure

With all of these insights collected on user needs and challenges, I began to develop how a solution would result in a digital space. Through prototyping, sketches, and relative frameworks, I was able to gather a look into how users would interact with the app.

//wireframes

After narrowing down the priorities for the app, I decided on the key features to address the user problem.

1. Preference Selection
To provide users with the functionality and ability to search through recommended events, they must provide at least three preferences to narrow the results. This helps users find events that directly correlate to their specifications.

2. Recommendations
With the ability to search through recommended events, the user can select and examine their matches based on recommendations and viewing details.

3. Search
With the search feature, the user can use a one-step process to directly find an event that fits their specifications.

4. Save Events
With a save events feature, the user can easily browse through events and look through ones of interest at a later time for reference.

//design evolution

I decided to create three different iterations of the browse screen. Since this is where the user will be searching through matches and spending the majority of their time, I wanted to ensure the design was productive and efficient.

1. Grid

2. Carousel

3. List

I mocked up the flow between the login screen, beginning with the onboarding and selecting preferences process, the browse page, and a potential profile. Considering the browse page and selecting preferences are the essential aspects of the app, I wanted to ensure there was an intuitive flow during the onboarding process.

//style guide

I aimed to keep the style of Eventric consistent throughout. Below you can find the Color Palette and Typography. I chose this color scheme to bring a bright and uplifting tone to a process that can bring exciting and new experiences to users.

//remote usability test

To determine the functionality of the platform, I designed a remote usability test to be performed on five of my peers.

Objective: I want to learn if the process of finding and saving an event that a user is interested in is intuitive.

Instructions: Thank you for agreeing to participate in this study. My team is hoping to gain a better understanding of how intuitive the interface is for users to accomplish their goal of finding events to attend that fit their interests. During the test, you will complete a series of 5 tasks on the prototype link above. Imagine you are looking to find an event to attend with a friend. We will be asking you to work through the process of browsing through events, finding one that suits your interest, and saving the event to view later. We will also ask you to input specific interests during the onboarding process as well as filter options while browsing. As you work through these tasks, please explain your thought process out loud as you complete each task. There is no right or wrong way to complete each task, and if you cannot complete a task, you are welcome to move onto the next task. Thank you for your participation.

Tasks:
   1. Create an Account through the onboarding process
   2. Find option to add interests and select at least 3 interests
   3. Select the recommended for you option on the browsing page
   4. Select an event you’re interested in
   5. Add the event to your saved events

//iteration

After receiving feedback after usability testing, I iterated on my high fidelity prototype and upgraded many UI elements. Since users will spend majority of their time on other apps, it was important to ensure the sizing, colors, and images were consistent with the user's current mental model. I drew inspiration from popular apps to increase consistency for users across platforms. The images, shapes, and iconography were used intentionally to be modern and undeviating from current UI/UX trends.

//high fidelity

Overall, I aimed to create an engaging and positive experience for users who are looking for events that fit their interests and specifications. I feel this is the best solution to the overall problem because users of all ages will use this platform to find events that interest them and fit any restrictions. The outcome will hopefully be a smooth and comfortable experience searching for and discovering events.

This product’s goal is to provide a platform for users of any age to find events that suit their interests. This product is for anyone of any age. It could be for young adults who want to attend concerts that allow for under 21 or for a middle-aged couple to find fun events to attend on the weekends in their area. No matter the reason or interest, Eventric is a platform to help users find fun activities within location or age restrictions that fit interests and passions.

//reflections and next steps

Upon review among my peers, I was recommended some key areas I could evolve and iterate on. From discussing with users who have used other platforms to find events, I have discovered a consensus that Facebook does not fulfill all the needs of users. It allows users to see which of their friends are interested in or attending certain events, but there is no efficient way to filter through and see recommended events. With Eventric, users have the ability to customize the feed to find events that fit their interests and use filters to aid with age and location restrictions. This is an effective solution because it provides users with more options and functionality.

Eventually, I would like to add more functionality in terms of searching by location, such as a neighborhood in a city or within a certain mileage of a user’s current location. Additionally, I’d like to add a feature where users can follow and collaborate with each other to share events and perhaps create them among themselves.

MAM

Timeline:
December 2019 - Present

Role:
Vice President of Technology & Operations

Collaborators:
MAM Executive Board

Skills:
UI/UX Design, Website Design, Graphic Design, Copywriting, Digital Marketing, UX Research, UX Analysis, Heuristic Evaluation, Sketching, Wireframing, Prototyping, Sketch, Excel, Adobe Illustrator

//What is mam?

Michigan Advertising and Marketing (MAM) is a student-organization at the University of Michigan that provides members with the opportunity to work with real businesses, and provides clients with valuable, student-generated recommendations and insights. Our mission is to cultivate a diverse community of creative thinkers and passionate leaders who empower businesses in Ann Arbor and beyond. The club consists of an executive board to oversee operations and account directors to lead teams of designers and analysts.

//The Problem

The current MAM organization website is not informative nor intuitive and does not serve the users it aims to target.

//The Solution

To redesign the MAM website so that Prospective Students can navigate the new member recruitment process and increase interest from Prospective Clients who seek to learn more about the organization and its services.

View the live website here!

//impact

Since the website has gone live, I’ve received overall positive feedback from prospective students, current club members, and potential clients. As a result of the design, the amount of prospective student applications increased by over 60% for the Fall 2020 semester and the organization was contacted by numerous interested clients. 

//Design Process

The design process I followed is the five stages of the Design thinking process: Empathize, Define, Ideate, Prototype, and Test.

//empathize

Why does it need a redesign?

After a careful analysis of the MAM website, I drew the following conclusion of why it needed a redesign:
• The website looks outdated
• For prospective students, the website lacked a CTA (Call to Action)
• For clients, there was not enough information about the club to showcase the range of services provided
• For prospective students, there was not enough information on the recruitment process
• For prospective students, there was not enough transparency on the club experience

identifying stakeholders

Prospective Students
• First-year students seeking an organization to join when they first get to campus
• Second-year students looking to gain more experience
• Third-year students seeking relevant experience to add to their resumes for internship hunting

Prospective Clients
• Local businesses who want to target the college clientele and seeking student perspective
• Small businesses searching for cost-efficient and worthwhile advertising services

heuristic evaluation

Using Nielsen's 10 Usability Heuristics for User Experience Design, I evaluated the current MAM website in order to then identify potential improvements.

• Visibility of system Status
At the moment, there is proper feedback for users when engaging with the website, yet there is not much engagement to begin with throughout the site.

• Match between system and the real world
Much of the copywriting, such as the navigation options, does not match with other organization websites, which might be confusing for students who are also searching for other student organization websites.

• User control and freedom
This aspect of the website is sufficient.

• Consistency and standards
Jakob's Law states that users spend majority of their time on other websites. The current MAM website is not consistent with other websites, as there are no actionable options in the Footer to allow further brand exploration. Additionally, the home screen lacks the name of the organization, which is confusing for users and inconsistent with other websites.

• Error prevention
This aspect of the website is sufficient.

• Recognition rather than recall
With the top navigation bar as the only option to move between pages, there is a lack of support for the memory of users. This information should be retrievable more easily.

• Flexibility and efficiency of use
There is a lack of CTA options throughout the website. Additionally, for users who are looking for specific information, there is a lack of shortcuts to relevant and pertinent information.

• Aesthetic and minimalist design
The current aesthetic of the website feels outdated, heavy, and cluttered.

• Help users recognize, diagnose, and recover from errors
This aspect of the website is sufficient.

• Help and documentation
The website currently lacks any documentation that answers  questions a user might have for the organization. or while pursuing the website.

//define

identifying problems in the current website

• Missing a call to action for both students and clients (contacting the organization or applying to a new member position)
• Missing content in footer to direct user toward resources
• Misalignment and inconsistency of elements on the screen
• Outdated in visual design
• Not engaging with users, more of an informational website than an interactive one
• Lack of images showcasing club members

problems in current use cases

At first glance, the user is not able to:
• Understand MAM as an organization (what the purpose is and what they could gain from the organization)
• Services provided
• Find relevant information about the recruitment process instantly
• Find relevant information about client services instantly

Use Stories/CAses

For Prospective Students: User wants to
• Know about MAM and its mission
• Understand what they could gain as a member
• Structure of the organization
• Contact the lead recruitment board member
• Get questions answered (FAQ)
• Learn about the club experience (social media)

For Prospective Clients: User wants to
• Understand the types of services MAM offers
• See what previous clients have thought about the organization
• See examples of design work
• Learn more about the members of the club that might work with their business

defining brand values

• Helping clients reach business goals
• Supporting local Ann Arbor businesses
• Developing student leaders
• Providing professional experiences

//ideate

solutions

This is the content that would solve all the problems analyzed from the current website:
• Information on the recruitment process - Join information
• Learning what candidates MAM is looking for - FAQ
• Contact the organization - Contact Form & ChatBot
• Learn about the club experience - Incorporate images & social media
• View mission statementView client services
• Understand distinction between membership - Creative Design vs Market Research

information architecture

I ran through making the Information Architecture of all the elements I wanted to include on the new website. During the recruitment season, the CTA would change to "Apply Now" for prospective students.

//prototype

sketches

I started by drawing out sketches to showcase ideas for each screen.

wireframes

Once satisfied with my plan, I moved to create the mid-fidelity wireframes.

high fidelity

I designed the final UI of the website on Sketch of the Home, About, Market Research, Creative Design, Team, Clients, Join, and Contact screens. Shown below are the Home, About, Join, and Contact pages.

HOME
I redesigned the front page to emphasize the brand and provide a way to connect with the organization through social media channels and pictures of our members at client sites.

ABOUT
To further explain the roles and responsibilities of new members in the organization, I added a page for each of the two entry positions: creative design and market research. Each page gave an overview of the position, time commitment, and educational workshops as well as a case study or examples of previous work. During Fall 2019 and Fall 2020, a survey was sent to all club members to gain insights into the demographics of the organization. My goal was to present this information visually on the organization's website. This would be for prospective applicants and clients to effectively understand the diversity that is represented in the club.

JOIN
During our Winter 2020 and Fall 2020 new member recruitment season, I designed an announcement bar at the top of each page and a promotional pop-up box on the home page. This provided easy and efficient access to our application for all website visitors and prospective applicants. Furthermore, I created a calendar of events for users to visualize and employ to plan which recruitment events they would like to attend. This design was visually appealing and concise. A FAQ section was included on the Join page for prospective applicants to have their questions answered quickly before attending any recruitment events. Additionally, four testimonials quoted from various types of members were included to show the range of experiences that came from membership in MAM. After our virtual information session, a link to the recording was added for any future prospective applicants to learn more.

CONTACT
The website originally lacked important information in the footer. It contained three social media links but did not provide any navigational information or a logo. To promote the brand and make the website more functional, I added a single-colored version of the logo, navigational links, a brief description of the organization, and links to the organization’s social media profiles.

//test

final design

View the live website here!

What's next?

Moving forward, I’d like to iterate on my design to add components for current members. I’d like to add an account feature that allows for new members to contact and schedule coffee chats with executive board members. Another feature I’d like to add is a section showcasing how the organization has adapted due to COVID-19, as this could be used as a marketing point for new members and new clients.

desai Accelerator

Timeline:
12 Weeks

Role:
UX & Visual Design Intern

Skills:
UI/UX Design, Graphic Design, Website Design, UX Analysis, UX Research, Sketching, Wireframing, Teamwork, Leadership

Tools:
Figma, Adobe Illustrator, Zoom

Collaborators:
Maggie Yang, Swati Bhageria, Ethan Lacy

//about desai

The Desai Accelerator was founded in 2013 to expand the growing Ann Arbor technology startup community. With support from benefactors at the Desai Sethi Family Foundation, the Desai Accelerator was created as a joint initiative between the Zell Lurie Institute for Entrepreneurial Studies at Michigan Ross and the Center for Entrepreneurship at the College of Engineering at the University of Michigan.

Equipped with resources from both the University and the city of Ann Arbor, the Desai Accelerator is able to help entrepreneurs build their businesses and maximize their potential.

//team structure

At Desai, I worked as the UX and Visual Design Intern and collaborated mainly with the design team to exchange feedback and collaborate on various projects. As one of the designers on the intern team, I listened to the founders’ goals and applied design thinking to serve their needs, provide recommendations, and make improvements. In order to succeed in my role, I regularly communicated and set project plans with the startup founders to make sure all goals would be met.

Throughout the summer, I virtually worked alongside 9 other interns from various backgrounds. It was a new experience to work from home alongside other interns whom I had never met in person.

//projects

While I worked on a variety of projects throughout the summer ranging from visual and website design to financial models and market research, I have detailed two relevant ones below.

//yourcheck

project overview

Alongside the lead UX Designer, I worked with the startup Yourcheck, a technology enabled company that builds trust in the internet through background checks. We were tasked with redesigning the landing pages of their website. 

What we did

Through many Zoom meetings with the company founders, we identified key areas of improvement from the current design:
• Lacked a personalized and engaging experience
• Confusing for users to understand the purpose of the company (differentiating between the product for consumer and freelancers looking for business)
• Show that the company is trustworthy

Determined the following improvements to be implemented:
• Separate the product from the freelancing business
• Focus on consumer part of the pageCreate connections with use cases and personal profiles
• Explaining background check processEducating consumers on how the app works
• Providing a CTA (downloading the app)

what we delivered

• High fidelity prototype for each a Product page and a Freelancer page
• Collection of welcoming and trustworthy images
• Customized icons with colors to promote an engaging experience
• Interactions to learn more about the product
• Card designs to display use cases for a personalized experience

prototype

We added more interactions such as a drop down option to view more information about the product. With this functionality, the user is not overwhelmed with information and can read what they chose. Furthermore, with the customized icons for the various types of background checks provided,

impact

Many of our ideas are currently being used on the company website, such as our image suggestions, color icons for types of service, and drop down interactions for learning more about the product. As a result of our work, the amount of users signing up for the company's beta test increased tremendously.

//nochi studios

project overview

Nochi Studios is a gaming studio that creates romance visual novel games. Their aim is to combine the creativity of indie developed games with the professionalism of a large studio. Through developing games that are thought-provoking, educational, and socially-impactful, they hope to cultivate a community of players who are engaged with the story topics and characters. They have already released one game and are currently working on a new release as of August 2020.

Alongside two business interns, I was tasked with designing and implementing a website for the company to showcase their work, sell products, and connect with gamers.

competitive analysis

The team performed a competitive analysis on the websites of similar gaming studios. Working alongside Nochi's founder, we determined the pros and cons of each website, what elements we wanted to implement, and how the user could interact with the studio through the website.

sketches & wireframes

While working alongside two business interns for this project, I taught them the basics of the design process and introduced them to sketching and wireframing ideas. We set project goals of what we wanted to accomplish ans used these iterations to determine what to include on the website. With approval from Nochi's founder, we established a general outline that would accomplish Nochi's goals of cultivating a community and being a resource for devoted game followers:

• HOME
Includes a logo with the company tagline, a description of the studio with a CTA to learn more, a newsletter sign up, recent stories from the blog, and items from the e-commerce shop. After analyzing the websites of competitors, we concluded these features would be a great way to tell a narrative for users not familiar with the brand as well as catering to their loyal gamers.

• ABOUT
Includes the mission statement and team member introductions. We chose to include this element on the website to provide context to users who do not know about the studio and their work. Additionally, we felt that including the team member descriptions would make the studio more personable and relatable to a wide-variety of potential users.

• GAMES
Folder that holds a page for each game the studio produces. Considering the studio develops a game every 18 months, we felt that this was the most efficient way to showcase the games and that the company can redesign this feature in a few years after they grow and develop more games.

• BLOG
Included are articles written by members of the Nochi team. The Nochi founder wanted to have a blog included on the website to connect with loyal gamers and have users be included in the game development experience.

• CONTACT
Included a contact form alongside social media links for users to ask questions and engage with the studio.

• SHOP
Included shop for merchandise related to Nochi's games as requested by the client.

Style Guide & Branding

When finalizing and implementing our ideas for the website, I got to work on creating a style guide for the company. Based on their logo asset, I developed a color palette, typography guide, and branding identity guide.

impact

Due to time restrictions and lack of a website developer on the Nochi team, much of the design process was rushed. We used previous research conducted by the studio inform our designs, such as the majority of the user base was discovered to be females who are loyal gamers.

//Challenges

• Virtually working from home
While interning virtually, I only met my fellow interns and clients through Zoom meetings. It was difficult at times to cultivate a creative and motivating environment while working virtually. Yet, I am proud to have accomplished over 10 high-impact clients throughout the summer despite challenges with Zoom fatigue and burnout.

• Lack of time and resources
The startup founders were often on their own timelines and therefore could not provide the intern team with the time and resources we needed to complete projects. One of the greatest lessons I learned throughout the summer was how to take ambiguity and still complete deliverables for clients.

//takeaways

• Startup life
After working alongside five different startups for 12 weeks, I witnessed the highs and lows that comes along with startup life. It can be incredibly grueling as these founders work around the clock to grow their business. Yet, it is also extremely rewarding as they are motivated to accomplish their goals.

• Navigating ambiguity
Due to the lack of information and resources that comes with startup life, I worked a lot of the time with very little information. With this ambiguity, I learned to navigate with what resources I had and continue to deliver for the founders.

• Failure can be positive
Throughout the summer, I was often faced with tasks that I hadn't had been exposed to before. I was afraid that I would fail in this regard, yet quickly learned that it is better to try because the worst that could happen is I fail and  iterate on that failure.

MAM

Timeline:
December 2019 - Present

Role:
Vice President of Technology & Operations

Collaborators:
MAM Executive Board

Skills:
UI/UX Design, Website Design, Graphic Design, Copywriting, Digital Marketing, UX Research, UX Analysis, Heuristic Evaluation, Sketching, Wireframing, Prototyping, Sketch, Excel, Adobe Illustrator

//What is mam?

Michigan Advertising and Marketing (MAM) is a student-organization at the University of Michigan that provides members with the opportunity to work with real businesses, and provides clients with valuable, student-generated recommendations and insights. Our mission is to cultivate a diverse community of creative thinkers and passionate leaders who empower businesses in Ann Arbor and beyond. The club consists of an executive board to oversee operations and account directors to lead teams of designers and analysts.

//The Problem

The current MAM organization website is not informative nor intuitive and does not serve the users it aims to target.

//The Solution

To redesign the MAM website so that Prospective Students can navigate the new member recruitment process and increase interest from Prospective Clients who seek to learn more about the organization and its services.

View the live website here!

//impact

Since the website has gone live, I’ve received overall positive feedback from prospective students, current club members, and potential clients. As a result of the design, the amount of prospective student applications increased by over 60% for the Fall 2020 semester and the organization was contacted by numerous interested clients. 

//Design Process

The design process I followed is the five stages of the Design thinking process: Empathize, Define, Ideate, Prototype, and Test.

//empathize

Why does it need a redesign?

After a careful analysis of the MAM website, I drew the following conclusion of why it needed a redesign:
• The website looks outdated
• For prospective students, the website lacked a CTA (Call to Action)
• For clients, there was not enough information about the club to showcase the range of services provided
• For prospective students, there was not enough information on the recruitment process
• For prospective students, there was not enough transparency on the club experience

identifying stakeholders

Prospective Students
• First-year students seeking an organization to join when they first get to campus
• Second-year students looking to gain more experience
• Third-year students seeking relevant experience to add to their resumes for internship hunting

Prospective Clients
• Local businesses who want to target the college clientele and seeking student perspective
• Small businesses searching for cost-efficient and worthwhile advertising services

heuristic evaluation

Using Nielsen's 10 Usability Heuristics for User Experience Design, I evaluated the current MAM website in order to then identify potential improvements.

• Visibility of system Status
At the moment, there is proper feedback for users when engaging with the website, yet there is not much engagement to begin with throughout the site.

• Match between system and the real world
Much of the copywriting, such as the navigation options, does not match with other organization websites, which might be confusing for students who are also searching for other student organization websites.

• User control and freedom
This aspect of the website is sufficient.

• Consistency and standards
Jakob's Law states that users spend majority of their time on other websites. The current MAM website is not consistent with other websites, as there are no actionable options in the Footer to allow further brand exploration. Additionally, the home screen lacks the name of the organization, which is confusing for users and inconsistent with other websites.

• Error prevention
This aspect of the website is sufficient.

• Recognition rather than recall
With the top navigation bar as the only option to move between pages, there is a lack of support for the memory of users. This information should be retrievable more easily.

• Flexibility and efficiency of use
There is a lack of CTA options throughout the website. Additionally, for users who are looking for specific information, there is a lack of shortcuts to relevant and pertinent information.

• Aesthetic and minimalist design
The current aesthetic of the website feels outdated, heavy, and cluttered.

• Help users recognize, diagnose, and recover from errors
This aspect of the website is sufficient.

• Help and documentation
The website currently lacks any documentation that answers  questions a user might have for the organization. or while pursuing the website.

//define

identifying problems in the current website

• Missing a call to action for both students and clients (contacting the organization or applying to a new member position)
• Missing content in footer to direct user toward resources
• Misalignment and inconsistency of elements on the screen
• Outdated in visual design
• Not engaging with users, more of an informational website than an interactive one
• Lack of images showcasing club members

problems in current use cases

At first glance, the user is not able to:
• Understand MAM as an organization (what the purpose is and what they could gain from the organization)
• Services provided
• Find relevant information about the recruitment process instantly
• Find relevant information about client services instantly

Use Stories/CAses

For Prospective Students: User wants to
• Know about MAM and its mission
• Understand what they could gain as a member
• Structure of the organization
• Contact the lead recruitment board member
• Get questions answered (FAQ)
• Learn about the club experience (social media)

For Prospective Clients: User wants to
• Understand the types of services MAM offers
• See what previous clients have thought about the organization
• See examples of design work
• Learn more about the members of the club that might work with their business

defining brand values

• Helping clients reach business goals
• Supporting local Ann Arbor businesses
• Developing student leaders
• Providing professional experiences

//ideate

solutions

This is the content that would solve all the problems analyzed from the current website:
• Information on the recruitment process - Join information
• Learning what candidates MAM is looking for - FAQ
• Contact the organization - Contact Form & ChatBot
• Learn about the club experience - Incorporate images & social media
• View mission statementView client services
• Understand distinction between membership - Creative Design vs Market Research

information architecture

I ran through making the Information Architecture of all the elements I wanted to include on the new website. During the recruitment season, the CTA would change to "Apply Now" for prospective students.

//prototype

sketches

I started by drawing out sketches to showcase ideas for each screen.

wireframes

Once satisfied with my plan, I moved to create the mid-fidelity wireframes.

high fidelity

I designed the final UI of the website on Sketch of the Home, About, Market Research, Creative Design, Team, Clients, Join, and Contact screens. Shown below are the Home, About, Join, and Contact pages.

HOME
I redesigned the front page to emphasize the brand and provide a way to connect with the organization through social media channels and pictures of our members at client sites.

ABOUT
To further explain the roles and responsibilities of new members in the organization, I added a page for each of the two entry positions: creative design and market research. Each page gave an overview of the position, time commitment, and educational workshops as well as a case study or examples of previous work. During Fall 2019 and Fall 2020, a survey was sent to all club members to gain insights into the demographics of the organization. My goal was to present this information visually on the organization's website. This would be for prospective applicants and clients to effectively understand the diversity that is represented in the club.

JOIN
During our Winter 2020 and Fall 2020 new member recruitment season, I designed an announcement bar at the top of each page and a promotional pop-up box on the home page. This provided easy and efficient access to our application for all website visitors and prospective applicants. Furthermore, I created a calendar of events for users to visualize and employ to plan which recruitment events they would like to attend. This design was visually appealing and concise. A FAQ section was included on the Join page for prospective applicants to have their questions answered quickly before attending any recruitment events. Additionally, four testimonials quoted from various types of members were included to show the range of experiences that came from membership in MAM. After our virtual information session, a link to the recording was added for any future prospective applicants to learn more.

CONTACT
The website originally lacked important information in the footer. It contained three social media links but did not provide any navigational information or a logo. To promote the brand and make the website more functional, I added a single-colored version of the logo, navigational links, a brief description of the organization, and links to the organization’s social media profiles.

//test

final design

View the live website here!

What's next?

Moving forward, I’d like to iterate on my design to add components for current members. I’d like to add an account feature that allows for new members to contact and schedule coffee chats with executive board members. Another feature I’d like to add is a section showcasing how the organization has adapted due to COVID-19, as this could be used as a marketing point for new members and new clients.

MAM

Timeline:
December 2019 - Present

Role:
Vice President of Technology & Operations

Collaborators:
MAM Executive Board

Skills:
UI/UX Design, Website Design, Graphic Design, Copywriting, Digital Marketing, UX Research, UX Analysis, Heuristic Evaluation, Sketching, Wireframing, Prototyping, Sketch, Excel, Adobe Illustrator

//What is mam?

Michigan Advertising and Marketing (MAM) is a student-organization at the University of Michigan that provides members with the opportunity to work with real businesses, and provides clients with valuable, student-generated recommendations and insights. Our mission is to cultivate a diverse community of creative thinkers and passionate leaders who empower businesses in Ann Arbor and beyond. The club consists of an executive board to oversee operations and account directors to lead teams of designers and analysts.

//The Problem

The current MAM organization website is not informative nor intuitive and does not serve the users it aims to target.

//The Solution

To redesign the MAM website so that Prospective Students can navigate the new member recruitment process and increase interest from Prospective Clients who seek to learn more about the organization and its services.

View the live website here!

//impact

Since the website has gone live, I’ve received overall positive feedback from prospective students, current club members, and potential clients. As a result of the design, the amount of prospective student applications increased by over 60% for the Fall 2020 semester and the organization was contacted by numerous interested clients. 

//Design Process

The design process I followed is the five stages of the Design thinking process: Empathize, Define, Ideate, Prototype, and Test.

//empathize

Why does it need a redesign?

After a careful analysis of the MAM website, I drew the following conclusion of why it needed a redesign:
• The website looks outdated
• For prospective students, the website lacked a CTA (Call to Action)
• For clients, there was not enough information about the club to showcase the range of services provided
• For prospective students, there was not enough information on the recruitment process
• For prospective students, there was not enough transparency on the club experience

identifying stakeholders

Prospective Students
• First-year students seeking an organization to join when they first get to campus
• Second-year students looking to gain more experience
• Third-year students seeking relevant experience to add to their resumes for internship hunting

Prospective Clients
• Local businesses who want to target the college clientele and seeking student perspective
• Small businesses searching for cost-efficient and worthwhile advertising services

heuristic evaluation

Using Nielsen's 10 Usability Heuristics for User Experience Design, I evaluated the current MAM website in order to then identify potential improvements.

• Visibility of system Status
At the moment, there is proper feedback for users when engaging with the website, yet there is not much engagement to begin with throughout the site.

• Match between system and the real world
Much of the copywriting, such as the navigation options, does not match with other organization websites, which might be confusing for students who are also searching for other student organization websites.

• User control and freedom
This aspect of the website is sufficient.

• Consistency and standards
Jakob's Law states that users spend majority of their time on other websites. The current MAM website is not consistent with other websites, as there are no actionable options in the Footer to allow further brand exploration. Additionally, the home screen lacks the name of the organization, which is confusing for users and inconsistent with other websites.

• Error prevention
This aspect of the website is sufficient.

• Recognition rather than recall
With the top navigation bar as the only option to move between pages, there is a lack of support for the memory of users. This information should be retrievable more easily.

• Flexibility and efficiency of use
There is a lack of CTA options throughout the website. Additionally, for users who are looking for specific information, there is a lack of shortcuts to relevant and pertinent information.

• Aesthetic and minimalist design
The current aesthetic of the website feels outdated, heavy, and cluttered.

• Help users recognize, diagnose, and recover from errors
This aspect of the website is sufficient.

• Help and documentation
The website currently lacks any documentation that answers  questions a user might have for the organization. or while pursuing the website.

//define

identifying problems in the current website

• Missing a call to action for both students and clients (contacting the organization or applying to a new member position)
• Missing content in footer to direct user toward resources
• Misalignment and inconsistency of elements on the screen
• Outdated in visual design
• Not engaging with users, more of an informational website than an interactive one
• Lack of images showcasing club members

problems in current use cases

At first glance, the user is not able to:
• Understand MAM as an organization (what the purpose is and what they could gain from the organization)
• Services provided
• Find relevant information about the recruitment process instantly
• Find relevant information about client services instantly

Use Stories/CAses

For Prospective Students: User wants to
• Know about MAM and its mission
• Understand what they could gain as a member
• Structure of the organization
• Contact the lead recruitment board member
• Get questions answered (FAQ)
• Learn about the club experience (social media)

For Prospective Clients: User wants to
• Understand the types of services MAM offers
• See what previous clients have thought about the organization
• See examples of design work
• Learn more about the members of the club that might work with their business

defining brand values

• Helping clients reach business goals
• Supporting local Ann Arbor businesses
• Developing student leaders
• Providing professional experiences

//ideate

solutions

This is the content that would solve all the problems analyzed from the current website:
• Information on the recruitment process - Join information
• Learning what candidates MAM is looking for - FAQ
• Contact the organization - Contact Form & ChatBot
• Learn about the club experience - Incorporate images & social media
• View mission statementView client services
• Understand distinction between membership - Creative Design vs Market Research

information architecture

I ran through making the Information Architecture of all the elements I wanted to include on the new website. During the recruitment season, the CTA would change to "Apply Now" for prospective students.

//prototype

sketches

I started by drawing out sketches to showcase ideas for each screen.

wireframes

Once satisfied with my plan, I moved to create the mid-fidelity wireframes.

high fidelity

I designed the final UI of the website on Sketch of the Home, About, Market Research, Creative Design, Team, Clients, Join, and Contact screens. Shown below are the Home, About, Join, and Contact pages.

HOME
I redesigned the front page to emphasize the brand and provide a way to connect with the organization through social media channels and pictures of our members at client sites.

ABOUT
To further explain the roles and responsibilities of new members in the organization, I added a page for each of the two entry positions: creative design and market research. Each page gave an overview of the position, time commitment, and educational workshops as well as a case study or examples of previous work. During Fall 2019 and Fall 2020, a survey was sent to all club members to gain insights into the demographics of the organization. My goal was to present this information visually on the organization's website. This would be for prospective applicants and clients to effectively understand the diversity that is represented in the club.

JOIN
During our Winter 2020 and Fall 2020 new member recruitment season, I designed an announcement bar at the top of each page and a promotional pop-up box on the home page. This provided easy and efficient access to our application for all website visitors and prospective applicants. Furthermore, I created a calendar of events for users to visualize and employ to plan which recruitment events they would like to attend. This design was visually appealing and concise. A FAQ section was included on the Join page for prospective applicants to have their questions answered quickly before attending any recruitment events. Additionally, four testimonials quoted from various types of members were included to show the range of experiences that came from membership in MAM. After our virtual information session, a link to the recording was added for any future prospective applicants to learn more.

CONTACT
The website originally lacked important information in the footer. It contained three social media links but did not provide any navigational information or a logo. To promote the brand and make the website more functional, I added a single-colored version of the logo, navigational links, a brief description of the organization, and links to the organization’s social media profiles.

//test

final design

View the live website here!

What's next?

Moving forward, I’d like to iterate on my design to add components for current members. I’d like to add an account feature that allows for new members to contact and schedule coffee chats with executive board members. Another feature I’d like to add is a section showcasing how the organization has adapted due to COVID-19, as this could be used as a marketing point for new members and new clients.

desai Accelerator

Timeline:
12 Weeks

Role:
UX & Visual Design Intern

Skills:
UI/UX Design, Graphic Design, Website Design, UX Analysis, UX Research, Sketching, Wireframing, Teamwork, Leadership

Tools:
Figma, Adobe Illustrator, Zoom

Collaborators:
Maggie Yang, Swati Bhageria, Ethan Lacy

//about desai

The Desai Accelerator was founded in 2013 to expand the growing Ann Arbor technology startup community. With support from benefactors at the Desai Sethi Family Foundation, the Desai Accelerator was created as a joint initiative between the Zell Lurie Institute for Entrepreneurial Studies at Michigan Ross and the Center for Entrepreneurship at the College of Engineering at the University of Michigan.

Equipped with resources from both the University and the city of Ann Arbor, the Desai Accelerator is able to help entrepreneurs build their businesses and maximize their potential.

//team structure

At Desai, I worked as the UX and Visual Design Intern and collaborated mainly with the design team to exchange feedback and collaborate on various projects. As one of the designers on the intern team, I listened to the founders’ goals and applied design thinking to serve their needs, provide recommendations, and make improvements. In order to succeed in my role, I regularly communicated and set project plans with the startup founders to make sure all goals would be met.

Throughout the summer, I virtually worked alongside 9 other interns from various backgrounds. It was a new experience to work from home alongside other interns whom I had never met in person.

//projects

While I worked on a variety of projects throughout the summer ranging from visual and website design to financial models and market research, I have detailed two relevant ones below.

//yourcheck

project overview

Alongside the lead UX Designer, I worked with the startup Yourcheck, a technology enabled company that builds trust in the internet through background checks. We were tasked with redesigning the landing pages of their website. 

What we did

Through many Zoom meetings with the company founders, we identified key areas of improvement from the current design:
• Lacked a personalized and engaging experience
• Confusing for users to understand the purpose of the company (differentiating between the product for consumer and freelancers looking for business)
• Show that the company is trustworthy

Determined the following improvements to be implemented:
• Separate the product from the freelancing business
• Focus on consumer part of the pageCreate connections with use cases and personal profiles
• Explaining background check processEducating consumers on how the app works
• Providing a CTA (downloading the app)

what we delivered

• High fidelity prototype for each a Product page and a Freelancer page
• Collection of welcoming and trustworthy images
• Customized icons with colors to promote an engaging experience
• Interactions to learn more about the product
• Card designs to display use cases for a personalized experience

prototype

We added more interactions such as a drop down option to view more information about the product. With this functionality, the user is not overwhelmed with information and can read what they chose. Furthermore, with the customized icons for the various types of background checks provided,

impact

Many of our ideas are currently being used on the company website, such as our image suggestions, color icons for types of service, and drop down interactions for learning more about the product. As a result of our work, the amount of users signing up for the company's beta test increased tremendously.

//nochi studios

project overview

Nochi Studios is a gaming studio that creates romance visual novel games. Their aim is to combine the creativity of indie developed games with the professionalism of a large studio. Through developing games that are thought-provoking, educational, and socially-impactful, they hope to cultivate a community of players who are engaged with the story topics and characters. They have already released one game and are currently working on a new release as of August 2020.

Alongside two business interns, I was tasked with designing and implementing a website for the company to showcase their work, sell products, and connect with gamers.

competitive analysis

The team performed a competitive analysis on the websites of similar gaming studios. Working alongside Nochi's founder, we determined the pros and cons of each website, what elements we wanted to implement, and how the user could interact with the studio through the website.

sketches & wireframes

While working alongside two business interns for this project, I taught them the basics of the design process and introduced them to sketching and wireframing ideas. We set project goals of what we wanted to accomplish ans used these iterations to determine what to include on the website. With approval from Nochi's founder, we established a general outline that would accomplish Nochi's goals of cultivating a community and being a resource for devoted game followers:

• HOME
Includes a logo with the company tagline, a description of the studio with a CTA to learn more, a newsletter sign up, recent stories from the blog, and items from the e-commerce shop. After analyzing the websites of competitors, we concluded these features would be a great way to tell a narrative for users not familiar with the brand as well as catering to their loyal gamers.

• ABOUT
Includes the mission statement and team member introductions. We chose to include this element on the website to provide context to users who do not know about the studio and their work. Additionally, we felt that including the team member descriptions would make the studio more personable and relatable to a wide-variety of potential users.

• GAMES
Folder that holds a page for each game the studio produces. Considering the studio develops a game every 18 months, we felt that this was the most efficient way to showcase the games and that the company can redesign this feature in a few years after they grow and develop more games.

• BLOG
Included are articles written by members of the Nochi team. The Nochi founder wanted to have a blog included on the website to connect with loyal gamers and have users be included in the game development experience.

• CONTACT
Included a contact form alongside social media links for users to ask questions and engage with the studio.

• SHOP
Included shop for merchandise related to Nochi's games as requested by the client.

Style Guide & Branding

When finalizing and implementing our ideas for the website, I got to work on creating a style guide for the company. Based on their logo asset, I developed a color palette, typography guide, and branding identity guide.

impact

Due to time restrictions and lack of a website developer on the Nochi team, much of the design process was rushed. We used previous research conducted by the studio inform our designs, such as the majority of the user base was discovered to be females who are loyal gamers.

//Challenges

• Virtually working from home
While interning virtually, I only met my fellow interns and clients through Zoom meetings. It was difficult at times to cultivate a creative and motivating environment while working virtually. Yet, I am proud to have accomplished over 10 high-impact clients throughout the summer despite challenges with Zoom fatigue and burnout.

• Lack of time and resources
The startup founders were often on their own timelines and therefore could not provide the intern team with the time and resources we needed to complete projects. One of the greatest lessons I learned throughout the summer was how to take ambiguity and still complete deliverables for clients.

//takeaways

• Startup life
After working alongside five different startups for 12 weeks, I witnessed the highs and lows that comes along with startup life. It can be incredibly grueling as these founders work around the clock to grow their business. Yet, it is also extremely rewarding as they are motivated to accomplish their goals.

• Navigating ambiguity
Due to the lack of information and resources that comes with startup life, I worked a lot of the time with very little information. With this ambiguity, I learned to navigate with what resources I had and continue to deliver for the founders.

• Failure can be positive
Throughout the summer, I was often faced with tasks that I hadn't had been exposed to before. I was afraid that I would fail in this regard, yet quickly learned that it is better to try because the worst that could happen is I fail and  iterate on that failure.

MAM

Timeline:
December 2019 - Present

Role:
Vice President of Technology & Operations

Collaborators:
MAM Executive Board

Skills:
UI/UX Design, Website Design, Graphic Design, Copywriting, Digital Marketing, UX Research, UX Analysis, Heuristic Evaluation, Sketching, Wireframing, Prototyping, Sketch, Excel, Adobe Illustrator

//What is mam?

Michigan Advertising and Marketing (MAM) is a student-organization at the University of Michigan that provides members with the opportunity to work with real businesses, and provides clients with valuable, student-generated recommendations and insights. Our mission is to cultivate a diverse community of creative thinkers and passionate leaders who empower businesses in Ann Arbor and beyond. The club consists of an executive board to oversee operations and account directors to lead teams of designers and analysts.

//The Problem

The current MAM organization website is not informative nor intuitive and does not serve the users it aims to target.

//The Solution

To redesign the MAM website so that Prospective Students can navigate the new member recruitment process and increase interest from Prospective Clients who seek to learn more about the organization and its services.

View the live website here!

//impact

Since the website has gone live, I’ve received overall positive feedback from prospective students, current club members, and potential clients. As a result of the design, the amount of prospective student applications increased by over 60% for the Fall 2020 semester and the organization was contacted by numerous interested clients. 

//Design Process

The design process I followed is the five stages of the Design thinking process: Empathize, Define, Ideate, Prototype, and Test.

//empathize

Why does it need a redesign?

After a careful analysis of the MAM website, I drew the following conclusion of why it needed a redesign:
• The website looks outdated
• For prospective students, the website lacked a CTA (Call to Action)
• For clients, there was not enough information about the club to showcase the range of services provided
• For prospective students, there was not enough information on the recruitment process
• For prospective students, there was not enough transparency on the club experience

identifying stakeholders

Prospective Students
• First-year students seeking an organization to join when they first get to campus
• Second-year students looking to gain more experience
• Third-year students seeking relevant experience to add to their resumes for internship hunting

Prospective Clients
• Local businesses who want to target the college clientele and seeking student perspective
• Small businesses searching for cost-efficient and worthwhile advertising services

heuristic evaluation

Using Nielsen's 10 Usability Heuristics for User Experience Design, I evaluated the current MAM website in order to then identify potential improvements.

• Visibility of system Status
At the moment, there is proper feedback for users when engaging with the website, yet there is not much engagement to begin with throughout the site.

• Match between system and the real world
Much of the copywriting, such as the navigation options, does not match with other organization websites, which might be confusing for students who are also searching for other student organization websites.

• User control and freedom
This aspect of the website is sufficient.

• Consistency and standards
Jakob's Law states that users spend majority of their time on other websites. The current MAM website is not consistent with other websites, as there are no actionable options in the Footer to allow further brand exploration. Additionally, the home screen lacks the name of the organization, which is confusing for users and inconsistent with other websites.

• Error prevention
This aspect of the website is sufficient.

• Recognition rather than recall
With the top navigation bar as the only option to move between pages, there is a lack of support for the memory of users. This information should be retrievable more easily.

• Flexibility and efficiency of use
There is a lack of CTA options throughout the website. Additionally, for users who are looking for specific information, there is a lack of shortcuts to relevant and pertinent information.

• Aesthetic and minimalist design
The current aesthetic of the website feels outdated, heavy, and cluttered.

• Help users recognize, diagnose, and recover from errors
This aspect of the website is sufficient.

• Help and documentation
The website currently lacks any documentation that answers  questions a user might have for the organization. or while pursuing the website.

//define

identifying problems in the current website

• Missing a call to action for both students and clients (contacting the organization or applying to a new member position)
• Missing content in footer to direct user toward resources
• Misalignment and inconsistency of elements on the screen
• Outdated in visual design
• Not engaging with users, more of an informational website than an interactive one
• Lack of images showcasing club members

problems in current use cases

At first glance, the user is not able to:
• Understand MAM as an organization (what the purpose is and what they could gain from the organization)
• Services provided
• Find relevant information about the recruitment process instantly
• Find relevant information about client services instantly

Use Stories/CAses

For Prospective Students: User wants to
• Know about MAM and its mission
• Understand what they could gain as a member
• Structure of the organization
• Contact the lead recruitment board member
• Get questions answered (FAQ)
• Learn about the club experience (social media)

For Prospective Clients: User wants to
• Understand the types of services MAM offers
• See what previous clients have thought about the organization
• See examples of design work
• Learn more about the members of the club that might work with their business

defining brand values

• Helping clients reach business goals
• Supporting local Ann Arbor businesses
• Developing student leaders
• Providing professional experiences

//ideate

solutions

This is the content that would solve all the problems analyzed from the current website:
• Information on the recruitment process - Join information
• Learning what candidates MAM is looking for - FAQ
• Contact the organization - Contact Form & ChatBot
• Learn about the club experience - Incorporate images & social media
• View mission statementView client services
• Understand distinction between membership - Creative Design vs Market Research

information architecture

I ran through making the Information Architecture of all the elements I wanted to include on the new website. During the recruitment season, the CTA would change to "Apply Now" for prospective students.

//prototype

sketches

I started by drawing out sketches to showcase ideas for each screen.

wireframes

Once satisfied with my plan, I moved to create the mid-fidelity wireframes.

high fidelity

I designed the final UI of the website on Sketch of the Home, About, Market Research, Creative Design, Team, Clients, Join, and Contact screens. Shown below are the Home, About, Join, and Contact pages.

HOME
I redesigned the front page to emphasize the brand and provide a way to connect with the organization through social media channels and pictures of our members at client sites.

ABOUT
To further explain the roles and responsibilities of new members in the organization, I added a page for each of the two entry positions: creative design and market research. Each page gave an overview of the position, time commitment, and educational workshops as well as a case study or examples of previous work. During Fall 2019 and Fall 2020, a survey was sent to all club members to gain insights into the demographics of the organization. My goal was to present this information visually on the organization's website. This would be for prospective applicants and clients to effectively understand the diversity that is represented in the club.

JOIN
During our Winter 2020 and Fall 2020 new member recruitment season, I designed an announcement bar at the top of each page and a promotional pop-up box on the home page. This provided easy and efficient access to our application for all website visitors and prospective applicants. Furthermore, I created a calendar of events for users to visualize and employ to plan which recruitment events they would like to attend. This design was visually appealing and concise. A FAQ section was included on the Join page for prospective applicants to have their questions answered quickly before attending any recruitment events. Additionally, four testimonials quoted from various types of members were included to show the range of experiences that came from membership in MAM. After our virtual information session, a link to the recording was added for any future prospective applicants to learn more.

CONTACT
The website originally lacked important information in the footer. It contained three social media links but did not provide any navigational information or a logo. To promote the brand and make the website more functional, I added a single-colored version of the logo, navigational links, a brief description of the organization, and links to the organization’s social media profiles.

//test

final design

View the live website here!

What's next?

Moving forward, I’d like to iterate on my design to add components for current members. I’d like to add an account feature that allows for new members to contact and schedule coffee chats with executive board members. Another feature I’d like to add is a section showcasing how the organization has adapted due to COVID-19, as this could be used as a marketing point for new members and new clients.

say hello

keep exploring

Connect with me

© 2024 Sophie Loesberg. All Rights Reserved.

off to seek the
next adventure.