CRAWL 4 THE CURE
mobile-first website redesign
MY ROLE
OVERVIEW
Crawl 4 The Cure is an event identified as a non-profit organization which donates 100% of the proceeds to the National Multiple Sclerosis Society - Upper Midwest Chapter. This project was a website redesign, using a mobile-first approach. The original design provided users with information that was difficult to access and a website experience that was not responsive between devices.
User Research, User Interviews, User Flows, Information Architecture, Feature Prioritization, Sketching > Wireframes > Prototyping, UI, Testing
The original design for the event was not responsive on different size devices and also did not clearly address: what, when, where, how, why, and who. Information was sporadic and made the user have to dig for what they might be looking for. As an event that needs online registrations to be successful, it was particularly important to design a site that would lead users through an experience that would support their decision to register.
the challenge
We wanted to create a site that provided information in an intuitive and easily digestible way. It was also important to make the experience on a mobile device just as lovely. For this reason we took a mobile-first approach with this design. As a measurement we hope to see this organization receive more event sign ups and a decreased bounce rate.
GOALS
EMPATHIZE
User Research
Our group conducted 1-on-1 interviews as well as a Google survey of users on social media including Facebook and Instagram.
Our research plan focused on these main topics:
1. I want to understand what information is most important to our users
2. I want to know what engages users when visiting a website
3. I want to understand what influences users toward supporting a causes
These topics directed our focus about keeping people informed about the event and increase registration. We also completed a competitor analysis.
The results strongly pointed toward a desire for clear communication about the facts: Who, What, Where, When - Why & How being clear steps
KEY takeaways
To organize the data, we created an affinity diagram and empathy map.
Our key takeaways:
1. People want to make sure the event is legit and in fact supports MS in an impactful way. People need to be well informed before they commit.
2. A lot of people do research about events on their mobile devices.
3. People are more likely to attend an event if it was a recommendation from someone they know or a cause that affects them in a personal way.
Meet Melanie lions
We used the research findings to develop a persona that would help me make design decisions that will best serve users achieve their goals using the app.
DEFINE
PROBLEM STATEMENT
The site users are currently having a hard time finding the information they need, especially when on mobile devices due to the unresponsive design. The inconsistencies between devices and the dissaray of information is contributing to site drop off and therefore lower participation and attendance rates.
USER INSIGHTS
Melanie Lion needs to know all the facts because she wants to feel confident and prepared attending the event to assure she has everything she needs and doesn't damage her off-roading vehicle.
During our interviews and survey, we discovered that Melanie Lion will have a more pleasant experience if she is well informed in advance about the event, track, and other pertinent information.
Therefore, we believe that redoing the website into RWD might be able to help users access all the facts and important information.
We might do this by making sure the new site remains consistent between devices. Doing this will allow our product to be accessible from anywhere with any device without having to re-find everything.
USER FLOW/SITE MAP
We created an information architecture focusing on the site map because we wanted to be able to organize and deliver information in the best way possible.
USER SCENARIO
IDEATION
Wire Frames
I began building out mobile wireframes, starting with the home page. I created a long-scroll homepage to give an infinite scroll feel. I wanted to offer the essential information needed on the home page to address the "who, what, when, where, and why" so that once they got to the bottom they'd either look into further information or select the CTA to register.
TESTING
User testing
I conducted three tests including four tasks each. My objective was to learn how I could make action steps more intuitive for the user.
TASKS:
1. Find the schedule of events.
2. Register and complete payment.
3. User becomes a sponsor.
4. User has a question and submits the contact form.
Hi-FIDELITY Prototype
UI
We used a friendly and easy to read font, Poppins. The event was for off-roading so we tied in some fun elements such as tire-mark button accents and off-road themed water marks. The color palette featured earth tones and the official MS Society color, Orange.
CONCLUSION
The new layout and design of the Crawl 4 the Cure website now allows for users to easily digest important information and navigate the site. The UI consisted of bright and friendly CTA's and a very readable font for the areas that require more reading like the FAQ. To avoid too much heavy text areas, we used collapsable features that can be opened and closed. Most importantly the registration process is simple, intuitive, and easy.
What's next
As next steps, we would like to build out the desktop version of the website and then prepare for front-end development.