Emprendelo — Redesign of a government website
What do entrepreneurs need? My first UX project at Ironhack
For our first individual project at Ironhack, I have chosen to re-design “emprendelo”, Madrid’s website for business support. It offers classes and mentorship for anybody who wants to start a business. But the moment you enter the website, it seems evident it has multiple flaws. If a new user wants to get an idea of the purpose of this website, he will probably have to navigate to the “F.A.Q.” area, where all the most valuable information is hiding.
The problem
With this idea in mind, we started a user research. We are learning with a Lean UX methodology, so for this step, we made a Lean survey canvas to elaborate a series of questions. We first take a minute to think what we need to find out, I decided I would be trying to solve one main question: “what do entrepreneurs need in order to start a business?”
What is the most relevant information for a business to succeed, and what do users need to find online?
I sent my surveys and got 51 filled out forms. Data showed that 77.8% of users would value online mentoring. Regarding online information, most people valued legal and financial information (68%), alongside general advice for success. One of the most interesting data showed that a high percentage of businesses fail, and a high percentage of to-be entrepreneurs fail to start their business, so there is a high dropout rate. Most of this is due to the complicated legal and tax system, but how could we help with our website?
During the interviews, one of the crucial ideas that surfaced was being able to get advice directly from experienced entrepreneurs. Also, the difficulties of going through the information due to a very technical language, which doesn’t meet the needs of our target audience.
Mind maps and Affinity maps help us define the problem and begin finding general solutions and ideas. We match this ideas to concepts and data. Some of this ideas already included video lessons, mentoring from experienced entrepreneurs, downloadable audio, a chat assistant…
Empathizing
We should never forget we are designing for our users, so we take the patterns found during our research and make user personas. I decided to focus on three personas to support future design decisions:
- The new entrepreneur who needs assistance to start a business and also enjoys self-learning on the internet,
- The small business that needs to grow and learn how to make the most of his time and public services,
- And the freelancer who likes to be in touch with other professionals and needs advice to better manage her projects.
Personas help us understand the problem and make design decisions. I realized the current website doesn’t address any of these three personas. If a new entrepreneur enters for the first time, he will probably click on “being an entrepreneur” link on the menu. But this link is actually just a guide through the different administration offices. Far from what a new entrepreneur really needs.
I worked with a proto-journey in order to find out the problems of a user who enters the current website for the first time. There is no hierarchy of the information, the titles of the links are misleading, there is no real information to guide new entrepreneurs, and it’s difficult to understand the figure of the mentor.
At the end of our definition stage, we can summarize our goals into three user stories, one for each of our user personas. We will have these goals always present as a reminder of our user’s needs.
Ideation
With this in mind, I started sketching ideas. For this we usually make some crazy 8s, drawing 8 alternatives on the same idea within 5 minutes.
This is where the new site starts to take form. I decided to divide the menu into four categories: addressing entrepreneurship, growth, education, and networking: “I want to start a business”, “I want to grow”, “I want to learn” and “I want to connect”.
Later during our usability tests I realized “I want to grow” was not something our users really needed, so I took it out of the final prototype.
Concept testing
Concept testing is about validating our ideas with our potential users before moving forward with the design process. This will save a lot of time in the long term. After this process, I had a defined idea of what the new site needed to be: a platform with learning material and video classes, accurate business information and advice, online mentoring and a space for networking. The new user would be able to access this benefits after signing in. Also, I needed to have a friendly tone somehow, in order to cater to younger audiences — the ones that might need entrepreneurial advice the most. This was a difficult idea to conceptualize, so I left it to mature and took a lot of references.
So after concept testing we already had an idea of the information there is going to be on the new site, we just needed to organize all of it into a sitemap. With all the previous research, mapping and references, I built the information into these four categories (business, growth, learn, network).
And also organized the navigation with flow charts. I focused on the journey of a registered user. It would have a private space from where to manage the online mentoring, networking and courses, and any other profile information. The new user would be able to fill out some tests in order to find out more about himself and his business and get personalized recommendations. It should work like a map or reference on his path to entrepreneurship. For this, I used “my world of work”’s website as a reference.
Prototyping
We finally made some wireframes and our first usability tests. For this, we used a prototype made with Invision and 4 subjects, and prepared a list of tasks for them to accomplish:
- Sign in
- Do your “strengths” test
- Check changes and look for recommended courses
- Search
We used a “think aloud” technique, where the users are asked to speak their thoughts while navigating the prototype. After the tests, I discovered some pain points that would need to be changed before carrying on with the design process. The users were able to solve all the tasks, but they didn’t seem to understand the recommended content appearing after the test as “unblocked”.
You can check the prototype if you wish! But notice that it’s in Spanish.
Visual design
So of course, the lo-fi wireframes of our prototype are not our final design. To begin talking visual, we first analyze the competition: what colours are they using, what tone, typography, and structure. We define our own brand attributes: trust, closeness, professional, clean, energetic and urban. We want our brand to address younger users (25–45), users who want to start a business and might need help. These users are mainly millennials and generation X, they are totally digital and have big dreams!
We work with a moodboard to define this attributes into 5 categories: colours, form, typography, textures and tone.
The moodboard help us make visual design decisions and have a defined image of our objectives, what we want to communicate. I started drafting and defining the colours and typographies in various tests until I got a defined visual style.
We kept the colour red of the Community of Madrid and worked around it. We wanted a simple experience, focused on the content, where the main actions would pop up with colour elements. We are using an Avenir Next typography with different weights, to help us keep that informal tone.
We placed a high weight on iconography in order to simplify the language. We learned that images are easier to process than text, so iconography is going to help the page read easier.
We started drafting our high-fidelity wireframes on Sketch, on a 1440x1024 Desktop template for a responsive web. There are not a lot of pictures and the main weight is placed on content.
High-fidelity prototype
High fidelity prototypes allow us to test the workflows, UI elements and graphics more realistically.
I sent the wireframes to Flinto to design animations and microinteractions. I developed the flow of a user who checks the main page, decides to register, and gets access to his personal space or “portal”, where the user can personalize his content by completing a series of tests and personal information. After the test, the recommended content is actualized, and the user checks out one of the video-courses that will help him on his path to entrepreneurship. The user can then download the course resources such as PDF’s or podcasts to learn on-the-go.
Additionally, we designed a landing page with all the information that users need to know about the benefits of our website, encouraging them to register.
And made Android and iOS wireframes to see the look and feeling of an Application: learning entrepreneurship from the comfort of your pocket.
The next step would be testing this prototype with real users to get feedback on our design in a low-risk setting, and iterating.
Future steps would include defining the rest of the functionalities that came out in the ideation stages, such as online mentorship and a networking community.
Thank you for taking the time to read this! I hope you enjoyed the project as much as I did. Please feel free to comment, suggest or give a clap.
And thanks to our amazing team of teachers who have patiently taught us and guided us through this awesome 4 weeks of hard work and small victories.
