top of page

Frame Change

Frame change is an educational management startup that provides access and opportunities for underserved learners to thrive and contribute positively to their communities.

Role: Web Design and Research Director

Timeline: September 2020 - Dec 2020

Tools: Adobe XD, Figma, Adobe illustrator

Objective: To satisfy the user's need to easily navigating the website by the upcoming winter when the sales rate is higher. Because schools are opening back up in the spring semester, we were under pressure to have the website readily available before Black Friday in order to sell language courses.

Outcome: A redesign of the Frame change desktop and mobile website

Discover

The Idea

To redesign the Frame change website to allow students to purchase and log into language courses and provide prospective buyers the ability to purchase instructors to teach remotely in their schools or corporate office.

The User Problem

The previous website did not provide a similar viewing experience regardless of device, did not use clear navigation, and ultimately the design lacked user-friendly features.

Old web design:

Define

User Personas

We want to understand who our users are so we can categorize the website to best suit their needs.  99% of users land on a website due to search engines, 11% by using links. Users clicking onto our website are looking for information to help answer their questions. Audience retention lasts for 10 seconds before we lose a customer. Therefore we must craft frame change’s website to the users below:

Ideate

Homepage Information Architecture

Create a visual hierarchy with information architecture

(Use the way you design the page to draw the user’s eyes towards the information they are trying to find and what we want them to see first)

Goal: to produce a structure and design that balances users’ desires with business needs.

Navigation Bar

There are three possible solutions for us to approach the issue of the navigation bar:

1)Category/Subject based navigation

2)Audience based navigation

3) Verb/Action based navigation

Sitemap

1)When your users reach the end of the contents, our socials and a highly visible and instantly accessible navigation tool are awaiting to send them to places where they can follow/subscribe and to help them move around the website.

 

2) It gives us a chance to rearrange the navigation bar in a way that makes it obvious for the user to find what they’re looking for.

3)It builds search engine optimization to increase your likelihood of being found on a search engine like Google.

Mockup of sitemap:

About Page

About pages should clearly answer:

◦Who we are

◦Why are we in operation

◦How can we help the user

◦Common questions that users have

◦How to contact us

Calls To Action

Von Restroff Effect also known as the isolation effect is regarded in UX design when creating a CTA. Basically stating that if a word or button is different from the rest, it is most likely to be remembered

This is the most significant reason why you should have your CTA buttons/hyperlinks stand out among the rest of the page.

CTA IN THE ORIGINAL WEB DESIGN

Draws attention. Most users would probably assume that this is a link because it has a different color from the rest of the text. It was not linked to anything.

This follows the von Restroffs effect. However, it doesn’t contrast well against the background and the two “calls to action” features can be combined into one link.

Prototype

High Fidelity mockups

Test

Final Iteration

Conclusion

Although the objective stayed the same for the entirety of the project, the UI and demographic changed several times. I believe this inhibited the team from creating a stronger user experience in a timely manner before our deadline. If I could change the work we did, I would have clarified with the CEOs the outcome that would have been most optimal for them given the time constraints.

bottom of page