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

Around the world in a collaborative physical experience

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.